HTML Alt Tag

The "alt" attribute is utilized in HTML to give alternative text to an image when it can't be shown. This text fills different needs, with its essential capability being to pass the content and capability of the image on to clients who will most likely be unable to see it. Screen readers, for instance, depend on alt text to portray images to clients with visual debilitations.

Example:

<img src = "example_image.jpg" 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:

2. Area tag

The "area" tag is used in conjunction with the "map" tag to characterize interactive locales inside an image map. The "alt" attribute can be applied to give alternative text to these interactive areas.

Code:

<img src = "world_map.png" 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" tag inserts outside objects, such as mixed media components or other HTML records. The "alt" attribute provides alternative text to the installed content.

Code:

<object data = "example.swf" type = "application/x-shockwave-flash" width = "300" height = "200">
  <param name = "movie" value = "example.swf">
  <img src = "fallback-image.png" alt = "Fallback Image">
</object>

4. Applet tag

Although the "applet" tag is less commonly utilized in current web advancement, the "alt" attribute can likewise be used to give alternative text to 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:

Code

<!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 = " worldmap.jpg " 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:

SEO Advantages

1. Further developed Image Search

Alt tags help search engines record and order images precisely. When clients perform image searches, having clear alt text improves the probability of your images showing up in important search results.

2. Improved Keyword Importance

Keyword utilization in alt text can improve the importance of your content to search engines. Even so, it's vital to find some harmony and avoid keyword stuffing, as search engines focus on significant and inherent content.

3. Expanded Web Page Relevance

Alt tags add to the general pertinence of a web page. Search engines consider the content of images while deciding the pertinence of a page to a specific subject. Counting graphic alt text can, in this manner, support your page's by and large SEO.

Conclusion

Smart alt text in your HTML documents is a central practice that improves the openness and SEO of your website. By considering the requirements of clients with visual hindrances and upgrading search engines, you create a more comprehensive and discoverable web-based presence.

Next TopicHow to Link External CSS to HTML

← prev next →