#Semantic HTML

<header>
    <a href="/" aria-label="Home">
        <img src="/logo.svg" alt="Company name" width="120" height="40">
    </a>
    <nav aria-label="Main">
        <ul>
            <li><a href="/products">Products</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

<nav aria-label="Main">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/docs">Docs</a></li>
        <li><a href="/blog">Blog</a></li>
    </ul>
</nav>

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/docs">Docs</a></li>
        <li aria-current="page">Semantic HTML</li>
    </ol>
</nav>

<body>
    <header><!-- site header --></header>
    <main>
        <h1>Semantic HTML Reference</h1>
        <p>Content goes here.</p>
    </main>
    <footer><!-- site footer --></footer>
</body>

<footer>
    <p>&copy; 2025 Luca Nerlich. All rights reserved.</p>
    <nav aria-label="Footer">
        <a href="/privacy">Privacy</a>
        <a href="/imprint">Imprint</a>
    </nav>
</footer>

<section aria-labelledby="features-heading">
    <h2 id="features-heading">Features</h2>
    <p>Our platform provides...</p>
</section>

<section aria-labelledby="pricing-heading">
    <h2 id="pricing-heading">Pricing</h2>
    <p>Choose the plan that fits...</p>
</section>

<article>
    <header>
        <h2>Understanding Semantic HTML</h2>
        <time datetime="2025-03-15">15 March 2025</time>
    </header>
    <p>Semantic HTML is the practice of using...</p>
    <footer>
        <p>Written by <a href="/authors/luca">Luca</a></p>
    </footer>
</article>

<main>
    <article>
        <h1>Building a REST API</h1>
        <p>Start by defining your resources...</p>

        <aside>
            <h2>Related reading</h2>
            <ul>
                <li><a href="/content-modeling">Content Modeling</a></li>
                <li><a href="/web-performance">Web Performance</a></li>
            </ul>
        </aside>
    </article>
</main>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <header>
        <nav aria-label="Main"><!-- main navigation --></nav>
    </header>

    <main>
        <article>
            <header>
                <h1>Article Title</h1>
                <time datetime="2025-03-15">15 March 2025</time>
            </header>

            <section>
                <h2>First Section</h2>
                <p>Content...</p>
            </section>

            <section>
                <h2>Second Section</h2>
                <p>Content...</p>
            </section>

            <aside>
                <h2>Related</h2>
                <ul><!-- related links --></ul>
            </aside>

            <footer>
                <p>Author info, tags</p>
            </footer>
        </article>
    </main>

    <aside>
        <!-- site-wide sidebar -->
    </aside>

    <footer>
        <p>&copy; 2025</p>
        <nav aria-label="Footer"><!-- footer links --></nav>
    </footer>
</body>
</html>

<h1>Page Title</h1>              <!-- one per page -->

<h2>Major Section</h2>
<h3>Subsection</h3>
<h3>Subsection</h3>

<h2>Another Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

<!-- Paragraph - the default block of text -->
<p>This is a paragraph of text.</p>

<!-- Line break - only for content where breaks matter (poems, addresses) -->
<address>
    123 Main Street<br>
    Springfield, IL 62701
</address>

<blockquote cite="https://www.w3.org/WAI/">
    <p>The power of the Web is in its universality. Access by everyone
    regardless of disability is an essential aspect.</p>
    <footer>-- <cite>Tim Berners-Lee</cite></footer>
</blockquote>

<figure>
    <img src="/chart.png" alt="Monthly revenue growth from January to June"
         width="800" height="400">
    <figcaption>Fig. 1: Revenue grew 23% from Q1 to Q2.</figcaption>
</figure>

<!-- Also works for code -->
<figure>
    <pre><code>const greeting = "Hello, world!";</code></pre>
    <figcaption>A simple JavaScript variable declaration.</figcaption>
</figure>

<!-- Inline code -->
<p>Run <code>npm install</code> to install dependencies.</p>

<!-- Block code -->
<pre><code>function greet(name) {
    return `Hello, ${name}!`;
}</code></pre>

<section>
    <h2>Chapter 1</h2>
    <p>Content...</p>
</section>

<hr>

<section>
    <h2>Chapter 2</h2>
    <p>Content...</p>
</section>

<time datetime="2025-03-15">15 March 2025</time>
<time datetime="14:30">2:30 PM</time>
<time datetime="2025-03-15T14:30:00+01:00">15 March 2025, 2:30 PM CET</time>
<time datetime="P3D">3 days</time>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ol>
    <li>Clone the repository</li>
    <li>Install dependencies</li>
    <li>Start the dev server</li>
