Semantic HTML Tags

Mission

The Riverstone Community Garden is publishing a short harvest update. This is a new page, separate from the hall’s media examples. Build a page whose regions are clear enough for a visitor—or a screen-reader user—to jump straight to the update, its related links, or its contact details.

What you'll build

A page with semantic landmarks: a site header and navigation, one self-contained article update, a related-links sidebar, and a footer — all organized inside a single main content region.

Target: a page with a site header and navigation, one self-contained update, a related-links sidebar, and a footer. When you preview it, the update sits inside the page's single primary-content region.

Give each part a job

Semantic HTML names the role of a region instead of using a generic <div> everywhere. Those names create landmarks that assistive technology can announce and navigate. They also make the document easier for a teammate and a search engine to understand.

For this garden update, use:

<section> groups related content that belongs to the current page. An <article> is stronger: its content should still make sense if shared or listed by itself.

Build the update's landmarks

Here is the same landmark pattern on a library notice. Notice that <nav> belongs inside the <header>, while the announcement and its sidebar belong inside <main>. Transfer that structure to the garden update.

<header>
    <h1>Willow Lane Library</h1>
    <nav>
        <a href="/catalog">Catalog</a>
        <a href="/hours">Hours</a>
    </nav>
</header>

<main>
    <article>
        <h2>Saturday Story Hour</h2>
        <p>Story hour starts at ten in the reading room.</p>
        <time datetime="2026-08-15">August 15, 2026</time>
    </article>

    <aside>
        <h3>Library links</h3>
        <a href="/membership">Become a member</a>
    </aside>
</main>

<footer>
    <p>Willow Lane Library</p>
</footer>

<time> gives the browser a machine-readable date through datetime while visitors read the friendly date. Use it for a specific date or time, not for vague phrases such as “last week.”

Checkpoint

Preview the page. You should be able to point to a header, one navigation area, one main content area, the harvest update, related links, and a footer. If the update is outside <main>, check the opening and closing tags first.

Payoff

With those landmarks in place, the garden update is no longer just a stack of boxes: its structure explains where visitors are and where they can go next.