Assemble an accessible course landing page

Study the question, then follow the complete answer and its reasoning.

01 · QUESTION

What should the HTML contain?

Bring document metadata, landmarks, navigation, structured content, media, and an enrollment form together in one small course landing page.

Requirements

Create a complete document with English language, description, and title
Use header, labeled nav, main, article, and footer
Use one h1 followed by at least two h2 headings
Add a figure with accessible image and caption
Add a three-item learning outcomes list
Create a form with an explicit required email label and submit button

Key idea

Work from the outside in: document metadata, page landmarks, article outline, figure, then the labeled form. Run the checks after each layer.

02 · SOLUTION

Complete HTML answer

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Learn to build meaningful and accessible web pages.">
    <title>Practical HTML — SovranCode</title>
  </head>
  <body>
    <header>
      <a href="#main-content">Skip to main content</a>
      <nav aria-label="Primary">
        <a href="#overview">Overview</a>
        <a href="#enroll">Enroll</a>
      </nav>
    </header>
    <main id="main-content">
      <article>
        <header id="overview">
          <h1>Practical HTML</h1>
          <p>Build web pages that communicate structure, not just appearance.</p>
        </header>
        <section>
          <h2>What you will learn</h2>
          <ul>
            <li>Structure documents</li>
            <li>Describe media</li>
            <li>Build usable forms</li>
          </ul>
          <figure>
            <img src="/images/html/connected-content.svg" alt="Diagram connecting common types of web content" width="800" height="450">
            <figcaption>Meaningful elements connect content into a usable document.</figcaption>
          </figure>
        </section>
        <section id="enroll">
          <h2>Enroll</h2>
          <form action="/enrollments" method="post">
            <label for="email">Email address</label>
            <input id="email" name="email" type="email" required>
            <button type="submit">Join the course</button>
          </form>
        </section>
      </article>
    </main>
    <footer><p>© 2026 SovranCode</p></footer>
  </body>
</html>

03 · EXPLANATION

Why this solution works

The solution builds outward from a valid document foundation. Landmarks expose major page regions, fragment links connect navigation to unique targets, and the heading outline describes content hierarchy. The figure makes media self-contained, while explicit form relationships and native validation create a usable enrollment path.

Concepts demonstrated

Assemble a complete semantic document
Connect navigation and content relationships
Review a page for structural accessibility

Why this pattern matters

Real pages combine many small HTML decisions. A strong landing page needs accurate metadata, navigable landmarks, a coherent outline, understandable media, scannable outcomes, and a form that works before styling or JavaScript arrives. Reviewing these relationships together reveals problems that isolated tag exercises can miss.

Solution walkthrough

The document foundation establishes language, encoding, mobile behavior, description, and a page-specific title.
The page header offers skip navigation and labeled primary links into two unique content targets.
Main and article contain the unique course content, organized by one h1 and clear h2 sections.
The outcomes list and captioned figure express related content without depending on visual layout.
The enrollment form connects its label and required email input, then ends with an explicit submit action.

Common mistakes to avoid

Starting with layout containers before defining the document outline
Using fragment links that do not match unique ids
Building custom form behavior before native labels, names, types, and validation are correct

EXERCISE FAQ

Before you move on.

What does “Assemble an accessible course landing page” teach?

This advanced HTML exercise focuses on Assemble a complete semantic document, Connect navigation and content relationships, Review a page for structural accessibility. Its requirements define the exact behavior to implement before you write code.

How should I validate this HTML solution?

Start with the displayed example input and expected output, then test a boundary case suggested by the requirements. Edit the HTML, inspect the live preview, then run the checks before comparing your structure with the complete answer.

When should I open the reference solution?

Attempt Assemble an accessible course landing page first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.

Your privacy choices

What should the HTML contain?

Requirements

Complete HTML answer

Why this solution works

Concepts demonstrated

Why this pattern matters

Solution walkthrough

Common mistakes to avoid

Before you move on.

Related HTML exercises.

Build a complete HTML document

Build an accessible workshop table

Create a responsive picture card