Table of contents
1.
Introduction
2.
What is <img> Tag in HTML?
2.1.
Syntax of <img> Tag
3.
Features and Properties of HTML <img> Tag
4.
HTML image Tag Attributes
4.1.
src attribute
4.2.
alt attribute
4.3.
height attribute
4.4.
width attribute
4.5.
style attribute
4.6.
ismap attribute
4.7.
usemap attribute
5.
Frequently Asked Questions
5.1.
Why is it important to specify the alt attribute?
5.2.
How to code an image in HTML?
5.3.
How many image tags are in HTML? 
5.4.
What is an example of an img tag? 
5.5.
What is data IMG in HTML? 
6.
Conclusion 
Last Updated: Jul 15, 2024
Easy

HTML <img> Tag

Author Komal
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Welcome, Ninjas! Do you know how to use an image in your webpage? What if you want to alter its properties? The <img> tag in HTML helps us to add images to our webpage, and its various HTML img attributes help alter the image's properties. 

html img attributes

This article will discuss the HTML img tag and its features and properties. We will also discuss the implementation of various html img attributes. Let us get started!

What is <img> Tag in HTML?

The <img> tag in HTML is used to add images to web pages. The <img> tag in HTML doesn’t have a closing tag. It is a self-closing tag. The <img> is an inline element of HTML. Two attributes are required in the img tag -  src and alt.

Syntax of <img> Tag

Basic Syntax:

<img src="image-URL" alt="alt-text">

Where,

src specifies the source of the image,

alt specifies the alternate text you want to display on the screen if there’s an error in loading the image.

Both src and alt are required attributes of the <img> tag. 

Features and Properties of HTML <img> Tag

The <img> tag has various features and properties. Some of its features and properties are listed below.

  • The <img> tag is an empty tag.
     
  • The <img> tag is an Inline tag. 
     
  • The <img> tag can be used to make an image a hyperlink with the help of <a> tag.
     
  • Almost all browsers support it.
     
  • The <img> tag has various attributes like src, alt, height, width, etc.
     

Let us now look at various HTML img attributes.

HTML image Tag Attributes

There are several img attributes in HTML, and some of them are mentioned below:

Attribute Name Description Syntax
src The src attribute of the <img> tag specifies the URL of the image to be displayed. The src attribute allows the browser to locate the image file. The URL can either be a relative or an absolute path.  <img src="image-URL">
alt The alt attribute of a <img> tag is used to display some text or information when the image cannot be displayed. It is the alternative text to an image. <img src="image-URL"  alt="alt-text">
height The height attribute of the <img> tag specifies the height of the image. It is given in pixels. <img src="image-URL" alt="alt-text" height="y-pixels">
width The width attribute of the <img> tag is used to specify the width of the image embedded in the web page. It is given in pixels. <img src="image-URL" alt="alt-text" width="x-pixels">
style The style attribute is used as a shortcut to use CSS for an image. The style attribute can give the image a border, padding, margin, etc. Style attribute makes the image look more appealing. <img src="image-URL" alt="alt-text" height="y-pixels" width="x-pixels" style="c-s-s;">
ismap ismap is used as a boolean attribute to check whether an image is an image map or not, i.e., it has clickable areas.

<img src="image-URL"  alt="alt-text"  usemap="#map-name" isname>

<map name="map-name">

     <area shape="rect" coords="coordinates_of_point"  href="link">

</map>

usemap After defining the image map with the help of the <map> tag. To embed the map in the img attribute, we use usemap.

<img src="image-URL"  alt="alt-text"  usemap="#map-name">

<map name="map-name">

     <area shape="rect" coords="coordinates_of_point"  href="link">

</map>

elementtiming This attribute of the <img> tag helps in measuring the performance of the element ‘img’. This is by using the Performance APIs. <img alt="alt-text" src="image-URL" elementtiming="label_for_element" />

