HTML alt Attribute

HTML alt Attribute

The HTML alt attribute provides alternative text for images and other image-based content. It helps describe the purpose or meaning of visual content when the image cannot be seen or displayed and is an important part of creating accessible web pages.

Syntax

The alt attribute is placed in the opening tag of an element that supports alternative text. Its value contains text that serves as an appropriate replacement for the image or image-based control.

<img src="image.jpg" alt="Alternative text">

For example:

<img src="white-peacock.jpg" alt="White peacock displaying its tail feathers">

Attribute Value

The appropriate value depends on the purpose and context of the image. Alternative text should communicate the information or function that the image contributes to the page.

Elements That Use the alt Attribute

The alt attribute is currently used with the <img>, <area>, and <input> elements. On <input>, it applies to image submit buttons created with type="image".

Using the alt Attribute

For an informative image, the alt value should communicate the important information conveyed by the image.

<img src="white-peacock.jpg" alt="White peacock displaying its tail feathers">

Alternative text is useful when an image cannot be displayed and can also be presented by assistive technologies such as screen readers. The goal is to provide an appropriate text replacement rather than simply repeat the image's filename or describe every visual detail.

Decorative Images

An image that is purely decorative and does not add meaningful information should normally use an empty alt value.

<img src="divider-line.png" alt="">

The empty value tells assistive technologies that the image does not need a text alternative. This is different from simply forgetting to include the alt attribute.

alt with the <area> Element

When an <area> element creates a hyperlink in an image map, its alt attribute provides text describing the purpose of that link.

<map name="tutorial-map">
  <area shape="rect" coords="0,0,200,250"
        href="/index-html.html" alt="HTML Tutorials">
  <area shape="rect" coords="200,0,400,250"
        href="/index-css.html" alt="CSS Tutorials">
</map>

For a linked <area>, the alternative text should identify the choice or destination represented by that region of the image map.

alt with Image Submit Buttons

The alt attribute is also used with <input type="image">. In this case, it provides a textual label for the image button when the image cannot be used.

<input type="image" src="submit.png" alt="Submit">

For an image submit button, the alt attribute must contain a meaningful, non-empty label that describes the button's function.

Writing Useful Alternative Text

Good alternative text depends on the image's purpose and context. Describe the information or function the user needs rather than trying to list every visible detail.

<!-- Informative image -->
<img src="white-peacock.jpg" alt="White peacock displaying its tail feathers">

<!-- Decorative image -->
<img src="divider-line.png" alt="">

A useful test is to imagine replacing the image with its alternative text. The surrounding content should still communicate the essential meaning of the page.

Common Mistakes

Do not use an image filename as alternative text unless the filename itself genuinely communicates the image's purpose.

<!-- Poor -->
<img src="tiger-cub.jpg" alt="tiger-cub.jpg">

<!-- Better -->
<img src="tiger-cub.jpg" alt="White tiger cub lying on its back">

Do not add unnecessary phrases such as "image of" when the alternative text can describe the meaningful content directly.

Do not omit the alt attribute merely because an image is decorative. For a purely decorative <img>, use alt="" so the image can be ignored by assistive technology.

Do not use an empty alt value for an image submit button. An <input type="image"> requires a non-empty label describing the button's function.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The alt attribute is widely supported on the elements where it applies. Its requirements and purpose vary by element, particularly for images, image-map areas, and image submit buttons.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the alt Attribute

The example uses the alt attribute with an image. Edit the alternative text to practice writing a concise text replacement that communicates the purpose of the image.

Summary

The HTML alt attribute provides alternative text for images, linked areas in image maps, and image submit buttons. For informative images, the text should communicate the image's meaning or purpose. Purely decorative images generally use an empty alt value, while image submit buttons require a meaningful text label. Appropriate alternative text improves accessibility and provides useful replacement content when images cannot be displayed.