Semantic HTML

Semantic HTML means using elements that clearly describe their meaning to the browser and developer. Instead of using generic <div> for everything, semantic elements describe the role each section plays on the page.

<body>
  <!-- Site-wide header: logo, navigation -->
  <header>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
  </header>

  <!-- Primary page content -->
  <main>
    <!-- Self-contained content (blog post, news article) -->
    <article>
      <h1>Article Title</h1>
      <time datetime="2025-05-28">May 28, 2025</time>
      <p>Article intro...</p>

      <!-- Thematic group within an article or page -->
      <section>
        <h2>Section Heading</h2>
        <p>Section content...</p>
      </section>
    </article>

    <!-- Tangentially related content (sidebars, callouts) -->
    <aside>
      <h2>Related Articles</h2>
      <ul>
        <li><a href="#">Link 1</a></li>
      </ul>
    </aside>
  </main>

  <!-- Site-wide footer -->
  <footer>
    <p>&copy; 2025 My Website. All rights reserved.</p>
  </footer>
</body>

💡

Semantic HTML improves SEO (search engines understand structure), Accessibility (screen readers navigate by landmarks), and Maintainability (code is self-documenting).

Semantic elements quick reference:

<header> — Site or section header
<nav> — Navigation links
<main> — Primary page content (one per page)
<article> — Self-contained, redistributable content
<section> — Thematic group of content with a heading
<aside> — Tangentially related content
<footer> — Site or section footer
<figure> / <figcaption> — Images, diagrams with captions
<time> — Dates and times with machine-readable datetime
<mark> — Highlighted/relevant text

Watch & Learn

A recommended video to watch alongside this chapter.

More “Semantic HTML” videos on YouTube

Practice Problems

HTML Forms