What is Semantic HTML?

Semantic HTML uses elements that describe their meaning, not just their appearance. Instead of <div class="header"> everywhere, use <header>, <nav>, <main>, and <article>.

Semantic markup tells browsers, search engines, and assistive technology what each section represents.

Why It Matters

  • Accessibility: Screen readers navigate by landmarks (<nav>, <main>, <header>)
  • SEO: Search engines weight content inside <main> and <article> more heavily
  • Maintainability: Code is self-documenting — new developers understand structure instantly
  • Default styling: Browsers apply sensible defaults; CSS builds on meaningful hooks

Document Outline Example 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav aria-label="Main navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Article Title</h2>
                <time datetime="2024-06-13">June 13, 2024</time>
            </header>
            <p>Article content goes here.</p>
            <footer>
                <p>Written by <address>Alice</address></p>
            </footer>
        </article>

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

    <footer>
        <p>&copy; 2024 My Blog</p>
    </footer>
</body>
</html>

Element Reference

Element Purpose
<header> Introductory content or navigation for a section/page
<nav> Block of navigation links
<main> Primary page content — one per page, not inside <article>
<article> Self-contained content (blog post, news item, comment)
<section> Thematic grouping with a heading
<aside> Tangentially related content (sidebar, pull quote)
<footer> Footer for nearest section or page
<figure> / <figcaption> Media with optional caption
<time datetime="..."> Machine-readable dates
<mark> Highlighted text
<details> / <summary> Expandable disclosure widget

<section> vs <div> vs <article>

  • <article>: Could be syndicated alone (RSS item, tweet, product card)
  • <section>: Thematic group that needs a heading; part of a larger whole
  • <div>: No semantic meaning — use when no other element fits
  <article>
    <h2>Product Review</h2>
    <section>
        <h3>Pros</h3>
        <ul>...</ul>
    </section>
    <section>
        <h3>Cons</h3>
        <ul>...</ul>
    </section>
</article>

Avoid Div Soup 

  <!-- Bad: meaningless wrappers -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>

<!-- Good: semantic landmarks -->
<header>...</header>
<nav>...</nav>
<main>...</main>

<div> is fine for styling hooks when no semantic element applies — but reach for semantic tags first.

Text-Level Semantics 

  <p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is maintained by the <cite>WHATWG</cite>.</p>
<p><strong>Warning:</strong> This action is <em>irreversible</em>.</p>
<p>Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.</p>
<p>Price: <data value="29.99">$29.99</data></p>
Element Use
<strong> Importance, urgency
<em> Stress emphasis
<abbr> Abbreviations with expansion
<code> Code snippets inline
<kbd> Keyboard input

Best Practices

  1. One <main> per page — skip link target for keyboard users
  2. Heading hierarchy — don’t skip levels (h1 → h3)
  3. Landmark labels — aria-label on <nav> when multiple exist
  4. Don’t replace semantics with ARIA — <button> beats <div role="button">

SEO Impact

Search engines use semantic structure to identify:

  • Page title (<title>, <h1>)
  • Main content (<main>, <article>)
  • Publication dates (<time datetime>)
  • Author info (<address>, structured data)

Troubleshooting

Screen reader skips my sidebar

  • Wrap sidebar in <aside>, not a generic <div>

Multiple <main> elements flagged

  • Only one <main> per document; nested <main> is invalid

Headings out of order in audit

  • Each <section> should start with an appropriate heading level

Semantic HTML is the first step toward accessible, professional, search-friendly web pages.