The HTML alt attribute provides alternative text for an image, describing its content when the image cannot be displayed or for accessibility purposes.
- Used within the <img> tag to define image description.
- Displays text if the image fails to load.
- Helps screen readers explain images to visually impaired users.
- Improves SEO by providing meaningful image descriptions.
Syntax:
<img src="image_url" alt="description"><html>
<body>
<h1>GeeksforGeeks Logo</h1>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
alt="GeeksforGeeks Logo">
</body>
</html>
The alt attribute in the <img> tag provides descriptive text ("GeeksforGeeks Logo") that displays if the image fails to load, enhancing accessibility.
Supported tags
- <area>: The alt attribute provides alternative text for clickable areas in an image map.
- <img>: The alt attribute provides alternative text for images (main and most important use).
- <input type="image">: The input element uses the alt attribute to provide alternative text for the image button when it cannot be displayed.
Attribute Values
- text: Specifies alternative text shown when the image cannot be displayed or for accessibility tools.
Example of HTML alt attribute
Here are some examples of HTML alt attribute:
1. Image Input with alt Attribute
<html>
<body>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<input type="image" src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" alt="Submit"
width="48" height="48">
</form>
</body>
</html>
- The <input type="image"> element creates a submit button with an image.
- The alt attribute provides alternative text ("Submit") for the image button, ensuring functionality and accessibility if the image fails to load.
2. Image Map with alt Attributes
<html>
<body>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
alt="Geometric Shapes"
width="300" height="119" usemap="#shapemap">
<map name="shapemap">
<area shape="poly" coords="59,31,28,83,91,83" href="#triangle" alt="Triangle">
<area shape="circle" coords="155,56,26" href="#circle" alt="Circle">
<area shape="rect" coords="224,30,276,82" href="#square" alt="Square">
</map>
</body>
</html>
- The <img> tag displays an image of geometric shapes and uses the usemap attribute to define an image map.
- Each <area> tag within the <map> element defines a clickable region with a corresponding alt attribute, providing descriptive text for each shape.
Best Practices for HTML alt Attribute
- Be Descriptive and Concise: Provide clear, brief descriptions that convey the image's content or function, aiding users and search engines in understanding its relevance.
- Avoid Redundancy: Refrain from using phrases like "image of" or "picture of," as screen readers already announce the presence of an image.
- Use Empty alt for Decorative Images: For images that don't convey meaningful information, set alt="" to allow screen readers to skip them, enhancing accessibility.