Images

Images play a crucial role in enhancing the visual appeal and conveying information on web pages. In HTML, images are inserted using the <img> tag.

Inserting Images

The <img> tag is used to insert images into an HTML document. Unlike most HTML tags, the <img> tag does not have a closing tag and is self-closing.
Example:

In the example above:

• The <img> tag is used to insert an image;
• The src attribute specifies the source (URL) of the image file;
• The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded or for accessibility purposes.

Before exploring a real-world example, let's understand the essential attributes of the img tag and how they impact its content.

Image Attributes

1. src: Specifies the source (URL) of the image file. This attribute is required for the <img> tag to display the image;
2. alt: Provides alternative text for the image. The text specified in the alt attribute is displayed if the image cannot be loaded or for accessibility purposes. It is essential for users who may be using screen readers or for situations where the image cannot be displayed;
3. width: Specifies the width of the image in pixels or as a percentage of the parent container;
4. height: Specifies the height of the image in pixels or as a percentage of the parent container;
5. title: Provides additional information about the image. It is often displayed as a tooltip when the user hovers over the image.
   Example:

In the example above:

• The <img> tag inserts an image onto a web page;
• The src attribute specifies the source URL of the image file;
• The alt attribute sets the alternative text for the image;
• The width attribute sets the image width;
• The height attribute sets the image height;
• The title attribute provides further information about the image.

Video Tutorial