Lab: Build a Well-Structured Page

Optional practice lab. This session pulls together everything from the module: document structure, elements, semantic landmarks, attributes, links, images, and a form. Work from the content brief below, write the HTML yourself, then check your answer against the reference and the checklist.

The brief

You are marking up a page for The Daily Dispatch, a fictional online newspaper. The design is not your concern — CSS comes later. Your job is to write HTML that gives the content correct meaning and structure.

Site name: The Daily Dispatch

Navigation links: Home, World, Science, Technology, Opinion

Article:

Headline: Scientists Discover Deep-Sea Coral Reef the Size of a City
Byline: By Marina Chen | June 14, 2026
Lead image: a wide photograph of orange and purple coral in deep, dark water
Body (three paragraphs):
1. Researchers aboard the RV Meridian announced Tuesday the discovery of a previously unmapped coral reef system extending more than 200 square kilometres across the floor of the Pacific Ocean. The find, at a depth of 800 metres, is unusual for its size and the density of species observed.
2. "We expected some coral coverage in this zone, but nothing at this scale," said Dr. Yuki Watanabe, the expedition's lead marine biologist. "The reef appears to be thriving despite water temperatures that would stress shallower systems."
3. The team plans a return survey in late 2026 to collect specimens and document the full extent of the reef. Funding has been secured through a joint grant from three international ocean research foundations.
Pull quote (from the second paragraph, for visual callout — it is already in the body text, so mark it as a <blockquote>)
Figure caption for the lead image: Orange cup corals and purple sea fans at 820 metres depth, photographed by the RV Meridian's ROV.

Sidebar — related stories (three links):

"Hydrothermal Vent Gardens of the Mid-Atlantic Ridge" → /articles/vent-gardens
"Can Deep-Sea Mining Coexist With Marine Ecosystems?" → /articles/deep-sea-mining
"A Year Aboard the RV Meridian" → /articles/rv-meridian-profile

Newsletter sign-up form (in the sidebar):

Heading: "Stay informed"
A single email field labelled "Your email address"
A submit button labelled "Subscribe"
Form sends to /newsletter via POST

Your task

Write the complete HTML document. Do not add any CSS or inline styles. Use only the elements and attributes covered in this module.

Constraints:

Use the correct semantic landmark elements for each page region.
Every image must have meaningful alt text.
Every form field must be paired with a <label> via for/id.
No <div> or <span> where a semantic element fits.
The heading hierarchy must be logical — no skipped levels.
The <article> should have its own <header> containing the headline and byline.

Reference solution

Compare your version against this one. There is no single correct answer — if your semantic choices differ, ask yourself why you chose what you chose.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scientists Discover Deep-Sea Coral Reef — The Daily Dispatch</title>
  </head>
  <body>

    <header>
      <a href="/">The Daily Dispatch</a>
      <nav aria-label="Main navigation">
        <ul>
          <li><a href="/world">World</a></li>
          <li><a href="/science">Science</a></li>
          <li><a href="/technology">Technology</a></li>
          <li><a href="/opinion">Opinion</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <header>
          <h1>Scientists Discover Deep-Sea Coral Reef the Size of a City</h1>
          <p>
            By <strong>Marina Chen</strong>
            | <time datetime="2026-06-14">June 14, 2026</time>
          </p>
        </header>

        <figure>
          <img
            src="/images/deep-sea-coral.jpg"
            alt="Orange cup corals and purple sea fans growing densely on a dark ocean floor at 820 metres depth"
            width="1200"
            height="675"
          >
          <figcaption>
            Orange cup corals and purple sea fans at 820 metres depth,
            photographed by the RV Meridian's ROV.
          </figcaption>
        </figure>

        <p>
          Researchers aboard the RV Meridian announced Tuesday the discovery of a
          previously unmapped coral reef system extending more than 200 square
          kilometres across the floor of the Pacific Ocean. The find, at a depth
          of 800 metres, is unusual for its size and the density of species observed.
        </p>

        <blockquote>
          <p>
            "We expected some coral coverage in this zone, but nothing at this
            scale. The reef appears to be thriving despite water temperatures that
            would stress shallower systems."
          </p>
          <footer>— Dr. Yuki Watanabe, lead marine biologist</footer>
        </blockquote>

        <p>
          "We expected some coral coverage in this zone, but nothing at this scale,"
          said Dr. Yuki Watanabe, the expedition's lead marine biologist. "The reef
          appears to be thriving despite water temperatures that would stress
          shallower systems."
        </p>

        <p>
          The team plans a return survey in late 2026 to collect specimens and
          document the full extent of the reef. Funding has been secured through a
          joint grant from three international ocean research foundations.
        </p>
      </article>

      <aside aria-label="Related and newsletter">
        <section aria-labelledby="related-heading">
          <h2 id="related-heading">Related stories</h2>
          <ul>
            <li>
              <a href="/articles/vent-gardens">
                Hydrothermal Vent Gardens of the Mid-Atlantic Ridge
              </a>
            </li>
            <li>
              <a href="/articles/deep-sea-mining">
                Can Deep-Sea Mining Coexist With Marine Ecosystems?
              </a>
            </li>
            <li>
              <a href="/articles/rv-meridian-profile">
                A Year Aboard the RV Meridian
              </a>
            </li>
          </ul>
        </section>

        <section aria-labelledby="newsletter-heading">
          <h2 id="newsletter-heading">Stay informed</h2>
          <form action="/newsletter" method="POST">
            <div>
              <label for="newsletter-email">Your email address</label>
              <input
                type="email"
                id="newsletter-email"
                name="email"
                required
              >
            </div>
            <button type="submit">Subscribe</button>
          </form>
        </section>
      </aside>
    </main>

    <footer>
      <p>
        &copy; 2026 The Daily Dispatch. All rights reserved.
        | <a href="/privacy">Privacy Policy</a>
        | <a href="/contact">Contact</a>
      </p>
    </footer>

  </body>
</html>

Self-review checklist

Go through this list against your own markup before comparing to the reference:

Document structure

<!DOCTYPE html> is the very first line
<html> has a lang attribute
<head> contains <meta charset>, <meta name="viewport">, and <title>
<title> contains a meaningful, specific page title (not just "Page")

Landmarks

Page-level <header> wraps the site name and nav
<nav> wraps the navigation links and has an aria-label
<main> wraps the article and sidebar
<article> wraps the full news article
<article> has its own <header> with the headline and byline
<aside> wraps the sidebar content
<footer> wraps the closing site information

Heading hierarchy

One <h1> — the article headline
Sidebar section headings use <h2> — one level below <h1>
No heading levels are skipped

Images

Lead image has a src and a descriptive alt (not empty, not generic)
Image is inside a <figure> with a <figcaption>
width and height attributes are present

Links

Navigation links are in a <ul> / <li> list structure
All href values are valid (no bare # except intentional fragment links)

Form

<form> has action="/newsletter" and method="POST"
Email field has a paired <label> linked by for/id
<button> has type="submit"
Email field has type="email" and required

General

No inline style attributes anywhere
No <div> used where a semantic element would fit better
The blockquote pull quote is not the only place the quote text appears (the full attribution is also in the article body)

Finished reading? Mark it complete to track your progress.

The brief

Your task

Reference solution

Self-review checklist

Lab: Build a Well-Structured Page

The brief

Your task

Reference solution

Self-review checklist

On this page