Andromeda
Note

HTML5 Structural Elements

Definition

Semantic sectioning elements introduced in HTML5 that identify major page regions—header, footer, navigation, main content, articles, sections, and asides—without relying on generic <div> containers.

Why It Matters

These tags (like <article> and <nav>) move the web away from generic containers toward a “meaningful” web where software can automatically identify the most important content on a page. This semantic clarity is what enables better screen readers, smarter news aggregators, and more efficient web scraping.

Core Concepts

<header>
  <h1>Site Logo</h1>
  <nav><ul><li>Home</li></ul></nav>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Content goes here.</p>
  </article>
</main>
<footer>
  <p>&copy; 2026</p>
</footer>
  • <main>: Primary unique content; one per page.
  • <header> / <footer>: Introductory or closing content for a page or section.
  • <nav>: Major navigation link groups.
  • <article>: Self-contained content (blog post, news item).
  • <section>: Thematic content group, usually with a heading.
  • <aside>: Tangentially related content (sidebar, pull quote).
  • <address>: Contact info for the nearest <article> or document author.

Connected Concepts

Connected notes