Skip to main content

HTML Images | Introduction to Displaying Images in HTML

Images are a great way to add visual appeal to your web pages. You can use images to illustrate concepts, add visual interest to your content, and provide additional information to your users.

In this tutorial, you will learn how to add images to your web pages using HTML.

The <img> Tag​

To add an image to your web page, you use the <img> tag. The <img> tag is an empty tag, which means that it does not have a closing tag. and use the src attribute to specify the URL of the image file that you want to display on the page.

As an example:

Editor

Loading...

In this example:

  • The src attribute specifies the source file of the image, which is URL in this case.
  • The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded or if the user is using a screen reader.

Width & Height​

You can also include additional attributes in the <img> tag to customize the image display, such as the width and height attributes to set the dimensions of the image.

As an example:

Editor

Loading...

In this example:

  • The width attribute is set to 400 pixels and the height attribute is set to 300 pixels.

Styling in Images​

You can use the style attribute to add CSS styling to an <img> tag to customize its appearance.

As an example:

Editor

Loading...

In this example:

  • The style attribute is used to add a border and padding to the image.
  • The border property adds a 1-pixel solid black border around the image, while the padding property adds 10 pixels of padding inside the border.

You can also use the style attribute to set the dimensions of the image by using the width and height properties.

As an example:

<img src="image.jpg" alt="Example" style="width: 400px; height: 300px;" />

In this example:

  • The style attribute is used to set the width of the image to 400 pixels and the height to 300 pixels.

Images in Local Folder​

To include an image in your HTML file that is saved in a local folder on your computer, you can use a relative file path in the src attribute of the <img> tag.

As an example:

<img src="images/example.jpg" alt="Example Image" />

In this example:,

  • The image file "example.jpg" is saved in a folder named "images" that is located in the same directory as the HTML file.
  • The src attribute specifies the relative file path to the image file.
tip

Make sure that the file path and file name in the src attribute are correct and match the name and location of the image file on your computer. If the image file is located in a different folder than the HTML file, you will need to adjust the relative file path accordingly.