HTML5 Semantic Elements

📚 Lesson 12 of 25  •  ⏱ 11 min read  •  Intermediate

What is Semantic HTML?

Semantic elements have meaningful names that describe their purpose. Compare:

HTML 
<!-- Non-semantic: div says nothing about its purpose -->
<div id="nav">...</div>
<div id="content">...</div>
<div id="footer">...</div>

<!-- Semantic: self-explaining -->
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Semantic HTML helps Google understand your page and improves accessibility for screen readers.

Complete Page Layout with Semantic Elements

HTML 
<body>

  <header>           <!-- site logo, top nav -->
    <nav>
      <a href="/">Home</a>
      <a href="/courses">Courses</a>
    </nav>
  </header>

  <main>             <!-- unique page content, one per page -->

    <section>         <!-- thematic group of content -->
      <h2>Featured Courses</h2>
      <article>...</article>  <!-- self-contained content -->
      <article>...</article>
    </section>

    <aside>            <!-- sidebar, related links -->
      <h3>Quick Links</h3>
    </aside>

  </main>

  <footer>           <!-- copyright, footer nav -->
    <p>&copy; 2026 AnnaUniversityPlus</p>
  </footer>

</body>

Quick Reference

Reference 
<header>   — Site header (logo, main nav). Can appear inside <article> too.
<nav>      — Navigation links. Use for main menus and breadcrumbs.
<main>     — The primary content. Only ONE per page. Never nest inside other semantic elements.
<section>  — Thematic grouping with a heading. Don't use just for styling.
<article>  — Self-contained: blog post, course card, news item, comment.
<aside>    — Tangentially related: sidebar, pull quotes, related links.
<footer>   — Bottom of site or section. Copyright, contact, secondary nav.
<figure>   — Image + caption group.
<figcaption> — Caption for a <figure>.
<time>     — Machine-readable date/time: <time datetime="2026-06-25">Today</time>
<address>  — Contact info for the nearest <article> or <body>.

section vs article vs div

← Tables Next: Forms & Input →