Articles → HTML → img tag in HTML

img tag in HTML

Img tag is for displaying an image in the web page.

Syntax

<img src="" alt="" />

In the preceding code

1. Src – specifies the image source. In the src attribute, you can specify the local path as well as URI.

2. Alt – Tooltip of the image

Sample

<html>
  <head>
    <title>Image Demo</title>
  </head>
  <body>
    <img
      src="http://www.gyansangrah.com/ArticleImages/anchor_tag_html_one.jpg"
      alt="Sample tooltip"
    />
  </body>
</html>

In the preceding code, we are specifying URI as an image source and the tool tip as well. Once you see the webpage on the browser, you see the following output

Picture showing the output of img tag in HTML with tooltip

Click to Enlarge

If you specify the path that does not exist, then you see the following output

Picture showing the tooltip text shown when image path does not exists

Click to Enlarge

Setting up the width and height of the image

You can set the width and height of the image by using ‘width’ and ‘height’ attribute in img tag.

For example

<html>
  <head>
    <title>Image Demo</title>
  </head>
  <body>
    <img
      src="http://www.gyansangrah.com/ArticleImages/anchor_tag_html_one.jpg"
      alt="Sample tooltip"
      width="200"
      height="200"
    />
  </body>
</html>

Image size is in pixels

Output

Picture showing setting the width and height of the image in HTML

Click to Enlarge

As we have decreased the length and width of the image with respect to the original size, that is why image is looking distorted.

Browser support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Saturday, January 2, 2016

Updated On -	Monday, June 5, 2017

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250