How do I organize a page into header, navigation, main, and footer regions?

Think of these elements as labels for the purpose of content, not as four visual boxes you must place on every design. <header> introduces a page or a particular section. <nav> groups links used to navigate the site or parts of the page. <main> marks the page’s primary content. <footer> holds footer content for the page or a section. [S1]

A useful first question for each region is: “What job does this content do?” A logo and introductory site content may belong in the page-level header; a set of links to other areas is navigation; the article someone came to read is main content; and closing information can go in a footer. The visual design may put these areas in different places, but appearance alone does not decide their meaning.

Here is a minimal starting point. Replace the bracketed notes with your own content; the notes are placeholders, not required wording.

<body>
  <header>
    <!-- Page-level introduction, such as a site name -->
  </header>

  <nav>
    <!-- Links for moving around the site or page -->
  </nav>

  <main>
    <article>
      <header>
        <!-- Introduction to this article -->
      </header>

      <!-- The article's primary content -->

      <footer>
        <!-- Footer content for this article -->
      </footer>
    </article>
  </main>

  <footer>
    <!-- Footer content for the page -->
  </footer>
</body>

Use a page-level <header> when its introductory content relates to the page as a whole. If a header introduces only an article or section, put it with that content instead. Apply the same relationship test to a footer: does it close or provide footer content for one section, or for the page? These elements can describe areas at different levels. [S1]

The skeleton is a planning aid, not a rule that every page must contain every region or nested arrangement shown.

No—first identify the purpose of each piece, then arrange it visually. A row of links used to reach site areas or sections is navigation, even if the design places it beside the article. A title and introduction might be a page header if they introduce the whole page, or an article header if they introduce only that article. The article’s primary content belongs in <main> as the page’s main content. [S1]

For example, if a page contains a site name, links to “Topics” and “About,” and an article titled “Choosing a page structure,” you could plan the site name as the page header, those links as navigation, and the article as the main content. The article title can be grouped with the article’s own introduction. That example illustrates the decision; it does not determine your design or the exact content your page needs.

Use this short sequence:

1. Identify the content the page is chiefly presenting; mark that area as <main>.
2. Find groups of links whose purpose is moving around the site or page; consider <nav> for those groups.
3. For introductory content, ask what it introduces: the whole page, or just a section or article? Choose the corresponding header context.
4. For closing or footer content, ask what it belongs to: the whole page, or a particular section or article?
5. Review your choices by meaning, not by whether the elements happen to look like a banner, bar, or box. Semantic elements express purpose rather than appearance. [S1]

This guide helps organize a document, but it does not establish that any particular visual layout is required. Decide the content relationships first, then implement the presentation to suit your design.