×

html · level 2 · unit 6 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

Alt text says what a picture means here, or nothing at all.

Good alt text says what the picture tells you in that place. On a recipe page, a cake photo might be A lemon cake with icing dripping down the sides. Skip words like picture of, because screen readers already say it is an image.

A picture, like a swirl or a little logo beside a heading, tells nobody anything. Give it empty alt text, alt="", and screen readers skip it.

A picture that is a link gets alt text saying where it goes, such as Home.

<h2><img src="logo.svg" alt="">Lemon drizzle cake</h2>
<img src="cake.svg" alt="A lemon cake with icing dripping down the sides">
<a href="https://example.com/"><img src="logo.svg" alt="Home"></a>

Press show my page to see it here.

Never leave alt out. With no alt at all, a screen reader may read out the file name.