HTML · Module 04 · Lesson 16 of 54

Page Landmarks (header, nav, main, footer)

What are Page Landmarks?

Think of a physical department store. It has a sign at the entrance (header), directory maps (nav), the main shopping aisles (main), and a checkout or customer service counter at the back (footer). This layout helps you navigate the store easily.

HTML5 introduced Landmark Elements (also called semantic outline tags) to structure your page into clear layout regions:

<header>: The top section containing branding, logo, or search.

<nav>: Holds navigation menus and links.

<main>: Wraps the unique, primary content of the page.

<footer>: The bottom section containing copyright notes, contact links, or site maps.

Why does it matter?

In the old days, developers structured pages using generic tags like <div id="header"> or <div id="footer">. Semantic landmarks are much better because screen readers can read them natively, allowing visually impaired users to skip straight to the <main> content or <nav> section instantly.

How to write it

Landmark elements are written directly inside the <body> element:

<body>
  <header>
    <h1>Site Logo</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <h2>Welcome</h2>
    <p>This is the main content area.</p>
  </main>
  <footer>
    <p>&copy; 2026 LearnHTML</p>
  </footer>
</body>

Header / Nav

Main Content Area

Footer

Common Mistakes

Nesting <main> inside other landmarks: The <main> element represents the unique content of the page, so it should sit directly under <body> and not be nested inside <header>, <nav>, or <footer>.

Using multiple <main> tags: There should only be one visible <main> tag on any single webpage.

Quick Reference

<header> — Intro branding and navigation zone.

<nav> — Links container for site navigation.

<main> — Primary unique content area of the document.

<footer> — Closing credits, copyright, and links footer.

Your Task

Create a `<header>` element. Inside it, place a `<nav>` element containing a link `<a>` with `href="/"` displaying 'Home'.

index.html

Type code above to start the lesson.

Live Preview