Do you think IIT Guwahati certified course can help you in your career?
Introduction
The alt attribute in HTML is used to provide alternative text for images on a web page. This text appears if the image fails to load or if a user is using a screen reader to access the content. The alt attribute ensures that web content is accessible to visually impaired users and improves the overall user experience. It is an essential practice in modern web development to make websites more inclusive and SEO-friendly.
In this article, we will cover the syntax, supported tags, attribute values, examples, and browser compatibility of the alt attribute in a clear and simple way.
Definition and Usage
The alt attribute, short for "alternative text," is an HTML attribute used with the `<img>` tag. Its primary purpose is to provide a text description of an image. This text is displayed when the image fails to load due to a slow connection, a broken link, or if the user has disabled images in their browser. More importantly, it is read aloud by screen readers, making the content accessible to visually impaired users.
Let’s take a look at a basic example of how the alt attribute is used:
<img src="cat.jpg" alt="A brown cat sitting on a windowsill">
In this example, if the image `cat.jpg` doesn’t load, the text "A brown cat sitting on a windowsill" will appear in its place. This ensures that users still understand what the image was supposed to represent.
Syntax
The alt attribute is added within an <img> tag in HTML to specify alternative text for an image. Here is the basic syntax:
<img src="image_url" alt="description of the image">
Explanation:
src: Specifies the URL or path to the image.
alt: Provides alternative text for the image, which is used if the image cannot be displayed or accessed.
Example:
<img src="sunset.jpg" alt="A beautiful sunset over the mountains">
Supported Tags
The alt attribute is primarily supported by the following tag:
<img>
The alt attribute is used within the <img> tag to improve accessibility and usability.
Example:
<img src="dog.jpg" alt="A cute puppy playing with a ball">
Attribute Values
The alt attribute accepts text as its value. Here are a few key points to remember:
Descriptive Text: The value should be a short and clear description of the image content. Example:
<img src="nature.jpg" alt="A green forest with a river flowing through it">
Empty String: An empty string (alt="") is used for decorative images that do not add meaningful content. Example:
<img src="decorative-pattern.jpg" alt="">
No Special Characters: Avoid using special characters like <, > or HTML tags within the alt attribute.
Example
Below is a complete HTML example demonstrating the usage of the alt attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Attribute Example</title>
</head>
<body>
<h1>Using the Alt Attribute in HTML</h1>
<p>Below is an example of an image with an `alt` attribute:</p>
<img src="mountains.jpg" alt="Snow-capped mountains during sunrise">
<p>If the image does not load, the text "Snow-capped mountains during sunrise" will be displayed.</p>
</body>
</html>
Output:
If the image loads, you will see the image of the snow-capped mountains.
If the image fails to load, the text "Snow-capped mountains during sunrise" will appear in its place.
Why is the alt attribute important?
1. Accessibility: Screen readers rely on the alt text to describe images to visually impaired users. Without it, they miss out on important information.
2. SEO Benefits: Search engines use alt text to understand the content of images, which can improve your website’s ranking in search results.
3. Fallback for Broken Images: If an image fails to load, the alt text ensures that users still get the context.
How to write good alt text
Be descriptive but concise. For example, instead of writing "cat," write "a brown cat sitting on a windowsill."
Avoid using phrases like "image of" or "picture of" because screen readers already announce it as an image.
For decorative images that don’t add meaning, use an empty alt attribute (`alt=""`).
Let’s take an another example:
<img src="logo.png" alt="Company XYZ logo">
In this case, the alt text "Company XYZ logo" clearly describes the image.
Applies To
The alt attribute is specifically used with the `<img>` tag in HTML. However, its importance extends beyond just images. It is also relevant in other contexts where visual elements need to be described for accessibility or fallback purposes. Let’s break this down:
1. Images (`<img>` tag)
The most common use of the alt attribute is with the `<img>` tag. It is mandatory for accessibility & SEO purposes. Here’s an example:
<img src="sunset.jpg" alt="A vibrant sunset over the ocean with waves crashing on the shore">
In this example, the alt text describes the image in detail, ensuring that even if the image doesn’t load, the user understands what it represents.
2. Input Elements (`<input>` tag with type="image")
The alt attribute can also be used with `<input>` elements of type `image`. These are used to create image-based submit buttons. For example:
In this example, the alt text for each `<area>` tag describes the region it represents, ensuring accessibility.
4. Decorative Images
For images that are purely decorative & don’t add any meaningful content, you can use an empty alt attribute (`alt=""`). This tells screen readers to skip the image. For example:
<img src="decorative-line.png" alt="">
This ensures that screen readers don’t announce unnecessary information, improving the user experience.
Supported Browsers
The alt attribute is supported by all major web browsers. Here’s a list of commonly used browsers that support it:
Google Chrome
Mozilla Firefox
Microsoft Edge
Apple Safari
Opera
Mobile Browsers: Android WebView, Chrome for Android, Safari on iOS
Browser Compatibility Example
You can check the behavior of the alt attribute by intentionally providing an incorrect image path:
<img src="nonexistent.jpg" alt="Image not found">
This will display the text "Image not found" if the image cannot be loaded in any browser.
Frequently Asked Questions
What is the purpose of the alt attribute in HTML?
The alt attribute provides alternative text for images, ensuring better accessibility for visually impaired users and displaying text if an image fails to load.
Can I use the alt attribute with other HTML tags?
No, the alt attribute is specifically designed to be used with the <img> tag.
What happens if the alt attribute is not specified?
If the alt attribute is not provided, screen readers may skip the image, and users won’t know what the image represents if it fails to load.
Conclusion
The alt attribute is a simple yet powerful feature in HTML that enhances the accessibility and usability of websites. By providing meaningful alternative text, you ensure that your content is accessible to all users, including those who rely on assistive technologies.
519+ registered 
