Image Alt Text

HTML links and media

Alt text explains image meaning when the image cannot be seen.

The alt attribute is not a caption, tooltip or keyword field. It is the text alternative for an image.

Good alt text depends on context. The same image can need different alt text on different pages because the meaning can change.

If the image is decorative, use alt="" so assistive technology can skip it. If the image communicates information, write the information in plain language.

Meaningful image

Alt text should communicate the same essential meaning.

Decorative image

Use alt="" when the image adds no content.

Functional image

If an image is inside a link or button, alt should describe the action.

Complex image

Use nearby text, captions or long explanations for charts and diagrams.

Syntax and structure

Alt text is written for meaning, not for file names.

A good alt value is short, useful and relevant to the surrounding content.

Alt text matched to context

<img src="audi-a3.webp" alt="Black Audi A3 S line used for manual driving lessons">

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

<a href="/html/images.php">
  <img src="lesson-icon.svg" alt="Open the HTML images lesson">
</a>

Alt text that does not help

<img src="audi-a3.webp" alt="image">
<img src="audi-a3.webp" alt="car car car driving lesson best car">
<img src="divider.svg" alt="decorative red line graphic separator">

Rules that matter

Links and media should be useful, stable and understandable.

Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.

Describe purpose

Write what the image means in this exact page context.

Do not start with image of

Screen readers already know it is an image.

Keep decorative alt empty

Empty alt is intentional for decorative images.

Avoid keyword stuffing

Alt text is for users first.

Describe action for linked images

If the image is clickable, alt should describe the destination or action.

Use captions separately

A caption can add visible context, but alt still needs to cover image meaning.

Production thinking

Navigation, images and metadata are part of product quality.

Why does this matter?

This matters because images can carry important information. Without good alt text, part of the page disappears for users who cannot see the image.

Accessibility

Alt text is essential for screen reader users and for situations where images fail to load.

Production note

Alt text should be reviewed with content, not left as a technical afterthought at launch time.

SEO note

Search engines use alt text as image context. Natural descriptive alt text is useful; repeated keyword spam is not.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Rewrite the alt text for a sales page.
Rewrite the alt text for a technical documentation page.
Change the image to decorative by using alt="" and explain why that may be wrong here.

Practice assignment

Do this before moving to the next lesson.

Write alt text for a meaningful product image.
Write empty alt for a decorative separator.
Write functional alt text for an image inside a link.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(780px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.eyebrow {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 10px 0 16px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

p, figcaption {
  color: #cfd8e6;
  line-height: 1.7;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

a {
  color: #8cffc1;
  font-weight: 800;
}

nav a {
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.result-note {
  margin-top: 14px;
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(140, 255, 193, 0.1);
}

.demo-highlight {
  outline: 3px solid rgba(140, 255, 193, 0.55);
  outline-offset: 4px;
}

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?