Header, nav, main and footer

Pages have regions

Look at almost any website and you can name its regions without thinking: a top bar with a logo and menu, the content you came for, and a bottom strip with contact links and copyright. In the early days of HTML there were no elements for these, so authors used div boxes with class names such as top and bottom. Browsers and search engines could not tell which was which.

HTML5 added elements that name the regions. Using them costs nothing and gives you better accessibility and cleaner code.

The four building blocks

<body>
  <header>
    <a href="/">Sunrise Bakery</a>
    <nav>
      <a href="/menu/">Menu</a>
      <a href="/about/">About</a>
      <a href="/contact/">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Fresh bread every morning</h1>
    <p>We bake from 4 a.m. so the loaves are warm when you arrive.</p>
  </main>

  <footer>
    <p>&copy; 2026 Sunrise Bakery. 12 Market Road.</p>
  </footer>
</body>

• header holds introductory content: the logo, the site name, a search box, the menu.
• nav wraps a block of major navigation links.
• main holds the content that is the point of this page. Everything repeated on every page (menu, footer) stays outside it.
• footer holds closing information: copyright, contact details, legal links.

These elements have no visual styling of their own beyond starting a new line. They add meaning. You make them look good with CSS later.

Try it

<header style="background:#fde68a;padding:12px">
  <strong>Sunrise Bakery</strong>
  <nav><a href="#">Menu</a> | <a href="#">About</a> | <a href="#">Contact</a></nav>
</header>
<main style="padding:12px">
  <h1>Fresh bread every morning</h1>
  <p>We bake from 4 a.m.</p>
</main>
<footer style="background:#e5e7eb;padding:12px">&copy; 2026 Sunrise Bakery</footer>

Colours here are added with the style attribute only so you can see the three regions. Remove them and nothing about the structure changes.

main: one per page

The main element marks the content unique to the page. A screen reader user can press a key to jump straight to it, skipping the repeated menu. For that to work reliably, use one visible main per page and do not nest it inside header, nav, footer, article or aside.

nav: only for major navigation

Use nav for the main menu, a table of contents, or breadcrumbs. Do not wrap every group of links: a list of related articles at the bottom of a post is not primary navigation. If a page has more than one nav, label each so a screen reader can tell them apart:

<nav aria-label="Main">…</nav>
<nav aria-label="Breadcrumb">…</nav>

header and footer inside other elements

header and footer are not limited to the top and bottom of the page. A blog post can have its own:

<article>
  <header>
    <h2>Why we use stone-ground flour</h2>
    <p>By Asha, 12 March 2026</p>
  </header>
  <p>Stone grinding keeps more of the grain…</p>
  <footer><p>Filed under: Ingredients</p></footer>
</article>

Here, the header introduces the article and the footer closes it. Browsers only treat a header or footer as a page-level landmark when it is a direct child of body.

Why this matters beyond looks

• Screen reader users can list landmarks and jump to Navigation or Main in one keypress.
• Search engines use the structure to understand which text is the page's content and which is repeated boilerplate.
• You can read your own HTML more easily months later.

Common mistakes

• Using div id="header" everywhere and leaving the landmarks out.
• Two main elements, or main inside article.
• Putting the site menu inside main, which makes it part of the unique content.
• Wrapping every list of links in nav, which turns landmarks into noise.
• Skipping heading levels inside the regions. Landmarks are not a substitute for a clear h1.

Exercise

Build the skeleton for a personal site: a header with your name and a nav of three links, a main with an h1 and one paragraph, and a footer with a copyright line.

<header>
  <a href="/">Riya Verma</a>
  <nav>
    <a href="/projects/">Projects</a>
    <a href="/writing/">Writing</a>
    <a href="/contact/">Contact</a>
  </nav>
</header>
<main>
  <h1>Hello, I am Riya</h1>
  <p>I design and build small websites for local businesses.</p>
</main>
<footer><p>&copy; 2026 Riya Verma</p></footer>