Home » HTML » Image tag in HTML

Image tag in HTML

The <img> tag is the image tag in HTML. It inserts images in web pages. It is a single tag, i.e., it has no closing tag.

Images are a necessary part of writing rich content on the internet. They help in easy reading. They are the face of content on internet, especially on social media.

You can add thumbnail images for social media using meta tags, which we will discuss in meta tag tutorial. Today we will discuss about inserting images within the body of a web page.

The <img> tag has a specified syntax with different attributes to control image behaviour. Look at the syntax below:

Syntax

<img src="location of image" alt="info. about image" height="px" width="px">

Example:

<img src="images/flower.jpg" alt="Image of marigold" height="50px" width="60px">


Example of img tag Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>

Output

HTML Image Tag Example
HTML Image

The img src attribute

The src attribute in img tag specify the location of the image. You have to provide a complete path of the image to insert it into the web page.

If your image and your web page are in the same folder, then you can insert it using only its name with extension, like, src="flower.jpg".

Example of img src attribute Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>


The img alt Attribute

In "alt" attribute of <img> tag, you will give brief information about the image. The info can be about the content present in the image.

The information written in alt attribute is useful for search engines. It helps them to understand the content present in the image. So, images can rank in google image search and drive traffic.

alt attribute is also helpful for screen readers. When they encounter an image within webpage they describe the image through text written in alt attribute.

One more important feature is that if the image fails to load, then the browser displays alt text in place of it.

Example of img alt attribute Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

Output

HTML Image Alt Attribute Example HTML5 Image

Image width and height attributes

The width and height attributes controls the dimensions of image in the web page. It will not change the actual size of the image but only the displayed size.

It is advised to alter the actual image size according to website requirements. If you resize an image using width and height attributes, then it can stretch the image, which will look unpleasant.

Example of width and height attributes Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Size Attribute </title>
<body>
<img src="HTML5-Image.png" alt="HTML5 Image" width=600px height=250px>
</body>
</html>

Output

HTML Image Alt Attribute Example HTML5 Image

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<img>
Yes
Yes
Yes
Yes
Yes