Articles → HTML → Img Tag In HTML

Img Tag In HTML

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

Syntax

<img src="" title="" />

In the preceding code

Src → specifies the image source. In the src attribute, you can specify the local path as well as URI.
Title → 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" title="Sample tooltip" />
  </body>
</html>

Try It

In the preceding code, we are specifying URI as an image source and the tooltip 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 the ‘width’ and ‘height’ attributes in the img tag.

For example

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

Try It

The 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 the 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	**