Page Structure Elements in HTML

From the HTML cheat sheet · Semantic HTML5 Elements · verified Jul 2026

Page Structure Elements

Main structural elements for page layout

css
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
  
  <aside>
    <h2>Related Links</h2>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p>&copy; 2024 Company Name</p>
</footer>
html
<body>
  <header>Site Header</header>
  <nav>Navigation</nav>
  <main>
    <article>Main Content</article>
    <aside>Sidebar</aside>
  </main>
  <footer>Site Footer</footer>
</body>
🟢 Essential - Semantic HTML improves SEO and accessibility
💡 main element should be unique per page
📌 header/footer can be used in articles too
⚡ Screen readers use these for navigation
🔗 Related: ARIA roles for enhanced accessibility
semanticstructureaccessibility

More HTML tasks

Back to the full HTML cheat sheet