The <img> Tag

By Tony 2023.2.19

Almost every webpage has images on it. Images give users a visual understanding for a thing. This article will tell you how to put images on your webpage.

An image

This is an image tag's code:

<img src="example.png" alt="Image">
Note: <img> tag doesn't have a closing tag.

In this line of code:

  • <img> tells the browser this is an image tag.
  • "src" (source) attribite tells the browser to show image "example.png" on the screen. It can be a link of an online image or the path to an local image.
  • If the browser couldn't find the image correctly, it would show whatever is in the "alt" (alternate text) attribute on the screen.
  • Usually the image will be very big. To make it smaller, you can add "style" attribute or "width" attribute, and folow CSS syntax to style the image:
    <img src="example.png" style="width:100px;">

The list above shows 4 most important elements of an <img> tag. You can also style it, give it an id or a class, or give it a title by adding other attributes.

Back Next