Learn HTML and CSS: Images

Images

"A website about ice cream without any ice cream on it?" Maggie sighs and puts a pile of drawings on the counter: a cone, a cup and a waffle.

The img element

You put an image on the page with <img>. Like <br>, it's an empty element: no content, no closing tag.

Which image it is comes from the attribute src, short for "source": the name of the file, relative just like a link.

The attribute alt describes what's in the picture. People who have the page read aloud hear that text. And if the image doesn't load, the text appears in its place.

index.html

1<main>2  <h1>Our cups</h1>3  <img src="beker.svg" alt="A cup with three scoops of ice cream">4</main>

ijssalon.example

An empty alt for decoration

Not every image tells you something. If the name is already next to it, or it's only decoration, give it an empty alt: alt="". A screen reader then skips the image.

Never just leave alt out. A screen reader then can't tell whether the image matters, and sometimes reads out the file name: "hoorntje dot s v g".

index.html

1<main>2  <h1>Choose your ice cream</h1>3  <p><img src="hoorntje.svg" alt=""> Cone</p>4  <p><img src="beker.svg" alt=""> Cup</p>5</main>

ijssalon.example

Try it yourself

Between the heading and the paragraph, add the image wafel.svg, with the description A waffle dusted with icing sugar.

1<main>2  <h1>Waffles</h1>3  <p>Freshly baked, every afternoon.</p>4</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example

Ready for more?

The full lesson has 6 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

The img element

You put an image on the page with <img>. Like <br>, it's an empty element: no content, no closing tag.

Which image it is comes from the attribute src, short for "source": the name of the file, relative just like a link.

The attribute alt describes what's in the picture. People who have the page read aloud hear that text. And if the image doesn't load, the text appears in its place.

index.html

1<main>2  <h1>Our cups</h1>3  <img src="beker.svg" alt="A cup with three scoops of ice cream">4</main>

ijssalon.example

An empty alt for decoration

Not every image tells you something. If the name is already next to it, or it's only decoration, give it an empty alt: alt="". A screen reader then skips the image.

Never just leave alt out. A screen reader then can't tell whether the image matters, and sometimes reads out the file name: "hoorntje dot s v g".

index.html

1<main>2  <h1>Choose your ice cream</h1>3  <p><img src="hoorntje.svg" alt=""> Cone</p>4  <p><img src="beker.svg" alt=""> Cup</p>5</main>

ijssalon.example

Try it yourself

Between the heading and the paragraph, add the image wafel.svg, with the description A waffle dusted with icing sugar.

1<main>2  <h1>Waffles</h1>3  <p>Freshly baked, every afternoon.</p>4</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}

ijssalon.example