Practice: structure your page

Your page has content and links. Now give it a useful structure.

Start by placing the page title and navigation inside header:

<header>
  <h1>Sam's web page</h1>
  <nav aria-label="Primary">
    <a href="index.html">Home</a>
    <a href="about.html">About me</a>
  </nav>
</header>

Wrap the unique page content in main:

<main>
  <section>
    <h2>About me</h2>
    <p>I am learning how the Web works.</p>
  </section>

  <section id="learning">
    <h2>What I am learning</h2>
    <!-- your list goes here -->
  </section>
</main>

Finish with a small footer:

<footer>
  <p>Built while learning HTML.</p>
</footer>

Do not add an element because its name sounds useful. Add it because the content matches its meaning.

You probably do not need article or aside yet. That is fine. A smaller honest structure is better than a page filled with unnecessary containers.

Inspect the landmarks

Open the browser accessibility inspector if it is available. Look for banner, navigation, main, and contentinfo landmarks.

The HTML elements create those landmarks without extra ARIA roles.

Apply the same structure on about.html. Both pages should share the same header navigation and footer pattern so landmarks stay consistent across the site.

Move the page-level h1 into header only if it still describes the whole site. On about.html, the main heading inside main might be an h1 (“About me”) with the site name moved to a shorter header link. Pick one pattern and keep it on every page.

Landmarks are per page, not per site. Each HTML file needs its own main with that page’s unique content. Shared chrome belongs in header and footer, repeated on every file.

Validate index.html after restructuring. Moving tags around is when unclosed elements tend to slip in.

View Page Source after your edits and confirm main wraps only the unique content, not the site-wide header or footer.

You are done when your page has one visible main, clear navigation, and no container you cannot explain.