HTML is ubiquitous on the internet—used to create web pages and web applications all over the globe. Part of its power comes through the help of different HTML tags; available in the language. In this article, we will discuss the HTML image tag, which is used to insert an image into a web page and improve its appearance.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

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

Image Tag Attributes

The HTML image tag supports the following attributes:






Specifies the path to the image



Specifies the width of an image



Specifies the height of an image


“Left”, “Right”

Specifies the image align side



Specifies the image border size



Specifies an alternate text for an image

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:


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.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 17 Jun, 2024

6 Months$ 8,000
Automation Test Engineer

Cohort Starts: 29 May, 2024

11 Months$ 1,499
Full Stack Java Developer

Cohort Starts: 4 Jun, 2024

6 Months$ 1,449
Full Stack Developer - MERN Stack

Cohort Starts: 18 Jun, 2024

6 Months$ 1,449