PUBLISHED ON: JULY 17, 2021
How to specify alternate text for the image using HTML?
The images are almost used everywhere on websites. But sometimes the image doesn't appear on the webpage or may take a long time to load the page. If the image does not load then we can show an alternate text to the reader. It can be resolved using alternative text to the image in HTML.
Alternative text
The alt attribute is used within <img> to add some alternative text which can be shown when the images do not loads. The alt attribute should contain some textual text. There are many reasons to add alternative text to the image.
- When there is any mistake in the address of the image like a misspelling of the image name, the wrong directory selected or the wrong format used, then the alternative text is displayed on the place of the image.
- The alt text is useful to describe the images.
- The alt text can be useful to search engines to match queries with the alt text.
Example: Adding alt text to the webpage
Here, we have misspelled the image name to show you how the alt text replaces the image in the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2>Image in HTML </h2>
<img src="Pic11.png" alt="picture name">
</body>
</html>
Output
Here is the output of the above program.
Example: Adding a description of the image in the alt
We can also add a long paragraph to the alt attribute to describe the image. Here is an example to illustrate this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2>Image in HTML </h2>
<img src="Pic11.png" alt="We can add long text to describe the image to the alt attribute within image element.">
</body>
</html>
Output
Here is the output of the above example.
Conclusion
So we learned to add the alternative text in the HTML. The alternative text can also be skipped in some situations. But overall the alt text provides meaning to the image and you should always do this while adding images to your web pages.
