HTML alt attribute (original) (raw)

Last Updated : 6 May, 2026

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 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:

HTML `

GeeksforGeeks Logo

`

The alt attribute in the tag provides descriptive text ("GeeksforGeeks Logo") that displays if the image fails to load, enhancing accessibility.

• ****:** The alt attribute provides alternative text for clickable areas in an image map.
• ****:** The alt attribute provides alternative text for images (main and most important use).
• ****:** 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 `

`

• The 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 `

`

• The tag displays an image of geometric shapes and uses the usemap attribute to define an image map.
• Each tag within the 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.