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="https://media.w3wiki.net/gfg-gg-logo.svg" alt="">
    <img src="#" alt="Image not loaded">
</body>
  
</html>


Output: