Content and media · Lesson 6 of 16

Images

Add an image with <img> and describe it.

5 minutes3 games

<img> has no closing tag. It needs two attributes:

src: where the image is.
alt: a text description for people who can't see it (screen readers, or if it fails to load). Never skip it.

HTML

<img src="https://picsum.photos/seed/seacode/320/180" alt="A random landscape photo" width="320">
<p>Broken image, but the alt text still helps:</p>
<img src="nope.jpg" alt="Our team at the Cairo office">

Quick question

Why does alt matter?

Spot the bug

One line has a mistake that stops the image from showing.

Exercise

Add an image with src https://picsum.photos/200 and an alt.

HTML

Learn more from

Played 0 of 3 games

HTML

Content and media · Lesson 6 of 16

Images

Add an image with <img> and describe it.

5 minutes3 games

<img> has no closing tag. It needs two attributes:

src: where the image is.
alt: a text description for people who can't see it (screen readers, or if it fails to load). Never skip it.

HTML

<img src="https://picsum.photos/seed/seacode/320/180" alt="A random landscape photo" width="320">
<p>Broken image, but the alt text still helps:</p>
<img src="nope.jpg" alt="Our team at the Cairo office">

Quick question

Why does alt matter?

Spot the bug

One line has a mistake that stops the image from showing.

Exercise

Add an image with src https://picsum.photos/200 and an alt.

HTML

Learn more from

Played 0 of 3 games