HTML Semantic Elements

<!-- ❌ Non-semantic (old way) — no meaning -->
<div class="header">
    <div class="nav">
        <div class="link">Home</div>
        <div class="link">About</div>
    </div>
</div>
<div class="main">
    <div class="article">
        <div class="title">My Post</div>
        <div class="text">Content...</div>
    </div>
</div>
<div class="footer">© 2024</div>

<!-- ✅ Semantic (modern way) — clear meaning -->
<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>
<main>
    <article>
        <h1>My Post</h1>
        <p>Content...</p>
    </article>
</main>
<footer>© 2024</footer>

<!-- Page layout -->
<header>     <!-- Introductory content or navigation -->
<nav>        <!-- Navigation links -->
<main>       <!-- Main content (one per page) -->
<article>    <!-- Self-contained content (blog post, news) -->
<section>    <!-- Thematic grouping of content -->
<aside>      <!-- Sidebar or tangential content -->
<footer>     <!-- Footer information -->

<!-- Full page structure -->
<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <article>
            <header>
                <h1>Article Title</h1>
                <time datetime="2024-01-15">January 15, 2024</time>
            </header>

            <section>
                <h2>Introduction</h2>
                <p>...</p>
            </section>

            <section>
                <h2>Main Content</h2>
                <p>...</p>
            </section>

            <footer>
                <p>Written by Alice</p>
            </footer>
        </article>

        <aside>
            <h3>Related Articles</h3>
            <ul>
                <li><a href="#">Related Post 1</a></li>
                <li><a href="#">Related Post 2</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>

<!-- These describe the PURPOSE of text, not its appearance -->

<strong>Important</strong>    <!-- Strong importance (bold) -->
<em>Emphasized</em>           <!-- Emphasis (italic) -->
<mark>Highlighted</mark>      <!-- Relevance/highlighting -->
<small>Small print</small>    <!-- Side comments, legal text -->
<del>Deleted</del>            <!-- Removed content -->
<ins>Inserted</ins>           <!-- Added content -->
<sub>Subscript</sub>          <!-- H₂O -->
<sup>Superscript</sup>        <!-- x² -->
<code>Code</code>             <!-- Computer code -->
<abbr title="...">HTML</abbr> <!-- Abbreviation -->
<time datetime="2024-01-15">Jan 15</time>  <!-- Date/time -->
<cite>Title</cite>            <!-- Title of a work -->
<q>Quote</q>                  <!-- Inline quote -->
<blockquote>Blockquote</blockquote>  <!-- Block quote -->
<figure>                      <!-- Self-contained figure -->
    <img src="chart.png" alt="Chart">
    <figcaption>Sales Chart</figcaption>
</figure>

<!-- Screen readers understand semantic elements -->
<!-- They announce: "Navigation landmark" for <nav> -->
<!-- They announce: "Main landmark" for <main> -->
<!-- They announce: "Article" for <article> -->

<!-- With divs, screen readers see no landmarks -->
<div class="nav">...</div>  <!-- Screen reader: just a div -->

<!-- With semantic HTML -->
<nav>...</nav>              <!-- Screen reader: "Navigation" -->
<main>...</main>            <!-- Screen reader: "Main content" -->