HTML Practice: Structure an Article with Semantic HTML

In this challenge you build the structure of an article page using the elements from the semantic and accessibility chapters.

Challenge: a blog article page

Create a page for a short article that includes:

A header with the site name and a nav of three links, labelled with aria-label.
A main containing one article.
Inside the article: an h1, a line with the date in a time element, an introductory paragraph, two h2 sections with a paragraph each, and a figure with an image and caption.
An aside with a related link.
A footer with a copyright line.
A skip link at the very top that jumps to main.

Show a possible solution

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Why we love used books | Juniper Books</title>
</head>
<body>
  <a href="#main">Skip to main content</a>
  <header>
    <p>Juniper Books</p>
    <nav aria-label="Main">
      <a href="/">Home</a> | <a href="/books">Books</a> | <a href="/events">Events</a>
    </nav>
  </header>
  <main id="main">
    <article>
      <h1>Why we love used books</h1>
      <p><time datetime="2026-09-04">4 September 2026</time></p>
      <p>A used book has already had a life before it reaches you.</p>
      <h2>They cost less</h2>
      <p>Spend less and read more.</p>
      <figure>
        <img src="https://placehold.co/300x150" alt="A stack of used paperbacks" width="300" height="150">
        <figcaption>Paperbacks waiting on the front table.</figcaption>
      </figure>
      <h2>They have stories</h2>
      <p>Sometimes the previous owner leaves a note inside.</p>
      <aside>
        <p>Related: <a href="/events">Come to our book swap</a></p>
      </aside>
    </article>
  </main>
  <footer>
    <p>&copy; 2026 Juniper Books</p>
  </footer>
</body>
</html>

Run your page and open the browser’s accessibility tree. You should see the landmarks you created: banner, navigation, main and content info.