Element-cluster showcases
Each example is a realistic page whose subject matter forces one family of
semantic elements into natural, idiomatic use. Each page carries a
styled view toggle: uncheck it to see the raw semantic
document render on the browser's default stylesheet alone — proof the
structure stands on its own. The toggle is pure CSS: every rule is gated behind
:root:has(#css-toggle:checked), so no script runs either way.
- Recipe card
- Durations and quantities:
<time datetime="PT…">,<data>,<figure>, ingredient and step lists, a<dl>nutrition panel, Recipe JSON-LD. - Glossary of web terms
- Definition machinery:
<dl>,<dfn>,<abbr>, and cross-reference fragment links. - CLI manual page
- Computer text: nested
<kbd>,<samp>,<var>,<pre><code>, an option reference as a description list. - Conference schedule
- Complex tables:
headers/idcell associations,rowspan,<colgroup>,scope,<tfoot>. - World poetry anthology
- Internationalization:
langswitches, right-to-leftdir,<ruby>annotations,<bdi>,<bdo>, locale-aware<q>. - Help center
- Script-free interactivity:
<search>,<details name>exclusive accordion, declarativepopover,<dialog>,<mark>. - Product order page
- Forms and microdata:
<fieldset>, typed inputs,<datalist>,<meter>,<output>, schema.orgitempropmarkup. - Release notes
- Edit tracking:
<ins>and<del>withdatetime,<s>,<ol reversed>,<hgroup>version headings.