Day 8: Semantic HTML

What You'll Learn Today

What semantic HTML is and why it matters
Page structure elements
Content semantic elements
Accessibility fundamentals

What Is Semantic HTML?

"Semantic" means "relating to meaning." Semantic HTML uses elements that accurately describe the purpose and role of their content.

flowchart LR
    subgraph NonSemantic["❌ Non-Semantic"]
        D1["&lt;div class='header'&gt;"]
        D2["&lt;div class='nav'&gt;"]
        D3["&lt;div class='content'&gt;"]
    end
    subgraph Semantic["✅ Semantic"]
        S1["&lt;header&gt;"]
        S2["&lt;nav&gt;"]
        S3["&lt;main&gt;"]
    end
    style NonSemantic fill:#ef4444,color:#fff
    style Semantic fill:#22c55e,color:#fff

Why Semantic HTML Matters

Benefit	Description
Accessibility	Screen readers understand page structure
SEO	Search engines determine content importance
Maintainability	Code is easier to read and understand
Consistency	Standard structure across pages

Page Structure Elements

flowchart TB
    subgraph Page["Web Page Structure"]
        Header["&lt;header&gt;<br>Logo, site name"]
        Nav["&lt;nav&gt;<br>Navigation"]
        Main["&lt;main&gt;<br>Main content"]
        Article["&lt;article&gt;<br>Articles"]
        Aside["&lt;aside&gt;<br>Sidebar"]
        Footer["&lt;footer&gt;<br>Footer"]
    end
    Header --> Nav
    Nav --> Main
    Main --> Article
    Main --> Aside
    Article --> Footer
    style Header fill:#3b82f6,color:#fff
    style Nav fill:#8b5cf6,color:#fff
    style Main fill:#22c55e,color:#fff
    style Article fill:#f59e0b,color:#fff
    style Aside fill:#f59e0b,color:#fff
    style Footer fill:#ef4444,color:#fff

`<header>`

<header>
    <h1>Site Name</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

`<nav>`

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

`<main>`

The page's primary content. Use only once per page.

`<footer>`

<footer>
    <p>&copy; 2026 Site Name. All rights reserved.</p>
    <nav aria-label="Footer navigation">
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
    </nav>
</footer>

Content Semantic Elements

`<article>`

Self-contained content that makes sense independently.

<article>
    <header>
        <h2>The Importance of Semantic HTML</h2>
        <p><time datetime="2026-01-29">January 29, 2026</time></p>
    </header>
    <p>Using semantic HTML improves both accessibility and SEO...</p>
    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>

`<section>`

A thematic grouping of content.

`<aside>`

Related but independent content (sidebars, related links).

Choosing Between article / section / div

flowchart TB
    Q1{"Makes sense<br>on its own?"}
    Q2{"Has a theme?"}
    Q3["&lt;div&gt;<br>Generic container"]
    A["&lt;article&gt;"]
    S["&lt;section&gt;"]
    Q1 -->|"Yes"| A
    Q1 -->|"No"| Q2
    Q2 -->|"Yes"| S
    Q2 -->|"No"| Q3
    style A fill:#22c55e,color:#fff
    style S fill:#3b82f6,color:#fff
    style Q3 fill:#f59e0b,color:#fff

Time and Dates

<p>Published: <time datetime="2026-01-29">January 29, 2026</time></p>
<p>Meeting: <time datetime="2026-02-01T14:00">Feb 1 at 2:00 PM</time></p>
<p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>

`<details>` and `<summary>`

Collapsible content without JavaScript.

<details>
    <summary>FAQ: What is HTML?</summary>
    <p>HTML (HyperText Markup Language) is the standard language
    for creating web pages.</p>
</details>

<details open>
    <summary>Open by default</summary>
    <p>The open attribute makes it start expanded.</p>
</details>

`<dialog>` Element

<dialog id="myDialog">
    <h2>Confirm</h2>
    <p>Are you sure you want to delete?</p>
    <form method="dialog">
        <button value="cancel">Cancel</button>
        <button value="confirm">Delete</button>
    </form>
</dialog>

Accessibility Basics

ARIA Attributes

<nav aria-label="Main menu">...</nav>
<button aria-expanded="false">Open menu</button>
<div role="alert">An error has occurred.</div>

Attribute	Purpose
`aria-label`	Descriptive label
`aria-expanded`	Expansion state
`aria-hidden`	Hide from assistive tech
`role`	Element's role

Principle: Use proper HTML elements first. Only add ARIA when native semantics are insufficient ("No ARIA is better than bad ARIA").

Practice: Blog Homepage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Tech Blog</title>
</head>
<body>
    <header>
        <h1>My Tech Blog</h1>
        <nav aria-label="Main navigation">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Latest Posts</h2>

            <article>
                <header>
                    <h3><a href="/blog/semantic-html">The Importance of Semantic HTML</a></h3>
                    <p><time datetime="2026-01-29">January 29, 2026</time></p>
                </header>
                <p>Using semantic HTML improves both accessibility and SEO...</p>
                <footer>
                    <p>Tags: HTML, Accessibility</p>
                </footer>
            </article>

            <article>
                <header>
                    <h3><a href="/blog/css-grid">Layouts with CSS Grid</a></h3>
                    <p><time datetime="2026-01-28">January 28, 2026</time></p>
                </header>
                <p>CSS Grid makes complex layouts straightforward...</p>
                <footer>
                    <p>Tags: CSS, Layout</p>
                </footer>
            </article>
        </section>

        <aside>
            <h2>About Me</h2>
            <p>Sharing what I learn about web technologies.</p>

            <h2>Categories</h2>
            <ul>
                <li><a href="/tag/html">HTML</a></li>
                <li><a href="/tag/css">CSS</a></li>
                <li><a href="/tag/javascript">JavaScript</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 My Tech Blog. All rights reserved.</p>
        <nav aria-label="Footer navigation">
            <a href="/privacy">Privacy</a> |
            <a href="/terms">Terms</a>
        </nav>
    </footer>
</body>
</html>

Summary

Element	Purpose
`<header>`	Header area
`<nav>`	Navigation links
`<main>`	Main content (one per page)
`<article>`	Self-contained content
`<section>`	Thematic group
`<aside>`	Supplementary content
`<footer>`	Footer area
`<time>`	Date/time information
`<details>` / `<summary>`	Collapsible content

Key Takeaways

Use semantic elements instead of <div>
<main> is used only once per page
Use <article> for content that stands alone
ARIA is a last resort

Exercises

Exercise 1: Basic

Create a page using <header>, <main>, and <footer>.

Exercise 2: Intermediate

Build a blog homepage with 3+ <article> elements and an <aside>.

Challenge

Create a FAQ page using <details> and <summary> with 5+ questions and proper semantic markup.

References

Next up: In Day 9, you'll learn "HTML Best Practices"—SEO, performance, and metadata.