How to insert images in HTML? What are the attributes used for ‘img’ tag?

In this chapter, we’ll discuss how to add images to an HTML webpage. And what are the attributes used for the <img> tag? First of all, images are very important in a webpage. As said one image is better than one thousand words. So, we can use images to make our website look much better and more beautiful.

So Let’s Start:

The ‘img’ Tag:

We use ‘img’ tag with the ‘src’ attribute to add images in our webpage. The src attribute specifies the location of the external resource. The <img> tag has no closing tag.


<img src="imagename with extension">

The ‘src’ Attribute:

We use ‘src’ attribute and then give it a value, the location and name of the image where our image is saved and with what name. And also what is the file extension like .jpg, .png etc. The .jpg and .png are the most common and most popular image extension.

You can check the extension of the image by right click on the image. And then at the bottom go to the properties. And then in details section.

The ‘alt’ Attribute inside ‘img’ tag:

This attribute provides the alternative text about the image so that if the image does not display then the text will be display. The alt attribute is very essential for SEO because it is very helpful for blind persons. The screen readers read the alt text of the image for blind persons. So, every person looks and hear about what the image is about.

Width and Height attributes to set Image Size:

We use the width attribute to define the width of the image in pixels and also height attribute for the height of the image. Specifying the width and height of the image is very important. When we set the width and height of the image are reserved. Then, the space required for the image is reserved when the page loads.

Let’s see the video about how to add images in the website using HTML:

If images are in other folders:

If the image is located in the other folders then we will use the name of the folder then forward slash and then image name and extension like below:

<img src="imagesfoldername/imagename.jpg">

Image as a hyperlink:

This is the best way to make your website look great. When a user clicks on the image it will go to another page. If you want to use an image as a hyperlink then see the video below:

You can also apply some CSS to make images more elegant and user interactive.

If you don’t know what are HTML hyperlinks then click to see

What are HTML Links? How to add Links in HTML?.

So, we have learned about how to add images in HTML. Images are very crucial. We use images everywhere on our websites. So, without images a website is incomplete. Images make our website beautiful. So, keep practising and take care of yourself. Meet in our next tutorial.

If you have any question about this topic then feel free to ask in the comment section below.