semantic HTML

Semantic HTML — Live Demos

5 interactive examples

Element Chooser — answer 3 questions, get the right element

The most common semantic HTML question answered with a decision flowchart. Answer each question to find out which element fits your content.

Could this content be lifted from the page and published independently on another site, in an RSS feed, or as a standalone email — and still make complete sense?
<article>
Self-contained, independently distributable content.
Blog posts · news articles · product cards · comments · reviews · recipes · widgets
<article> <h2>How to learn HTML</h2> <p>Published March 15, 2026…</p> </article>
<section>
Thematic group of content — always needs a heading.
Chapters · steps in a how-to · tab panels · subsections of an article
<section aria-labelledby="chapter-1"> <h2 id="chapter-1">Chapter 1</h2> <p>…</p> </section>
<aside>
Supplementary content related but not essential to main.
Sidebars · pull quotes · related links · ads · author bios · glossary terms
<aside aria-label="Related articles"> <h2>You might also like</h2> <ul>…</ul> </aside>
<div>
Layout container with no semantic meaning.
CSS wrappers · flex containers · grid cells · JS hook targets · styling groups
<div class="hero-layout"> <!-- flex/grid container, no semantic role --> </div>

Seven elements almost everyone uses wrong

These are the semantic mistakes hiding in nearly every codebase. Click a tab to see the wrong usage, the correct usage, and why it matters.

❌ Wrong — postal address in <address>
<address> Acme Corp
123 Main Street
Springfield, IL 62701 </address> // address is NOT for // physical/postal addresses
✅ Correct — author contact info
<article> <h1>My article</h1> <address> By <a href="/authors/jane"> Jane Doe </a> · <a href="mailto:j@…"> [email protected] </a> </address> </article>
💡 The rule: <address> = contact info for the nearest <article> author, or the site owner in the page <footer>. For postal addresses, use <p> with Schema.org markup.
❌ Wrong — author name in <cite>
<blockquote> "Be the change…" — <cite>Gandhi</cite> </blockquote> // Author names go in // cite — WRONG per spec
✅ Correct — title of work in <cite>
<p>As discussed in <cite>The Elements of Style</cite> by Strunk & White… </p> <p>Published in <cite>Nature</cite>, Vol. 580. </p>
💡 The rule: <cite> wraps the title of a creative work (book, article, film, song). Never the author's name. "Shakespeare wrote <cite>Hamlet</cite>" ✅ — "<cite>Shakespeare</cite>" ❌
❌ Wrong — visual emphasis only
// Author italicizes a foreign // phrase with <em> — wrong: // <em> adds vocal stress on // screen readers. <p>The French call this <em>je ne sais quoi</em>. </p> // Product names get <strong> // for visual bold — wrong: // <strong> means urgency. <p>We tested the <strong>RX-500</strong>. </p>
✅ Correct — match meaning to element
// <i> for foreign / taxonomic / // ship / film names — no extra // vocal stress. <p>The French call this <i>je ne sais quoi</i>. </p> // <b> for keywords / product // names — no urgency. <p>We tested the <b>RX-500</b>. </p> // <em>: stress that changes // sentence meaning. <p>I <em>did</em> finish it.</p> // <strong>: serious warning. <p><strong>Warning:</strong> cannot be undone.</p>
💡 The two-question test: Does the emphasis change the sentence's meaning or warn the reader? → <em> / <strong>. Is it just a typographic offset (foreign word, name, keyword)? → <i> / <b>. Screen readers vocally stress <em>/<strong> but read <i>/<b> as plain text.
❌ Wrong — every link list in <nav>
<nav> <a href="/twitter">Twitter</a> <a href="/github">GitHub</a> </nav> <nav> <a href="/html">HTML</a> <a href="/css">CSS</a> </nav> // Social + tag links — not nav
✅ Correct — nav for primary navigation
<nav aria-label="Primary"> <a href="/">Home</a> <a href="/blog">Blog</a> </nav> // Social links: use ul, not nav <ul aria-label="Social"> <li><a href="/tw">Twitter</a> <li><a href="/gh">GitHub</a> </ul>
💡 The rule: <nav> for Primary, Secondary, Breadcrumb, and Table-of-contents navigation only. Tag clouds, social links, and footer legal links → use <ul> instead.
❌ Wrong — figure for decorative image
<figure> <img src="logo.png" alt="Logo"> </figure> <figure> <img src="avatar.jpg" alt="Profile"> </figure> // Logo + avatar don't // move to appendix — wrong
✅ Correct — figure for code / quote / chart
<figure> <figcaption> Pattern: debounce + AbortController </figcaption> <pre><code>…</code></pre> </figure> <figure> <blockquote><p>Quote…</p></blockquote> <figcaption>— Author Name</figcaption> </figure>
💡 The test: Could this move to an appendix without the text losing meaning? Yes → <figure>. No → plain <img> or <pre>. <figure> works for: images with captions, code examples, charts, tables, blockquotes, audio, video.
❌ Wrong — treating as page-only elements
// Most devs think <header> and // <footer> are page-level ONLY <body> <header>Site header</header> <article> <div class="post-header"> <!-- forced to use div --> </div> </article> <footer>Site footer</footer> </body>
✅ Correct — scoped inside article
<article> <header> <h1>Article title</h1> <p>By Jane · <time datetime="2026-03-15"> March 15 </time> </p> </header> <p>Article content…</p> <footer> <p>Tags: HTML, Semantics</p> </footer> </article>
💡 <header> and <footer> inside an <article> are scoped to that article. The page <header> still wraps the site chrome. Both elements can appear multiple times on a page — once at page level, once inside each article.
❌ Wrong — <small> as a CSS font-size hack
// Author wants smaller text // and reaches for <small>. // That's the wrong tool. <p>This sentence has <small>a small word</small> in the middle. </p> // If you just want smaller // text, use CSS: // font-size: 0.8em;
✅ Correct — <small> for fine print
// Copyright / legal notes. <footer> <small>© 2026 MySite. All rights reserved. Prices exclude VAT.</small> </footer> // Source attribution. <figure> <blockquote>"…"</blockquote> <figcaption>— <cite>Atomic Habits</cite> <small>(James Clear, 2018)</small> </figcaption> </figure> // Disclaimers, footnotes, // license notes.
💡 The rule: <small> means "side comments and small print" per spec — copyright lines, disclaimers, legal text, attributions. If you just want smaller text, use CSS font-size. If you're marking up legal fine print, <small> is the right element.
--:--:--Click the element tabs above to explore each misuse pattern

Heading hierarchy visualizer

Build a heading structure by clicking the buttons. The outline updates in real time. Invalid heading jumps (e.g. h1 → h3) are flagged in red. One h1 per page — the document outline algorithm was never implemented by browsers.

--:--:--Click heading buttons to build a document outline — errors are flagged in red

The document outline algorithm — why it never mattered

HTML5 introduced a sectioning algorithm allowing multiple <h1> elements. No browser or screen reader ever implemented it. The W3C confirmed this in 2013 and again in 2019. Always use one <h1> and nest h2–h6 below it.

✅ Works in all browsers ✅ Works with all screen readers ✅ Correct heading hierarchy <h1>Page title</h1> <h2>Section one</h2> <h3>Subsection</h3> <h2>Section two</h2>
❌ Based on a broken spec ❌ No browser implemented it ❌ Confuses screen readers <article> <h1>Post 1</h1> ← multiple h1 </article> <article> <h1>Post 2</h1> ← never correct </article>

Thirteen semantic elements you're probably not using — but should

Click any element to see what it does, when to use it, and a working code example.

--:--:--Click any element card to see details and usage

Semantically correct page templates

Real-world HTML templates showing correct semantic structure for the three most common page types. Copy and adapt for your projects.

<!-- Blog post template --> <header> <a href="/" aria-label="MySite home"><img src="logo.svg" alt="MySite"></a> <nav aria-label="Primary"> <a href="/">Home</a><a href="/blog">Blog</a><a href="/about">About</a> </nav> </header> <nav aria-label="Breadcrumb"> <ol> <li><a href="/">Home</a></li> <li><a href="/blog">Blog</a></li> <li><a aria-current="page">Post title</a></li> </ol> </nav> <main> <article> <header> <hgroup> <h1>How to Write Semantic HTML</h1> <p>A deep dive into every element and when to use it</p> </hgroup> <p> By <a href="/authors/jane" rel="author">Jane Doe</a> · Published <time datetime="2026-06-03">June 3, 2026</time> · <time datetime="PT10M">10 min read</time> </p> </header> <p>Intro paragraph…</p> <section aria-labelledby="section-1"> <h2 id="section-1">The article element</h2> <p>…content…</p> <figure> <img src="diagram.png" alt="DOM structure comparison"> <figcaption>Fig 1. Div soup vs semantic HTML.</figcaption> </figure> </section> <section aria-labelledby="section-2"> <h2 id="section-2">The time element</h2> <p>…content…</p> </section> <footer> <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/seo">SEO</a></p> <address> Written by <a href="/authors/jane">Jane Doe</a> · <a href="mailto:[email protected]">[email protected]</a> </address> </footer> </article> <aside aria-labelledby="related-heading"> <h2 id="related-heading">Related articles</h2> <ul> <li><a href="/tutorials/aria">ARIA Roles Guide</a></li> <li><a href="/tutorials/forms">Form Validation</a></li> </ul> </aside> </main> <footer> <nav aria-label="Footer"> <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a> </nav> <small>© <time datetime="2026">2026</time> MySite</small> </footer>
<!-- Product page template --> <main> <article itemscope itemtype="https://schema.org/Product"> <hgroup> <h1 itemprop="name">Mechanical Keyboard Pro</h1> <p itemprop="description"> Compact TKL layout · Cherry MX switches · USB-C </p> </hgroup> <figure> <img src="keyboard.jpg" alt="Mechanical Keyboard Pro — top-down view" itemprop="image"> <figcaption>Available in Black, White, and Navy.</figcaption> </figure> <section aria-labelledby="price-h"> <h2 id="price-h">Pricing</h2> <p> <del datetime="2026-01-01">$149</del> <ins datetime="2026-04-01">$119</ins> — limited launch offer </p> </section> <section aria-labelledby="specs-h"> <h2 id="specs-h">Specifications</h2> <dl> <dt>Switch type</dt><dd>Cherry MX Red (linear)</dd> <dt>Layout</dt><dd>TKL (87 keys)</dd> <dt>Connectivity</dt><dd>USB-C, Bluetooth 5.0</dd> <dt>Product ID</dt> <dd><data value="KB-MX87-BLK">MX87 — Black</data></dd> </dl> </section> <section aria-labelledby="reviews-h"> <h2 id="reviews-h">Customer reviews</h2> <article> <header> <h3>Great build quality</h3> <p><strong>★★★★★</strong> by Alex J. · <time datetime="2026-05-10">May 10, 2026</time></p> </header> <p>Solid construction, great feel…</p> </article> </section> </article> </main>
<!-- News article template --> <main> <article itemscope itemtype="https://schema.org/NewsArticle"> <header> <p> <a href="/technology">Technology</a> › <a href="/web">Web Development</a> </p> <h1 itemprop="headline"> HTML Gets a New <search> Element </h1> <p> By <span itemprop="author"> <a href="/reporters/emma" rel="author">Emma Chen</a> </span> · <time itemprop="datePublished" datetime="2026-06-03T10:00:00Z"> June 3, 2026, 10:00 AM UTC </time> </p> </header> <figure> <img src="html-search-element.png" alt="Screenshot of the new search element in DevTools" itemprop="image"> <figcaption> The <code>&lt;search&gt;</code> element in Chrome DevTools accessibility pane. </figcaption> </figure> <p itemprop="description"> The HTML living standard now includes a <dfn id="def-search"><code>&lt;search&gt;</code> element</dfn>, providing a native landmark role for search forms without requiring <code>role="search"</code>. </p> <section aria-labelledby="background-h"> <h2 id="background-h">Background</h2> <p> As noted in <cite>HTML: The Living Standard</cite>, the <a href="#def-search">search element</a> was added in 2023 and reached baseline in 2024. </p> <blockquote cite="https://html.spec.whatwg.org"> <p>The search element represents a part of a document or application that contains a set of form controls or other content related to performing a search.</p> </blockquote> </section> <footer> <address> Contact: <a href="mailto:[email protected]">[email protected]</a> </address> </footer> </article> </main>
Read the tutorial