Horje
What is the purpose of the alt attribute in the <img> Tag ?

The “alt” attribute in the <img> Tag is important for making websites more accessible. It stands for “alternative text” and is used to describe what an image is about. If the image can’t load, this text shows up instead. It’s also helpful for people who use screen readers because they can hear this description, making the web more inclusive for those with visual impairments.

Purpose of alt Attribute

Accessibility Boost:

  • The alt attribute enhances web accessibility.
  • It makes sure that people with visual impairments can also comprehend the images.

Image Loading Fallback:

  • If an image doesn’t load, the alt text is displayed as a backup.
  • Users still get an idea of the image content.

Screen Reader Assistance:

  • Screen readers, used by people with visual disabilities, rely on alt text.
  • It provides a spoken description of the image.

Syntax

<img src="image.jpg" alt="Description of the image">

Example:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image alt attribute</title>
    <style>
        img {
            margin: 10px;
        }
    </style>
</head>
  
<body>
    <img src="#" alt="Image not loaded">
</body>
  
</html>

Output:

Screenshot-2024-02-01-125903




Reffered: https://www.geeksforgeeks.org


HTML

Related
HTML Examples | Most Frequent Used HTML Questions HTML Examples | Most Frequent Used HTML Questions
What is the importance of the &lt;details&gt; and &lt;summary&gt; Elements? What is the importance of the &lt;details&gt; and &lt;summary&gt; Elements?
How to include JavaScript File in HTML5 ? How to include JavaScript File in HTML5 ?
HTML Table Headers HTML Table Headers
HTML Table Styling HTML Table Styling

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
14