<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.
<img> tag has a specified syntax with different attributes to control image behaviour. Look at the syntax below:
<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">
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,
"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.
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.