Summary  
This chapter covers using the alt attribute to supply concise, descriptive alternative text for images in HTML, ensuring informative images have meaningful alt text and decorative images use empty alt attributes.

General domain of usage  
Web accessibility

The `alt` attribute provides alternative text for users who cannot see the image. This includes people using screen readers, users with slow internet connections, or those who have images turned off in their browsers. Always include descriptive alt text for informative images and use empty alt attributes for decorative ones. By doing so, you ensure that everyone can understand the content and purpose of your images, regardless of how they access your site.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkFsdCBUZXh0IEV4YW1wbGVzPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8IS0tIEluZm9ybWF0aXZlIGltYWdlIHdpdGggZGVzY3JpcHRpdmUgYWx0IHRleHQgLS0+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8zMjM5ZmY5Yy1mZTU1LTQyZTItOGUzZC1kZjJhODVmZDQxMzgvc2VjdGlvbi0yL3BpZS1jaGFydC5wbmciCiAgICAgIGFsdD0iUGllIGNoYXJ0IHNob3dpbmcgYnJvd3NlciBtYXJrZXQgc2hhcmUgaW4gMjAyMyIKICAgIC8+CgogICAgPCEtLSBEZWNvcmF0aXZlIGltYWdlIHdpdGggZW1wdHkgYWx0IGF0dHJpYnV0ZSAtLT4KICAgIDxpbWcKICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzMyMzlmZjljLWZlNTUtNDJlMi04ZTNkLWRmMmE4NWZkNDEzOC9zZWN0aW9uLTIvbGluZS5wbmciCiAgICAgIGFsdD0iIgogICAgLz4KCiAgICA8IS0tIEdvb2QgYWx0IHRleHQgZXhhbXBsZSAtLT4KICAgIDxpbWcKICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzMyMzlmZjljLWZlNTUtNDJlMi04ZTNkLWRmMmE4NWZkNDEzOC9zZWN0aW9uLTIvZ29sZGVuLXJldHJpZXZlci5wbmciCiAgICAgIGFsdD0iR29sZGVuIHJldHJpZXZlciBwbGF5aW5nIGZldGNoIGluIGEgcGFyayIKICAgIC8+CgogICAgPCEtLSBCYWQgYWx0IHRleHQgZXhhbXBsZTogdG9vIHZhZ3VlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvMzIzOWZmOWMtZmU1NS00MmUyLThlM2QtZGYyYTg1ZmQ0MTM4L3NlY3Rpb24tMi9nb2xkZW4tcmV0cmlldmVyLnBuZyIKICAgICAgYWx0PSJEb2ciCiAgICAvPgoKICAgIDwhLS0gQmFkIGFsdCB0ZXh0IGV4YW1wbGU6IG1pc3NpbmcgYWx0IGF0dHJpYnV0ZSAobm90IHJlY29tbWVuZGVkKSAtLT4KICAgIDxpbWcKICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzMyMzlmZjljLWZlNTUtNDJlMi04ZTNkLWRmMmE4NWZkNDEzOC9zZWN0aW9uLTIvZ29sZGVuLXJldHJpZXZlci5wbmciCiAgICAvPgogIDwvYm9keT4KPC9odG1sPg==

Good alt text is concise and describes the image's function or content. Avoid phrases like "image of..." and never leave alt attributes out. Instead, focus on what the image conveys or the task it helps the user accomplish. This makes your site more accessible and helps users who rely on alternative text to fully understand your content.

**Common mistake:** using the same alt text for every image or omitting it entirely. This reduces accessibility and can confuse users relying on screen readers.

Note

What is the main purpose of the `alt` attribute on an `<img>` element?

Learn how to create meaningful, accessible, and visually rich web content using HTML. Combine text, images, audio, and video to craft pages that are structured, engaging, and optimized for search engines. Gain practical skills in semantic markup, media integration, and navigation design to build web pages that look great and perform well.

Build a strong foundation for creating clear and readable web content. Use semantic elements to structure text, emphasize key information, and organize content with lists that enhance both meaning and accessibility.

Enhance web pages with images that are both visually engaging and accessible. Embed and optimize visuals effectively, add descriptive alt text, and use figures with captions to give context and meaning to visual content.

Combine multimedia and navigation elements to create engaging, discoverable, and user-friendly websites. Add audio and video content, build intuitive navigation menus, and include meta information that improves SEO and accessibility.

Writing Effective Alt Text