In HTML, the "alt" attribute serves the purpose of providing alternative text for an image in cases where the image cannot be displayed. This text serves various purposes, primarily conveying the content and function of the image to users who may not be able to view it. For example, screen readers rely on alt text to describe images to users with visual impairments.
Example:
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "A tranquil ocean side with palm trees and clear blue water">
Alt tag with other tags
The "alt" attribute is basically connected with the " img " (image) tag in HTML. Its motivation is to give alternative text to an image, particularly for situations where the image can't be shown or for clients who depend on assistive advances like screen readers. In any case, there are a couple of other HTML tags where the "alt" attribute can likewise be utilized:
- Input tag
- Area tag
- Object tag
- Applet tag
1. Input tag
While utilizing an "input" tag with the "image" type (an image-based submit button), the "alt" attribute can be applied to give alternative text.
Code:
<input type = "image" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = " Submit the Form">
2. Area tag
The "area" element collaborates with the "map" element to define interactive regions within an image map. An alternative text can be provided to these interactive areas using the "alt" attribute.
Code:
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "Clickable world map" usemap = "#worldmap">
<map name = "world's map">
<area shape = "rect" cords = "34,44,270,350" alt = " Los Angeles ">
<!-Any other areas and alt text can be defined here -->
</map>
3. Object tag
The "object" element is used to embed external objects like multimedia elements or other HTML documents. It is accompanied by the "alt" attribute, which offers substitute text for the embedded content.
Code:
<object data = "example.swf" type = "application/x-shockwave-flash" width = "300" height = "200">
<param name = "movie" value = "example.swf">
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = "Fallback Image">
</object>
4. Applet tag
While the "applet" tag is not as frequently used in modern web development, the "alt" attribute can also serve to provide alternative text for Java applets.
Code:
<applet code = "Example.class" width = "300" height = "200" alt = "Java applet">
Your browser may not support Java applets.
</applet>
Alt tag Example:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Image Map Example </title>
</head>
<body>
<h1> Clickable Image Map Example </h1>
<img src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt = " Clickable image map " usemap = " #imagemap " style = "width: 600px; height: auto; ">
<map name = "imagemap">
<!-- Region 1 -->
<area shape = "rect" cords = "50,50,250,200" alt = " Clickable Area 1 ">
<!-- Region 2 -->
<area shape = "circle" cords = "400,150,50" alt = " Clickable Area 2 ">
<!-- Region 3 -->
<area shape = "poly" cords = "300,250,450,350,200,350" alt = " Clickable Area 3 ">
</map>
</body>
</html>
Output:
Enhanced Image Search functionality was further improved.
Alt attributes play a crucial role in assisting search engines to index and categorize images accurately. By providing descriptive alt text, you increase the likelihood of your images appearing in significant search results when users conduct image searches. This contributes to enhancing the visibility and relevance of your images on search engine platforms.
Integrating keywords in alternative text can enhance the relevance of your content for search engines. However, it is crucial to strike a balance and steer clear of overloading with keywords, since search engines prioritize meaningful and organic content.
- Enhanced Relevance of Web Pages
Descriptive tags for images contribute significantly to the overall relevance of a webpage. Search engines take into account the information conveyed through images when assessing a page's relevance to a particular topic. Therefore, including descriptive alt text for images can enhance the overall search engine optimization (SEO) of your page.
Conclusion
Implementing descriptive alternative text in the HTML code of your web pages is a key technique that enhances the accessibility and search engine optimization of your site. By catering to the needs of users with visual impairments and optimizing for search engines, you establish a more inclusive and visible online footprint.