Let us try to implement several attributes which we have discussed above.

src attribute

The image src is specified as per the location of the image in the respective folder. For example, we can normally mention the file name if it is in the same folder. But, if it is present in another folder, its relative path is specified.

src
<!DOCTYPE html>
<html lang="en">
<head>
        <title>img tag attributes</title>
</head>
<body>
   <img src="cn4.jpg">
</body>
</html>
src

alt attribute

If the image doesn’t load up for any reason, it displays the text mentioned in the alt attribute. Specifying relevant text in the alt attribute that describes the image is suggested. 

<!DOCTYPE html>
<html lang="en">
<head>
       <title>img tag attributes</title>
</head>
<body>
   <img src="coding_ninjas.jpg" alt="Coding Ninjas Logo">
</body>
</html>
alt

height attribute

Height is specified in pixels in the height attribute of the <img> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>img tag attributes</title>
</head>
<body>
   <img src="cn4.jpg" alt="Coding Ninjas Logo" height="800">
</body>
</html>
alt

width attribute

Width is specified in pixels in the height attribute of the <img> tag.

<!DOCTYPE html>
<html lang="en">
<head>
       <title>img tag attributes</title>
</head>
<body>
   <img src="cn4.jpg" alt="Coding Ninjas Logo" width="100">
</body>
</html>
width

style attribute

The style attribute adds CSS to the <img> tag and makes the image look more appealing.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>img tag attributes</title>
</head>
<body>
   <img src="cn4.jpg" alt="Coding Ninjas Logo" height="200" width="400" style="border: 4px solid orange;">
</body>
</html>
style

ismap attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <title>img tag attributes</title>
</head>
<body>
   <img src="cn4.jpg" alt="Coding Ninjas Logo" height="200" width="400" style="border: 4px solid orange;" usemap="#cn_map">
   <map name="#cn_map">
    <area shape="rect" coords="67 120 118 139" href="https://www.codingninjas.com/studio/home" >
    <area shape="rect" coords="68 119 110 145" href="https://www.codingninjas.com/studio/library" >
   </map>
</body>
</html>

usemap attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <title>img tag attributes</title>
</head>
<body>
   <img src="cn4.jpg" alt="Coding Ninjas Logo" height="200" width="400" style="border: 4px solid orange;" usemap="#cn_map">
   <map name="#cn_map">
    <area shape="rect" coords="67 120 118 139" href="https://www.codingninjas.com/studio/home" >
    <area shape="rect" coords="68 119 110 145" href="https://www.codingninjas.com/studio/library" >
   </map>
</body>
</html>
usemap

redirects to

usemap

Also See, Image Sampling 

Frequently Asked Questions

Why is it important to specify the alt attribute?

The alt attribute for a <img> tag is used to give the text description of that image. They are provided for systems having slow internet speed or browsers that do not support images.

How to code an image in HTML?

To code an image in HTML and make it an H3 element, use the <img> tag within the <h3> tags, like this: <h3><img src="image.jpg" alt="Description"></h3>.

How many image tags are in HTML? 

There is only one image tag in HTML, which is <img>. It is a self-closing tag used to embed images into a webpage.

What is an example of an img tag? 

An example of an <img> tag in HTML is: <img src="image.jpg" alt="Description">. This code embeds an image named "image.jpg" with the alternative text "Description".

What is data IMG in HTML? 

Data IMG in HTML refers to embedding images directly into the HTML document using Base64 encoding. It's done like this: <img src="data:image/png;base64,Base64EncodedImageData" alt="Description">.

Conclusion 

In this blog, we discussed the <img> tag in html along with its features and properties. Implementation of various HTML <img> tag is also illustrated.

If you found this blog interesting and insightful, refer to similar blogs:

You can also refer to our Guided Path to upskill yourself in domains like Data Structures and AlgorithmsCompetitive ProgrammingAptitudeand many more!

Happy Learning!

Live masterclass