Course Content
HTML Essentials
HTML Essentials
Images
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
src
: Specifies the source (URL) of the image file. This attribute is required for the<img>
tag to display the image;alt
: Provides alternative text for the image. The text specified in thealt
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;width
: Specifies the width of the image in pixels or as a percentage of the parent container;height
: Specifies the height of the image in pixels or as a percentage of the parent container;title
: Provides additional information about the image. It is often displayed as a tooltip when the user hovers over the image.
Example:
index
index
index
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
Thanks for your feedback!