'Coding has over 700 languages', '67% of programming jobs aren’t in the technology industry', 'Coding is behind almost everything that is powered by electricity'
Last Updated: Dec 31, 2023
Easy

HTML <img> Tag

Author Komal
1 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 <img> Tags

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.

Various <img> Attributes in HTML

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

Attribute NameDescriptionSyntax
srcThe 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">
altThe 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">
heightThe 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">
widthThe 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">
styleThe 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;">
ismapismap 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>

usemapAfter 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>

elementtimingThis 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" />

Implementing Various Attributes in HTML

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

src

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

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

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 

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

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

<!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

<!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

What do you mean by an empty tag?

An empty tag is a tag that doesn’t require a closing tag. The <br> tag, <img> tag, etc., are examples of empty tags. 

What is a block element in HTML? Give an example.

A block element in HTML blocks the other elements by taking 100% width of its parent container. They start from the new line and occupy full width. For example, <div>, <p>, etc.

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.

Can we hyperlink an image?

We can hyperlink an image by wrapping it in <a> tag. The image redirects to the specified link whenever clicked.

How does style attribute contribute to an img tag?

Style attribute helps in adding CSS to our image. The use of the style attribute makes the image look more appealing and attractive.

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:

Refer to the Basics of C++ with Data StructureDBMS, and Operating System by Coding Ninjas, and keep practicing on our platform Coding Ninjas Studio. You can check out the mock test series on code studio.

You can also refer to our Guided Path on Coding Ninjas Studio to upskill yourself in domains like Data Structures and AlgorithmsCompetitive ProgrammingAptitudeand many more! Refer to the interview bundle if you want to prepare for placement interviews. Check out interview experiences to understand various companies' interview questions.

Give your career an edge over others by considering our premium courses!

Happy Learning!

Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass