YouTip

# HTML <area> alt Attribute The `alt` attribute of the `` tag specifies an alternate text for an area within an image map. This text is displayed if the image cannot be loaded or if the user is utilizing assistive technologies like screen readers. --- ## Quick Example Below is an example of an image map with clickable regions (the Sun, Mercury, and Venus) where each `` tag defines its own `alt` text: ```html ``` --- ## Browser Support The `alt` attribute is fully supported by all major modern web browsers: * Google Chrome * Mozilla Firefox * Safari * Opera * Microsoft Edge / Internet Explorer --- ## Definition and Usage The `alt` attribute provides alternative information for a clickable area on an image map. This is crucial for accessibility and user experience when the image cannot be displayed due to: * Slow internet connection speeds * An error in the `src` attribute of the `` tag * The user disabling image loading in their browser settings * The user relying on screen readers (e.g., visually impaired users) ### HTML 4.01 vs. HTML5 Differences * **HTML 4.01:** The `alt` attribute was strictly required for all `` tags. * **HTML5:** The `alt` attribute is **only required if the `href` attribute is present**. If the `` element is not a hyperlink (i.e., it has no `href` attribute), the `alt` attribute must be omitted. --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *text* | Specifies the alternative text to be displayed or read aloud if the image map area cannot be rendered. | --- ## Best Practices & Accessibility 1. **Be Descriptive but Concise:** The `alt` text should clearly describe the destination or action of the clickable area (e.g., Use `alt="Go to Sun details"` or `alt="Sun"` rather than vague descriptions). 2. **Coordinate with the Main Image:** Ensure the main `` tag also has a descriptive `alt` attribute that introduces the overall image map context.