HTML - <img> Tag

An image can be added to an HTML document using the <img> tag. It is an inline and empty element, thus it doesn't begin on a new line and doesn't require a closing tag. The browser inserts an HTML image from the source supplied in the <img> tag instead of directly inserting the picture into the document.

An <img> element must have two attributes: src, which displays the image source, and alt, which specifies an alternative text for the picture. The <img> tag, which is used to insert an HTML image link, should be positioned inside the <a> tag in order to make HTML images clickable.

Syntax

Following is the syntax for HTML <img> tag −

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

Specific Attributes

The HTML <img> tag also supports the following additional attributes −

S.No.	Attribute & Description
1	align (Deprectaed) Specifies the alignment for the image.
2	alt Specifies alternate text
3	border (Deprectaed) Specifies the width of the image border.
4	crossorigin It allows images from third-party sites that allow cross-origin access to be reused with canvas.
5	height Specifies the height of the image.
6	hspace (Deprectaed) Amount of white space to be inserted to the left and right of the object.
7	ismap Defines the image as a server-side image map.
8	src the url of an image
9	usemap Defines the image as a client-side image map and used alongwith <map> and <area> tags.
10	vspace (Deprectaed) Amount of white space to be inserted to the top and bottom of the object.
11	width Sets the width of an image in pixels or in %.

Example

Let’s consider the following example, where we are going to upload the image into the HTML page using the <img> tag.

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

When we execute the above code, it will generate an output consisting of the image uploaded to the webpage.

Example

Considering another scenario where we are going to align the image using CSS along with the <img> tag.

<!DOCTYPE html>
<html>
<body>
   <h2>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>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>

On running the above code, the output will pop up, consisting of the images that get aligned in the middle and top between the text displayed on the webpage.

Example

Following is an example where we are going to place the <image> tag inside the <a> tag, making the image a 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="100" width="200">
   </a>
</body>
</html>

When we execute the above code, it will generate an output consisting of the text along with an image uploaded on the webpage, where the image acts as a link.

Example

In the following example, we are going to use the alt attribute and also style the <img> tag using CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      img {
         border-radius: 20%;
         border: 5px dashed #ABEBC6;
         width: 250px;
         display: block;
         margin: 0 auto;
      }
   </style>
</head>
<body>
   <div>
      <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="logo" width="100" height="106">
   </div>
</body>
</html>

On running the above code, the output window will pop up, consisting of the image uploaded on the webpage along with dotted lines around the image displayed on the webpage.

html_tags_reference.htm