Semantic HTML5

🌐 HTML5 🟢 Chapter 14 of 37 📂 Phase 06: Semantic HTML5 📅 2026 Edition

📌 Covered in this chapter: Semantic vs Non-semantic · <header> <nav> <main> <section> <article> <aside> <footer> · <details> & <summary> Accordion · SEO & Accessibility Benefits

Welcome to Phase 6 (Chapter 14): Semantic HTML5! Semantic HTML uses tags that clearly describe their meaning to both browsers and developers. In this chapter, we master semantic layout tags (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>), accordions with <details>, and SEO/a11y advantages over generic <div> containers.

1Semantic Layout Architecture

HTML — Semantic Page Layout ▶ Run in HTML Editor

<header>
  <h1>Our Compiler Tech Blog</h1>
</header>

<nav aria-label="Primary Navigation">
  <a href="/">Home</a> | <a href="/tutorials">Tutorials</a>
</nav>

<main>
  <article>
    <h2>HTML5 Semantic Guide</h2>
    <p>Learn semantic layout best practices.</p>
  </article>
  
  <aside>
    <h3>Related Lessons</h3>
    <p>CSS Grid & Flexbox</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Our Compiler</p>
</footer>

❓ Frequently Asked Questions (FAQ)

Q1: Difference between <article> and <section>?

An <article> represents a self-contained content piece that makes sense on its own (e.g. blog post, news story, comment). A <section> represents a thematic grouping of content inside a document.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026