Skip to main content

html-tags.com

Every HTML tag. When to use it. Shown live.

The reference for modern semantic HTML — 112 living elements with when-to-use guidance, honest when-not-to warnings, Baseline support status, and examples you can see working.

Browse all tags · See the examples · Print the cheat sheet

Element of the week

This week (every week) we spotlight <output> — one of the hundred elements most pages never use. Read when it applies, when it doesn't, and see it working. A different element is chosen deterministically each week.

Every tag, by family

Each page answers the same four questions: what it means, when to use it, when not to, and what the markup looks like — with its Baseline status and links to MDN and the HTML Living Standard.

Div soup vs. semantic HTML

Both blocks below render the same card. One means nothing to a screen reader, a search engine, or an AI agent; the other is self-describing. Identical pixels — different meaning.

<div class="card">
  <div class="card-header">
    <div class="title">Overnight Rye</div>
    <div class="meta">July 24, 2026</div>
  </div>
  <div class="body">
    <div>Four ingredients…</div>
  </div>
</div>
Div soup: eight anonymous boxes. The date is a string, the title is a styled div, nothing is navigable.
<article>
  <header>
    <h3>Overnight Rye</h3>
    <p><time datetime="2026-07-24">July 24, 2026</time></p>
  </header>
  <p>Four ingredients…</p>
</article>
Semantic: a self-contained <article> with a real heading and a machine-readable date. Fewer elements, more meaning.

Learn by example

Eight realistic pages, each built around one family of elements — a recipe that teaches <time> durations, a man page that teaches <kbd> and <samp>, a multilingual anthology that teaches <ruby> and bidirectional text. Every one has a styled view you can switch off to see the raw semantic document underneath, and every one validates with zero errors.

Or read the full-vocabulary field guide — one CSS-free page where every element demonstrates itself.

Building with AI agents?

This site ships as an agent skill: a single instruction file that teaches a coding agent the element-selection ladder, the ARIA rules, the i18n discipline, and the full 2026 vocabulary — so generated markup comes out semantic by default. Install it for Claude Code:

mkdir -p ~/.claude/skills/semantic-html
curl -o ~/.claude/skills/semantic-html/SKILL.md \
  https://raw.githubusercontent.com/mikezupper/semantic-html-skill/main/skills.md

It's plain Markdown — paste it into any agent's system prompt. Get it from the repository.

The sources we defer to

This site is a field guide, not a spec. For normative rules and exhaustive attribute tables, go where we go: