Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to include an alternate text when the original element fails to display in HTML?
The alt attribute provides alternative text for images when they cannot be displayed due to loading issues, broken links, or slow connections. This attribute is essential for accessibility, helping screen readers describe images to visually impaired users, and improves SEO by providing context to search engines.
Syntax
Following is the syntax for the alt attribute −
<img src="image-path" alt="descriptive text">
The alt attribute accepts a text string that describes the image content or function. Keep the description concise but meaningful.
Basic Alt Attribute Usage
Example
Following example shows how to use the alt attribute with an image −
<!DOCTYPE html> <html> <head> <title>HTML Alt Attribute</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Image with Alt Text</h2> <p>The image below has descriptive alt text:</p> <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt="TutorialsPoint Tutorial Library homepage" width="400"> </body> </html>
When the image loads successfully, users see the image. If it fails to load, the alt text "TutorialsPoint Tutorial Library homepage" appears instead.
Alt Text When Image Fails to Load
Example
Following example demonstrates what happens when an image source is broken −
<!DOCTYPE html> <html> <head> <title>Broken Image with Alt Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Image Loading Test</h2> <p>Working image:</p> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzRjYWY1MCIvPjx0ZXh0IHg9IjUwIiB5PSI1NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0id2hpdGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiI+T0s8L3RleHQ+PC9zdmc+" alt="Green success indicator"> <p>Broken image (shows alt text):</p> <img src="broken-image-url.jpg" alt="Company logo - red and blue design"> </body> </html>
The first image displays normally, while the second shows the alt text "Company logo - red and blue design" since the image source is broken −
Working image: [Green square with "OK" text] Broken image: Company logo - red and blue design
Alt Attribute for Different Image Types
Decorative Images
For purely decorative images that don't add information, use an empty alt attribute −
<img src="decorative-border.png" alt="">
Informative Images
For images that convey information, describe the content clearly −
<img src="sales-chart.png" alt="Sales increased 25% from January to March 2024">
Functional Images
For images that serve as buttons or links, describe the action −
<img src="search-icon.png" alt="Search" onclick="performSearch()">
Example − Multiple Alt Text Usage
<!DOCTYPE html>
<html>
<head>
<title>Different Alt Text Examples</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Photo Gallery</h2>
<h3>Informative Image:</h3>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzMzNzNkYyIvPjx0ZXh0IHg9IjEwMCIgeT0iNTUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IndoaXRlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiPkNoYXJ0PC90ZXh0Pjwvc3ZnPg==" alt="Monthly revenue chart showing 15% growth">
<h3>Decorative Image:</h3>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA1MCA1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyNSIgY3k9IjI1IiByPSIyMCIgZmlsbD0iI2ZmZDA0MyIvPjwvc3ZnPg==" alt=""> Decorative border element
<h3>Functional Image:</h3>
<a href="#contact">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHJ4PSI1IiBmaWxsPSIjMjhhNzQ1Ii8+PHRleHQgeD0iMjAiIHk9IjI1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJ3aGl0ZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIj7ihpM8L3RleHQ+PC9zdmc+" alt="Go to contact page">
</a>
</body>
</html>
Each image type uses alt text appropriately: informative images describe content, decorative images have empty alt text, and functional images describe the action.
Alt Text Best Practices
Following are the key best practices for writing effective alt text −
Keep it concise − Aim for 125 characters or less, as screen readers may cut off longer descriptions.
Be specific − Instead of "dog", use "golden retriever playing fetch in park".
Describe function, not appearance − For buttons, describe what happens when clicked.
Avoid redundancy − Don't repeat information already in surrounding text.
Context matters − The same image may need different alt text in different contexts.
Alt Attribute for Accessibility
Example − Screen Reader Friendly
Following example shows how to write alt text that works well with screen readers −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accessible Images</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<article>
<h2>Weather Report</h2>
<p>Today's weather conditions:</p>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iI2ZmYzEwNyIvPjx0ZXh0IHg9IjUwIiB5PSI1NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzMzMyIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0Ij7inIU8L3RleHQ+PC9zdmc+" alt="Sunny weather, 72 degrees Fahrenheit">
<p>Navigation:</p>
<a href="/forecast">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWdvbiBwb2ludHM9IjE1LDUgMjUsMjUgNSwyNSIgZmlsbD0iIzMzNzNkYyIvPj 
216 Views
