The Best Guide To HTML Image Tag

What is HTML <img> tag?

An HTML image (<img>) tag is used to embed an image on the web page.

The <img> tag has two required attributes:

• src - This specifies the path of the image.
• alt - This is an alternate text that will be displayed in the image's place if the image cannot be displayed for any reason. 

How to Insert an Image?

There are two different ways you can add images to your web page:

• From your local drive
• By copying the image URL

1. From Your Local Drive

To add images from your local drive, you need to save the image in the same folder where your HTML file is located.

Next, add the image by typing the image file name with proper image format.

This will produce the following result:

Note: Remember that the image name is always case sensitive. Be sure to specify the correct image file name in the src attribute.

You can use JPEG, PNG, and GIF formats, depending on your requirements.

2. By Copying the Image URL

You can also add the image by copying the URL of that image.

This will produce the following result:

This image was taken from asianetnews.com.

Image Tag Attributes

The HTML image tag supports the following attributes:

Set Image Alignment

Using the align attribute will set the alignment of the image. By default, the image is aligned to the left side of the web page.

This will produce the following result:

Set Image Width and Height

You can specify the width and height of the image according to your requirements using the width and height attributes.

This will produce the following result:

Add a Hyperlink to an Image

You can also link an image to another web page. To do this, use the <img> tag inside an <a> tag.

This will produce the following result:

When you click on the image, you will be directed to the Simplilearn website.

Learn top skills demanded in the industry, including Angular, Spring Boot, Hibernate, Servlets, and JSPs, and SOA to build highly web scalable apps with the Full Stack Java Developer Masters Program

Set Image Border

You have the option to add a border around an image. To do this, use the border attribute and specify the border thickness in terms of the pixel.

This will produce the following result:

Get Ahead of the Curve and Master HTML Today

This article on HTML image tags covered the different ways in which you can add images to a web page. We discussed several attributes of the image tag and how we can use it to create an interactive web page. To learn more about web development in its entirely, a certification is highly recommended, which can also help jumpstart your career. Simplilearn’s Full Stack Java Developer course helps students master web development and various developer technologies. Students also receive hands-on practice, and enrollment includes the opportunity to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

If you’re an aspiring web and mobile developer, HTML training will broaden your skills and career horizons. Do you have any questions for us? Please leave them in the comments section, and we'll have our experts answer them for you.