HTML alt Attribute

Introduction

The alt attribute is a fundamental feature in HTML that is primarily used with the <img> (image) element. The purpose of the alt attribute is to provide alternative text for browsers to display when the image cannot be loaded. This text also serves as a description for users who may be using screen readers or have images disabled.

What You’ll Learn

Purpose of alt

The primary purpose of the alt attribute is to enhance web accessibility by ensuring that users with disabilities or those facing slow internet connections can still understand the content conveyed by images on a webpage. Additionally, it serves as a placeholder when the image itself cannot be rendered.

📝 Syntax

Add alt to an <img> element with a descriptive string (or empty for decorative images):

<img src="photo.jpg" alt="A scenic view of a mountain landscape">

Syntax Rules

• Required on <img> elements (use alt="" if decorative).
• Value is a plain text string describing the image content or function.
• Also valid on <area> elements in image maps.
• Do not include "image of" or "picture of"—screen readers already announce it as an image.

💎 Values

The alt attribute accepts a string value that represents the alternative text for the image. This text should be descriptive enough to convey the content and purpose of the image. Proper use of the alt attribute is crucial for making websites more accessible and user-friendly.

• Descriptive text — alt="A scenic view of a mountain landscape" explains what the image shows.
• Functional text — alt="Search" on an icon button describes what the control does.
• Empty string — alt="" marks a purely decorative image that assistive tech should ignore.

<!-- Informative image -->
<img src="chart.png" alt="Sales grew 24% in Q2 2026">

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

<!-- Image map area -->
<area shape="rect" coords="0,0,100,100" href="/about" alt="About us">

Applicable Elements

Examples Gallery

Descriptive alt text, dynamic JavaScript updates, and decorative images with empty alt.

👀 Live Preview

An image with descriptive alt text (inspect or disable images to see the fallback):

Example

Let’s consider a simple example of using the alt attribute with an <img> element:

alt.html

Copy

<img src="example.jpg" alt="A scenic view of a mountain landscape">

View Output Try It Yourself

📤 Output:

Alt text: “A scenic view of a mountain landscape”

How It Works

In this example, the alt attribute is set to “A scenic view of a mountain landscape,” providing a textual description of the image content. If the image fails to load, this text appears in its place.

Dynamic Values with JavaScript

You can dynamically set the alt attribute using JavaScript. This can be useful when dealing with changing content or user interactions. Here’s a brief example:

dynamic-alt.html

Copy

<img id="dynamicImage" src="photo.jpg" alt="">

<script>
  document.getElementById("dynamicImage").alt = "Sweet red cherry fruit";
</script>

View Output Try It Yourself

📤 Output:

Alt set via JavaScript to “Sweet red cherry fruit”.

How It Works

In this script, the alt attribute for an image with the id dynamicImage is set to “Sweet red cherry fruit.” This dynamic approach can be helpful when the content of the image changes based on user actions.

Example — Decorative Image

If an image is purely decorative and doesn’t convey meaningful content, use an empty alt attribute:

decorative-alt.html

Copy

<img src="divider.svg" alt="" role="presentation">

View Output Try It Yourself

📤 Output:

Section Title

Body text follows the decorative divider.

How It Works

An empty alt="" tells assistive technologies to skip the image. Use this only when the image adds no information beyond what surrounding text already provides.

♿ Accessibility

• Every img needs alt — Use descriptive text or alt="" for decorative images; never omit the attribute.
• Be concise but meaningful — Convey the image’s purpose, not every visual detail.
• Don’t repeat nearby text — If a caption already describes the image, keep alt brief or use alt="".
• Test with a screen reader — Verify alt text reads naturally and adds value.
• Complex images need more — Provide a longer description in visible text or via aria-describedby.

💡 Best Practices