HTML Images Exercise: Build an Accessible Photo Gallery

An accessible gallery is a collection of images readers can explore in a predictable order. A figure can pair each picture with a caption when the caption helps. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.

What You Need to Know

Write useful alt text for informative images and keep captions distinct rather than copying them word-for-word. A gallery layout comes from CSS; HTML provides the structure.

Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<section aria-labelledby="gallery-title">
    <h2 id="gallery-title">Nature gallery</h2>
    <figure><img src="images/bird.jpg" alt="Robin on a fence">
        <figcaption>A robin</figcaption>
    </figure>
    <figure><img src="images/tree.jpg" alt="Oak tree in summer">
        <figcaption>An oak</figcaption>
    </figure>
</section>

Let’s Understand the Example

• Section groups content around a shared topic and usually has a heading.
• An h2 starts a major section beneath the page topic.
• Figure groups self-contained content, such as a photo or code illustration, with an optional caption.
• Aria-labelledby uses one or more existing element ids to name another element.
• Id gives one element a unique name within the page, so a link, label, or script can point to it.
• Src tells the browser where to find an image or other embedded resource.

An image appears only if its file path is correct. If it is informative, its alt text should share the same useful meaning; if it is decoration, empty alt text is often right.

What Should You See?

The page should display “Nature gallery” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.

Try It Yourself

1. Add a third image with a unique caption and description.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Using file names like img001.jpg as alt text.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• An accessible gallery is a collection of images readers can explore in a predictable order.
• Section groups content around a shared topic and usually has a heading.
• Write useful alt text for informative images and keep captions distinct rather than copying them word-for-word. A gallery layout comes from CSS; HTML provides the structure.