HTML <img>
Tag
The <img>
tag in HTML is used to insert an image onto a webpage. It does not have a closing tag, as it is an empty element that only requires attributes to function. The <img>
tag is also a self-closing tag, which means it does not need a separate closing tag.
Basic Use of the <img>
Tag
To use the <img>
tag, you need to include the src
attribute, which specifies the path to the image file. Here is an example:
<img src="image.jpg" alt="Description of the image">
In this example, "image.jpg" is the file path of the image you want to display, and "Description of the image" is the text that will be displayed if the image fails to load. The alt
attribute is also important for accessibility purposes, as it provides a description of the image for users who may not be able to see it.
Main Attributes of the <img>
Tag
Below is a table that lists the main attributes of the <img>
tag and their uses:
Attribute | Description |
---|---|
src | The source URL of the image file. |
alt | Text description of the image for accessibility purposes. |
width | Specifies the width of the image in pixels. |
height | Specifies the height of the image in pixels. |
title | Tooltip text that appears when the mouse hovers over the image. |
Example of Using <img>
Tag with Additional Attributes
Here is an example of using the <img>
tag with the width
, height
, and title
attributes:
<img src="image.jpg" alt="Description of the image" width="200" height="150" title="Image Title">
In this example, the image will be displayed with a width of 200 pixels, a height of 150 pixels, and a tooltip text of "Image Title" when the mouse hovers over the image.
With this tutorial, you should now have a better understanding of how to use the <img>
tag in HTML to display images on your webpages.