header, nav, main, section, and footer

A semantic page layout

<body>
  <header>
    <a href="/">Mayon Bakeshop</a>
    <nav aria-label="Main">...</nav>
  </header>
  <main>
    <h1>Fresh pili tarts in Legazpi</h1>
    <section>
      <h2>Our best sellers</h2>
      ...
    </section>
    <section>
      <h2>Delivery areas</h2>
      ...
    </section>
    <aside>
      <h2>Order by 3 PM for same day delivery</h2>
    </aside>
  </main>
  <footer>
    <p>&copy; 2026 Mayon Bakeshop</p>
  </footer>
</body>

What each element means

Element	Meaning	How many?
<header>	Intro for the page or a section	Can repeat
<nav>	Major navigation links	Can repeat, label each
<main>	The unique main content	One visible per page
<section>	A themed group, usually with a heading	Many
<article>	Standalone content: a blog post, product card, review	Many
<aside>	Related side content, like tips or a promo	Many
<footer>	Closing info for the page or a section	Can repeat

section vs article vs div

• Could it be shared alone and still make sense, like a blog post or review? Use article.
• Is it a themed part of the page with its own heading? Use section.
• Is it only a wrapper for styling? Use div.

Landmarks for screen readers

Screen readers turn header, nav, main, aside, and footer into landmarks. Users can open a list of landmarks and jump to main in one key press, skipping the menu entirely. This is why you should always have one <main>. A section becomes a landmark only when it has an accessible name, like aria-labelledby pointing to its heading.

Try it: give the page landmarks

Replace the divs with header, nav, main, section, and footer.

Quick quiz

Common mistakes

• Two main elements. Screen readers expect one main region.
• Sections without headings. A section should usually have a heading.
• Wrapping everything in section. Use div for pure styling wrappers.

Your action

Tick each item when you can do it. Your progress saves on this device.