HTML: Structure

Images and descriptions

Lesson 5 of 18 · About 20 minutes

Your goal: Add an image with useful alternative text.

Learn

img uses src for the image address and alt for a text alternative. A relative image address works when the image exists beside the HTML file. The practice image here is supplied by this site.

View starter code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My hobby page</title>
    <style></style>
  </head>

  <body>
    <h1>My hobby</h1>
    <p>I enjoy learning something new.</p>
    <img src="aquaticplant1.jpg" alt="Aquatic plants" width="300">
  </body>
</html>

Your challenge

Write a more informative alt description after looking at the preview. Add a caption below the image.

Keep developing your hobby page: Download HTML before leaving the sandbox, then choose Open HTML file when returning to your project. Load saved draft restores only this lesson’s draft in this browser.

Practise in the sandbox

Show a hint

Wrap the image in figure and add a figcaption. For your own project, keep the downloaded HTML and your image in the same folder.

Show a sample answer

Try the challenge first. This is one possible answer or a snippet to adapt.

<figure>
  <img src="aquaticplant1.jpg" alt="Aquatic plants growing in water" width="300">
  <figcaption>Plants in an aquatic habitat.</figcaption>
</figure>

Check your work

The image loads, its alternative text describes it, and a caption is visible.

I tried the challenge and checked the result.

Completion is your own check, not an automatic grade.