Semantic HTML Deep Dive

What you'll learn

Use header, nav, main, section, article, aside, footer correctly

Structure proper heading hierarchy (h1-h6) for document outlines

Apply figure, figcaption, time, address for rich semantics

Understand landmark roles and browser/AT implications

Recognize SEO benefits of semantic HTML

Replace div soup with meaningful elements

The Semantic Layout

Semantic elements describe their content meaning, not just appearance.

<body>
  <header>
    <nav aria-label="Main">
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Article Title</h1>
        <time datetime="2026-07-11">July 11, 2026</time>
      </header>
      <p>Article content...</p>
      <section aria-labelledby="comments-heading">
        <h2 id="comments-heading">Comments</h2>
        <!-- comments -->
      </section>
    </article>

    <aside>
      <h2>Related Posts</h2>
      <!-- related links -->
    </aside>
  </main>

  <footer>
    <address>
      Contact: <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>

Landmark Roles Browsers Derive

Element	Implicit Role	Purpose
`<header>`	`banner` (when not nested in article/section)	Site header
`<nav>`	`navigation`	Navigation links
`<main>`	`main`	Primary content (one per page)
`<section>`	`region` (when has accessible name)	Thematic group
`<article>`	`article`	Self-contained composition
`<aside>`	`complementary`	Related content
`<footer>`	`contentinfo` (when not nested)	Site footer

Figure & Figcaption

<figure>
  <img src="diagram.png" alt="Flowchart showing login process" />
  <figcaption>Figure 1: Login process workflow</figcaption>
</figure>

Proper Heading Hierarchy

<!-- Good: hierarchical, no gaps -->
<h1>Site Title</h1>
<h2>Latest Articles</h2>
<h3>Article Title</h3>
<h4>Section Within Article</h4>

<!-- Bad: skips levels -->
<h1>Site Title</h1>
<h4>Section</h4>
<!-- skipped h2, h3 -->

<!-- Bad: uses divs styled as headings -->
<div class="heading-large">Section</div>

One h1 Per Page

Use a single <h1> for the page title. Nest headings sequentially (h1 → h2 → h3). Screen reader users navigate by heading level — gaps break the expected structure.

Semantic HTML vs Div Soup

SEO Benefits

Semantic HTML signals content hierarchy to search engines:

<article> tells Google this is self-contained content (blog post, news story)
<time> with datetime enables rich snippet dates
<header>, <main>, <footer> define page structure for featured snippets
Proper heading hierarchy improves keyword relevance signals
<nav> identifies primary navigation for crawl prioritization

Refactor Div-Heavy Page to Semantic HTML

Code

html

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<title>Semantic HTML Demo</title>6</head>7<body>8<header>9  <nav>10    <a href="/">Home</a>11    <a href="/tutorials">Tutorials</a>12    <a href="/contact">Contact</a>13  </nav>14</header>15 16<main>17  <article>18    <h1>Understanding Semantic HTML</h1>19    <p>Semantic elements describe meaning, not appearance. They help screen readers, search engines, and developers understand page structure.</p>20  </article>21 22  <aside>23    <h2>Related Topics</h2>24    <ul>25      <li>Accessibility Basics</li>26      <li>ARIA Roles</li>27    </ul>28  </aside>29 30</main>31</div>32<div class="content-area">33  <div class="post">34    <div class="post-title">Learning Semantic HTML</div>35    <div class="post-date">Published: Today</div>36    <div class="post-body">37      <p>Semantic HTML uses elements that describe their meaning.</p>38    </div>39  </div>40  <div class="sidebar">41    <div class="sidebar-title">Related Articles</div>42    <div class="sidebar-link">CSS Grid Guide</div>43  </div>44</div>45<div class="bottom-bar">46  <div>© 2026 My Site</div>47</div>48</div>

Key Takeaways

Semantic elements describe meaning, not just appearance

Each landmark role has a specific purpose — use elements correctly

Maintain logical heading hierarchy (h1 → h2 → h3, no skipping)

Use figure + figcaption for self-contained media with captions

Semantic HTML improves SEO with better content signals

Replace div soup with header, nav, main, article, aside, footer