HTML Page Layout Elements: header, nav, main, section, article, aside and footer

Most web pages share the same parts: a header with a logo and menu, the main content, perhaps a sidebar, and a footer. HTML has an element for each part. They do not change how the page looks (they are plain blocks), but they describe its structure.

The layout elements#

A complete page#

Each part has a light border here so you can see the structure:

<style>
  header, nav, main, article, section, aside, footer {
    border: 1px dashed #888; padding: 4px 10px; margin: 6px 0;
  }
</style>

<header>
  <strong>Laviyx Kitchen</strong>
  <nav>
    <a href="/">Home</a> |
    <a href="/recipes">Recipes</a> |
    <a href="/contact">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h1>Easy Lemon Rice</h1>
    <p>Published <time datetime="2026-10-20">20 October 2026</time></p>

    <section>
      <h2>Ingredients</h2>
      <ul><li>Cooked rice</li><li>Lemon</li><li>Peanuts</li></ul>
    </section>

    <section>
      <h2>Method</h2>
      <p>Fry the peanuts, add turmeric, mix in the rice and lemon juice.</p>
    </section>

    <footer>Recipe by Asha</footer>
  </article>

  <aside>
    <h2>You may also like</h2>
    <a href="/recipes/tomato-rice">Tomato rice</a>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Laviyx Kitchen</p>
</footer>

With CSS (for example Grid), the <aside> can be placed beside the article as a sidebar. The HTML stays the same.

Landmarks#

Several of these elements create landmarks that screen readers can list and jump between:

A screen reader user can press a key to go straight to main and skip the header and menu. This is one of the biggest accessibility wins in HTML, and it costs nothing.

section or article?#

Ask: would this make sense on its own, for example in an RSS feed or shared on another site?

• Yes → <article>: a blog post, a news story, a product, a user comment.
• No, it is part of something bigger → <section>: "Ingredients", "Pricing", "Chapter 2".
• It is just for styling → <div>.

Articles can contain sections and sections can contain articles; for example, a "Latest posts" section containing several articles.

Rules to remember#

• Use one visible <main> per page, and do not put it inside <header>, <nav>, <article>, <aside> or <footer>.
• A <header> or <footer> can belong to the page or to an article or section, depending on where it is placed.
• Not every group of links needs <nav>; use it for major navigation blocks such as the main menu, a table of contents or pagination.
• Give each <section> a heading.

Practice#

<header>
  <h1>Asha Rao</h1>
  <nav>
    <a href="#projects">Projects</a> |
    <a href="#contact">Contact</a>
  </nav>
</header>

<main>
  <section>
    <h2>About me</h2>
    <p>I am a web developer who enjoys building fast, accessible sites.</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <article>
      <h3>Recipe finder</h3>
      <p>Search recipes by the ingredients you have at home.</p>
    </article>
    <article>
      <h3>Expense tracker</h3>
      <p>Track daily spending and see monthly totals.</p>
    </article>
  </section>
</main>

<footer id="contact">
  <p>&copy; 2026 Asha Rao &middot; <a href="mailto:asha@example.com">asha@example.com</a></p>
</footer>

Key takeaway#