HTML - <img> Tag

Quiz

The HTML <img> tag is used to embed an image into an HTML document. It is an inline and empty element, so it doesn't start on a new line and doesn't require a closing tag.

An <img> element must have two attributes: src, which fetches the image from the specified source, and alt, which provides alternative text for the image. The browser displays an HTML image from the source provides in the <img> tag instead of directly embedding the picture into the document.

Syntax

Following is the syntax of <img> tag −

<img src="..."  alt="...">

Attributes

The HTML <img> tag supports Global and Event attributes, as well as some specific attributes listed below.

Attribute	Value	Description
alt	text	Specifies alternative text.
crossorigin	anonymous use-credentials	Allows images from third-party sites with cross-origin access to be reused with canvas.
height	Pixels	Specifies the image height.
ismap	ismap	Specifies the image as a server-side image map.
loading	eager lazy	Specifies when the image should load.
longdesc	URL	Specifies the long description of the attached image.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies the referrer information.
sizes	sizes	Specify the image sizes for different devices.
src	URL	Specify the URL image to be displayed.
srcset	URL-list	Specifies a list of image files to be used in different situations.
usemap	#mapname	Defines the image as a client-side image map used along with the <map> and <area> tags.
width	pixels	Sets the width of an image in pixels or as a percentage.

Example: Inserting Image

Lets consider the following example, where we will upload an image to the HTML page using the <img> tag. This will generate an output displaying the image on the web page

<!DOCTYPE html>
<html>
<head>
   <title>HTML Tag</title>
</head>
<body>
   <img src="https://www.tutorialspoint.com/cg/images/logo.png" 
        alt="HTML Tutorial" height="150" width="390" />
</body>
</html>

Example: Aligning Image

In another scenario, we will align an image using CSS with the <img> tag. This HTML code demonstrates vertical alignment of images within text using the vertical-align CSS property.

<!DOCTYPE html>
<html>
<body>
   <h2>Image vertical-align: middle</h2>
   <p>
       Pawan Kalyan 
       <img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB3tcOH6bebY1QFANMOUDhGU0nI3fTaKqP2qEKxBxpRKKBL5Y-51iu&usqp=CAE&s" 
            width="42" height="42" style="vertical-align:middle">
       is an Indian actor, politician, filmmaker, and 
       philanthropist. He primarily works in Telugu cinema.
       He is the recipient of a Filmfare Award, a SIIMA Award,
       a CineMAA Award and a Santosham Film Award.
   </p>
   <h2>Image vertical-align: top</h2>
   <p>
       Mahendra Singh Dhoni 
       <img src=
"https://upload.wikimedia.org/wikipedia/commons/7/70/Mahendra_Singh_Dhoni_January_2016_%28cropped%29.jpg"
            width="42" height="42" style="vertical-align:top">
       is an former Indian cricketer. He was captain of 
       the Indian national team in limited-overs formats 
       from 2007 to 2017 and in Test cricket from 2008 to 2014. 
   </p>
</body>
</html>

Example: Creating a Clickable Image

The following example demonstrates placing the <img> tag inside the <a> tag, making the image a Clickable link.

<!DOCTYPE html>
<html>

<head>
    <title>Image tag</title>
</head>

<body>
    <h2>TUTORIALSPOINT</h2>
    <p>Click on the image to direct to webpage.</p> 
    <a href="https://www.tutorialspoint.com/index.htm">
        <img src="https://www.tutorialspoint.com/images/logo.png?v2" 
             height="55" width="200"> 
    </a> 
</body>

</html>

Example: Using the alt Attribute

In the following example, we will use the alt attribute and style the <img> tag using CSS.

<!DOCTYPE html>
<html>
<body>
   <div>
      <img src="https://www.tutorialspoint.com/cg/images/ogo.png"
           alt="Tutorialspoint_Logo" width="100" height="106">
   </div>
</body>
</html>

Supported Browsers

Tag
img	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page