The Best Guide To HTML Image Tag

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.

In this article, we will discuss:

  • What is HTML <img> tag?
  • How to insert an image
    • From your local drive
    • By copying the image URL
  • Image tag attributes
  • Setting image alignment
  • Adding a hyperlink to an image
  • Setting an image border

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

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.

adding-html-images

This will produce the following result:

output-adding-html-images

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.

image-url-html-image

This will produce the following result:

output-image-url

This image was taken from asianetnews.com.

Image Tag Attributes

The HTML image tag supports the following attributes:

Attributes

Values

Description

src

URL

Specifies the path to the image

width

pixels

Specifies the width of an image

height

pixels

Specifies the height of an image

align

“Left”, “Right”

Specifies the image align side

border

size

Specifies the image border size

alt

text

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.

align-html-image

This will produce the following result:

output-align

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.

height-and-widht-html-inputs

This will produce the following result:

output-height

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.

hyperlink-html-image

This will produce the following result:

output-hyperlink

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.

border-html-image

This will produce the following result:

output-border.

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.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.