Semantic Layout Elements

Structure pages with <header>, <footer>, <nav>, <main>, and <aside>.

Overview

HTML5 introduced semantic layout elements that replace meaningless <div id="header"> patterns with elements whose names describe their purpose. These elements help search engines understand your page structure, assist screen reader users in navigating the page, and make your code more readable. The key page-level semantic elements are: - <header>: site or section header (logo, site title, primary navigation) - <nav>: navigation links - <main>: the primary content of the page (only one per page) - <aside>: tangentially related content (sidebars, pull quotes, ads) - <footer>: site or section footer (copyright, links, contact info)

Key Points

•<header> contains introductory content logo, site name, primary nav. Can appear multiple times (once per section/article)
•<nav> wraps the primary or secondary navigation links
•<main> wraps the dominant content of the page body only one <main> per page
•<aside> contains content tangentially related to surrounding content sidebars, callouts
•<footer> contains footer information typically appears at the bottom of the page or section
•These elements replace meaningless <div id="header"> and <div class="nav"> patterns

Examples

Standard page layout with semantic elements

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>Latest Posts</h2>
    <p>Main content here...</p>
  </main>

  <aside>
    <h3>Popular Posts</h3>
    <ul>...</ul>
  </aside>

  <footer>
    <p>&copy; 2024 My Blog. All rights reserved.</p>
  </footer>
</body>

Semantic elements within sections

<!-- header and footer can appear inside article too -->
<article>
  <header>
    <h2>Article Title</h2>
    <p>Published: <time datetime="2024-06-01">June 1, 2024</time></p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: <a href="#">HTML</a>, <a href="#">CSS</a></p>
  </footer>
</article>

Common Mistakes

Using multiple <main> elements only one is allowed per page
Using <header> only at the page level it can also be used inside sections and articles
Nesting <main> inside <aside> or vice versa they're siblings, not parents/children

Note

Think of these like a newspaper: header = masthead, nav = section tabs, main = front page stories, aside = side column, footer = bottom of the page. Each element describes what role it plays.

Semantic Layout Elements

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

How many <main> elements can a page have?