Page Layout Structure: <header>, <main>, and <footer>

Every web page has three natural zones: the top (site identity and navigation), the primary content, and the bottom (supplementary info). HTML has dedicated elements for each.

`<header>`

<header> contains introductory content for the page or a section. At the page level it typically holds:

The site name or logo
Primary navigation
A page title or tagline

<header>
  <h1>Mountain Hiking</h1>
  <p>A beginner's guide to getting outside.</p>
</header>

`<main>`

<main> contains the primary content of the page — the unique, central material that is different on every page of a site.

<main>
  <h2>Gear</h2>
  <p>Good boots and a reliable pack are essential.</p>

  <h2>Trail difficulty</h2>
  <p>Trails are rated from easy to strenuous.</p>
</main>

Rules for <main>:

There must be only one <main> per page.
It should not be nested inside <header>, <footer>, <nav>, <aside>, or <article>.
It represents the content unique to this page — not repeated elements like navigation or a footer.

`<footer>`

<footer> contains supplementary information for its nearest ancestor: copyright notices, contact links, secondary navigation, or legal text.

<footer>
  <p>© 2025 Mountain Hiking Guide</p>
  <p><a href="mailto:contact@example.com">Contact</a></p>
</footer>

Like <header>, <footer> can appear inside an <article> to mark the footer of that article, not the whole page.

A complete page skeleton

These three elements establish the page-level structure:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mountain Hiking</title>
  </head>
  <body>
    <header>
      <h1>Mountain Hiking</h1>
    </header>

    <main>
      <h2>Gear</h2>
      <p>Good boots and a reliable pack are essential.</p>

      <h2>Trail difficulty</h2>
      <p>Trails are rated from easy to strenuous.</p>
    </main>

    <footer>
      <p>© 2025 Mountain Hiking Guide</p>
    </footer>
  </body>
</html>

Notice how the heading hierarchy works:

<h1> inside <header> is the page’s main title.
<h2> elements inside <main> are major section headings.

Exercise

Open index.html in VS Code. You are going to add semantic structure to the page you have been building.

Wrap your existing content so it matches this layout:

<body>
  <header>
    <!-- Move your <h1> here -->
  </header>

  <main>
    <!-- Move your <h2>s, <p>s, <img>, and links here -->
  </main>

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

Steps:

Add <header> tags around your <h1> (and the <p> immediately below it if it acts as a tagline).
Add <main> tags around the rest of your content — the <h2> sections, paragraphs, image, and links.
Add <footer> at the bottom with a short line of your choice.
Make sure everything is properly indented.
Save and open index.html in your browser — the page will look identical, but the structure is now meaningful.

Recap

<header> — introductory content: site name, navigation, page title.
<main> — primary page content. One per page.
<footer> — supplementary info: copyright, contact, secondary links.
These three elements are the backbone of any page-level HTML structure.