Semantic HTML Elements: Complete Guide

Semantic HTML Elements

Semantic HTML uses elements that convey meaning about the content they contain, rather than just its appearance. Introduced in HTML5, semantic elements replaced the widespread pattern of using <div> elements with class names to define page structure.

Core Structural Elements

Element	Purpose
<header>	Introductory content, navigation aids, logos
<nav>	Major navigation blocks
<main>	Dominant content of the page
<article>	Self-contained, distributable content
<section>	Thematic grouping with a heading
<aside>	Tangentially related content
<footer>	Author info, copyright, related links

Why Semantic HTML Matters

1. Accessibility — Screen readers use semantic landmarks to help users navigate. A <nav> element is announced as "navigation" automatically.
2. SEO — Search engines use semantic structure to understand content hierarchy and importance.
3. Maintainability — Code is self-documenting when elements describe their purpose.
4. Consistent styling — Browsers apply default styles that match semantic intent.

Example: Semantic Page Layout

<header>
  <h1>My Website</h1>
  <nav aria-label="Main">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>Article content...</p>
  </article>

  <aside>
    <h3>Related Posts</h3>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

Common Mistakes

• Using <section> without a heading — every section should have a heading element
• Nesting <main> inside <article>, <aside>, <header>, <nav>, or <footer>
• Using <article> for non-self-contained content
• Using <nav> for every link group — reserve it for major navigation blocks