</ol>

<!-- Start from a different number -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

<!-- Reversed -->
<ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - the standard language for web pages.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - controls the visual presentation of HTML.</dd>

    <dt>JavaScript</dt>
    <dd>A programming language for interactive web content.</dd>
</dl>

<table>
    <caption>Quarterly Revenue (in thousands)</caption>
    <thead>
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">Revenue</th>
            <th scope="col">Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1 2025</th>
            <td>$120</td>
            <td>+5%</td>
        </tr>
        <tr>
            <th scope="row">Q2 2025</th>
            <td>$148</td>
            <td>+23%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>$268</td>
            <td>--</td>
        </tr>
    </tfoot>
</table>

<form action="/subscribe" method="post">
    <fieldset>
        <legend>Newsletter Signup</legend>

        <div>
            <label for="email">Email address</label>
            <input type="email" id="email" name="email"
                   required autocomplete="email"
                   placeholder="[email protected]">
        </div>

        <div>
            <label for="name">Full name</label>
            <input type="text" id="name" name="name"
                   required autocomplete="name">
        </div>

        <button type="submit">Subscribe</button>
    </fieldset>
</form>

<fieldset>
    <legend>Shipping address</legend>
    <!-- address fields -->
</fieldset>

<fieldset>
    <legend>Billing address</legend>
    <!-- address fields -->
</fieldset>

<!-- Explicit association (preferred) -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- Implicit association (wrapping) -->
<label>
    Username
    <input type="text" name="username">
</label>

<label for="country">Country</label>
<select id="country" name="country">
    <option value="">-- Select --</option>
    <optgroup label="Europe">
        <option value="de">Germany</option>
        <option value="fr">France</option>
    </optgroup>
    <optgroup label="North America">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
    </optgroup>
</select>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"
          maxlength="1000" placeholder="Your message..."></textarea>

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <input type="number" id="a" name="a" value="0"> +
    <input type="number" id="b" name="b" value="0"> =
    <output name="result" for="a b">0</output>
</form>

<!-- Progress: task completion (uploading, loading) -->
<label for="upload">Upload progress:</label>
<progress id="upload" value="70" max="100">70%</progress>

<!-- Meter: scalar measurement within a known range -->
<label for="disk">Disk usage:</label>
<meter id="disk" value="0.7" min="0" max="1"
       low="0.3" high="0.8" optimum="0.1">70%</meter>

<details>
    <summary>System requirements</summary>
    <ul>
        <li>Node.js 18+</li>
        <li>npm 9+</li>
        <li>Git 2.30+</li>
    </ul>
</details>

<!-- Open by default -->
<details open>
    <summary>Quick start</summary>
    <pre><code>npm create next-app@latest</code></pre>
</details>

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

<button onclick="document.getElementById('confirm-dialog').showModal()">
    Delete item
</button>

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="Description of the image"
         width="800" height="600" loading="lazy">
</picture>

<video controls width="720" height="480" preload="metadata"
       poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track kind="captions" src="captions-en.vtt"
           srclang="en" label="English" default>
    <p>Your browser does not support HTML video.
       <a href="video.mp4">Download the video</a>.</p>
</video>

<audio controls preload="metadata">
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
    <p>Your browser does not support HTML audio.
       <a href="podcast.mp3">Download the episode</a>.</p>
</audio>

<address>
    <a href="mailto:[email protected]">[email protected]</a><br>
    <a href="https://github.com/LucaNerlich">GitHub</a>
</address>

<template id="card-template">
    <article class="card">
        <h3></h3>
        <p></p>
    </article>
</template>

<script>
const template = document.getElementById('card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('h3').textContent = 'Card Title';
clone.querySelector('p').textContent = 'Card description.';
document.body.appendChild(clone);
</script>

<img src="floor-plan.png" alt="Office floor plan"
     usemap="#office" width="600" height="400">
<map name="office">
    <area shape="rect" coords="0,0,200,200"
          href="/rooms/meeting" alt="Meeting room">
    <area shape="circle" coords="400,300,50"
          href="/rooms/kitchen" alt="Kitchen">
</map>

<!-- Bad: divs everywhere, no meaning -->
<div class="header">
    <div class="nav">
        <div class="nav-item"><a href="/">Home</a></div>
    </div>
</div>
<div class="main">
    <div class="article">
        <div class="title">My Post</div>
    </div>
</div>

<!-- Good: semantic elements -->
<header>
    <nav aria-label="Main">
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h1>My Post</h1>
    </article>
</main>