The result of the above example code is that the image file grass.jpg
will be displayed on the web page with the alternative text "A beautiful grass" if the image cannot be loaded.
Explanation
Images can enhance the visual appeal of a web page, and the <img>
tag is the primary method for incorporating images into a webpage. The <img>
tag has two required attributes: src
and alt
. The src
attribute specifies the URL of the image file to be displayed, and the alt
attribute specifies alternative text that should be displayed if the image cannot be loaded or if the user has disabled image display in their browser. The alternative text is also helpful for accessibility purposes to ensure that users with visual impairments can understand the content of the webpage.
Use
The <img>
tag is used to insert images into a web page. Images can serve a variety of purposes on a webpage, including:
- Enhancing the visual appeal of the page
- Illustrating the content on the page
- Providing visual cues to direct users to important information
- Breaking up long blocks of text
Important Points
- The
src
attribute in the <img>
tag is a mandatory attribute.
- The
alt
attribute in the <img>
tag is also mandatory and should be used to provide alternative text in case the image is not displayed.
- The
width
and height
attributes can be used to specify the dimensions of the image in pixels.
- The
title
attribute can be used to provide additional information about the image when the user hovers over it.
Summary
- The
<img>
tag is used to embed images into a web page.
- The
src
attribute specifies the URL of the image file to be displayed, and the alt
attribute specifies alternative text that should be displayed if the image cannot be loaded.
- Images can provide visual appeal and help illustrate the content on a web page.