HTML Images: An Introduction to the Image Tag

The <img> tag in HTML is used to embed images in a web page. The <img> tag has several attributes that can be used to specify the source of the image, its dimensions, and other properties.

The most important attribute of the <img> tag is the "src" attribute, which stands for "source" and is used to specify the URL of the image file. For example:

<img src="images/flower.jpg">

This will display the image file on the web page.

Another important attribute of the <img> tag is the "alt" attribute, which is used to provide alternative text for the image in case the image cannot be displayed. The alternative text is important for accessibility and SEO. For example:

<img src="images/flower.jpg" alt="Flower">

This will display the image file and provide the alternative text "Flower" in case the image cannot be displayed.

The title attribute in the HTML <img> tag is used to provide additional information about the image. This information is displayed as a tooltip when the mouse pointer hovers over the image.

The title attribute is optional, but it's a good practice to include it as it provides a more accessible experience for users who are unable to see the image, such as those using screen readers. The text in the title attribute should provide a brief description of the image.For example

<img src="images/flower.jpg" alt="Flower" title="Sunshine red Reflection Flower">

Other attributes of the <img> tag include "width" and "height" which are used to specify the dimensions of the image, "border" which is used to specify a border around the image, and "class" and "id" which are used to specify a CSS class or ID for the image.

<img src="images/flower.jpg" alt="Flower" height="250px" width="400px" border="1" class="imgs" id="">

This will display the image file with width of 400px and height of 250px, with a border of 1 pixel and class of "sunset-img" which can be used to apply a CSS style to it.

It's also worth noting that the <img> tag is an empty tag, which means it doesn't have a closing tag.

Here is the simple example program for printing the image tag

Source Code

<html>
  <head>
    <title>Image Tag</title>
  </head>
  <body>
    <h1>Image Tag</h1>
    <img src="flower.jpg" alt="Flower" height="250px" width="400px"> <!--image placed in the same folder--->
    <img src="images/flower.jpg" alt="Flower" height="250px" width="400px"> <!--image placed inside an images folder--->
    <img src="../images/flower.jpg" alt="Flower" height="250px" width="400px"> <!--image placed in the outside of the html file --->
  </body>
</html>

To download raw file Click Here

This is an HTML code that displays an image. The code uses the <img> tag to embed an image in the web page. The "src" attribute is used to specify the URL of the image file.

The "alt" attribute is used to provide a text description of the image, which is displayed if the image can't be loaded. The "height" and "width" attributes are used to specify the size of the image in pixels. In this case the image is set to 250 pixels in height and 400 pixels in width.

The first image is placed in the same folder as the HTML file and is referred to as flower.jpg.
The second image is placed inside an images folder and is referred to as images/flower.jpg.
The third image is placed in a folder that is outside the folder of the HTML file and is referred to as ../images/flower.jpg where .. refers to the parent directory.

HTML Images: An Introduction to the Image Tag

Source Code

HTML Tutorial