YouTip

## HTML `` alt Attribute The `alt` attribute specifies an alternate text for an image if the image cannot be displayed. This attribute is crucial for web accessibility (screen readers), search engine optimization (SEO), and providing a seamless user experience when network connections are slow or image paths are broken. --- ## Quick Example Here is a basic implementation of an image with an alternative text description: ```html ``` --- ## Browser Support | Attribute | Chrome | Edge/IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **alt** | Yes (All versions) | Yes (All versions) | Yes (All versions) | Yes (All versions) | Yes (All versions) | All major modern web browsers fully support the `alt` attribute. --- ## Definition and Usage The `alt` attribute provides alternative information for an image if a user for some reason cannot view it (due to slow internet connection, an error in the `src` attribute, browser image blocking, or if the user uses a screen reader). ### Key Differences Between `alt` and `title` * **`alt` Attribute:** Used to describe the image content for accessibility and fallback scenarios. It is **not** meant to be displayed as a tooltip. * **`title` Attribute:** Used to provide extra advisory information. Most browsers display this value as a tooltip when the user hovers their mouse pointer over the element. > **Note on Legacy Browsers:** Internet Explorer (versions prior to IE9) incorrectly displayed the `alt` attribute text as a tooltip when hovering over an image. This behavior does not comply with HTML specifications. If you want to create a hover tooltip, always use the `title` attribute instead. --- ## HTML 4.01 vs. HTML5 There are no functional differences in how the `alt` attribute is handled between HTML 4.01 and HTML5. However, in HTML5, omitting the `alt` attribute is highly discouraged as it violates web accessibility guidelines (WAI-ARIA). --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *text* | Specifies the alternative text for the image. | --- ## Best Practices for Writing Alt Text To ensure your website is accessible and optimized for search engines, follow these rules of thumb when writing `alt` text: ### 1. Informative Images If the image contains meaningful information essential to understanding the page content, use the `alt` attribute to describe the image clearly. ```html ``` ### 2. Functional Images (Inside Links) If the image is wrapped inside an `` tag and acts as a button or link, the `alt` text should describe the destination or action of the link, rather than describing the image itself. ```html ``` ### 3. Decorative Images If the image is purely decorative (e.g., background patterns, dividers, or illustrations that add no contextual value), use an empty `alt` attribute (`alt=""`). This tells screen readers to skip the image entirely. ```html ``` --- ## Comprehensive Code Examples ### Example 1: Standard Image Fallback If the image file `ocean-sunset.jpg` fails to load, the browser will display the text "Sunset over the Pacific Ocean" in its place. ```html ``` ### Example 2: Combining `alt` and `title` Use `alt` for accessibility and `title` to show a tooltip on hover. ```html ```