<!doctype html67>

HTML, thought further.

Cards, charts, maps, legal and science vocabulary as native tags — one stylesheet, one script, 0 build steps. Every page stays valid HTML5; the runtime upgrades the bare tags in place. 120 elements on top of HTML5.

Get started

Quickstart — a complete HTML67 page

<!doctype html>
<link rel="stylesheet" href="/src/tokens.css">
<script type="importmap">
  { "imports": { "lit": "/vendor/lit.js", "wlviz": "/vendor/wlviz.js",
                 "@wilhelm/ui": "/src/wilhelm.js", "@wilhelm/ui/": "/src/" } }
</script>
<script type="module" src="/src/wilhelm.js"></script>

<card>
  <strong>It is this simple.</strong>
  <chart type="area" data="[12,19,14,23,30]"></chart>
  <geo pack="munich"></geo>
</card>

Self-host src/ + vendor/ (no bundler) — or grab the Onepage, it runs from file://. Every element's page in the reference shows its markup, ready to copy.

HTML6 — UI & Presentation

Everything you keep rebuilding with frameworks, as plain tags. Click any tag for its live demo + markup.

HTML7 — Vocabulary

Domain values that format and check themselves — science, commerce, law. Machine-readable for humans and AI.

HTML5 & older — the base

The native elements HTML67 stands on — documented in the same reference, nothing replaced.

The story: why HTML67 — the kitchen sink, told in four pictures

The official HTML standard calls itself a kitchen sink — the basin where everything ends up. One sink, for everything. It's honest. It's even funny. And it's the whole problem.

Graphic 1 — the kitchen sink (HTML5, the specification)

              ┌────────────────────────────────────────┐
              │  CSS    SVG    MathML   ServiceWorkers  │   built on top
              └────────────────────────────────────────┘
   ┌───────┐  ┌────────────────────────────────────────┐
   │ IDB   │  │                                        │
   │ Fetch │  │             THE  SINK                  │   ← HTML
   │ CSP   │  │         "this specification"           │
   │ PNG   │  │                                        │
   │ Opus  │  │                                        │
   │ AV1   │  │                                        │
   └───────┘  └────────────────────────────────────────┘
    tools     ┌────────────────────────────────────────┐
   alongside  │ HTTP  TLS  DOM  Unicode  WebIDL         │   the plumbing
              │ MIME  URL  XML  JavaScript  Encoding    │   it stands on
              └────────────────────────────────────────┘

It's called a living standard, but living things need tending — and lately, no one has. The basin fills with everything that doesn't fit: utility classes, widgets, a dozen CDNs, framework after framework re-solving the same problem.

Graphic 2 — real life HTML5

      we now build ▸  documents · apps · layouts · interfaces
                          (far more than the basin was meant to hold)
                                       ▲
   sink-embeds ◂ <model-viewer> ◂ threejs ◂ iframes ◂ video-players
        ╲          ╲           │           ╱          ╱
              ┌────────────────────────────────────────┐
              │  CSS    SVG    MathML   ServiceWorkers  │   still on top
              └────────────────────────────────────────┘
   ┌───────┐  ┌────────────────────────────────────────┐
   │ IDB   │  │  🗑 tailwind   🗑 bootstrap   🗑 jQuery   │ ──cdn #7
   │ Fetch │  │  🗑 react   🗑 vue   🗑 the 14th frmwrk  │ ──polyfill
   │ CSP   │  │  💩 widgets   💩 utility-class soup      │ ──shim
   │ PNG   │  │  🗑 dep  🗑 dep  🗑 dep   ☠ css won't    │ ──cdn #1
   │ Opus  │  │       ~ ~ ~  grey water  ~ ~ ~ ~ ~      │
   │ AV1   │  │             THE  SINK  (clogged)        │ ← HTML
   └───────┘  └────────────────────────────────────────┘
    tools     ┌────────────────────────────────────────┐
   alongside  │ HTTP  TLS  DOM  Unicode  WebIDL         │   the plumbing
   + webasm   │ MIME  URL  XML  JavaScript  Encoding    │   (ground shifting)
              └────────────────────────────────────────┘

So we're upgrading the sink. Everything that used to balance on the rim moves inside, as native elements. Every filetype gets a home. The basin is clean ceramic again.

Graphic 3 — HTML6

        ┌──────────────────────────────────────────────────┐
        │  CSS   SVG   MathML   ServiceWorkers              │
        │  + Markdown  + Webapps  + Documents  + Editors    │   built on top
        └──────────────────────────────────────────────────┘
   ┌────────┐  ┌──────────────────────────────────────────────────┐
   │ IDB    │  │                                                  │
   │ Fetch  │  │                                                  │
   │ CSP    │  │                                                  │
   │ PNG    │  │              A  CLEANER  BASIN                   │  ← HTML6
   │ Opus   │  │          meaning · structure · design            │
   │ AV1    │  │                                                  │
   │ MP4    │  │                                                  │
   │ OBJ    │  │                                                  │
   │ GLB    │  │                                                  │
   │ ICS    │  │                                                  │
   │ PDF    │  │                                                  │
   │ WEBP   │  │                                                  │
   └────────┘  └──────────────────────────────────────────────────┘
   tools +     ┌──────────────────────────────────────────────────┐
   filetypes,  │ HTTP  TLS  DOM  Unicode  WebIDL                   │  the plumbing
   now native  │ MIME  URL  XML  JavaScript  Encoding  + WebAssembly│  it stands on
               └──────────────────────────────────────────────────┘

And HTML7 connects the basin to the water: the page's obligations to the world it lives in — units, sources, licenses, deadlines, regional rules — as vocabulary the page carries itself. <norm> resolves § 433 BGB, <unit> formats to your locale, <cite> builds its own bibliography.

Graphic 4 — HTML7

        ┌──────────────────────────────────────────────────┐
        │  CSS   SVG   MathML   ServiceWorkers              │
        │  + GlyphMarkdown  + Webapps  + Documents + Editors │   built on top
        └──────────────────────────────────────────────────┘
   ┌────────┐  ┌──────────────────────────────────────────────────┐
   │ IDB    │  │                                                  │
   │ Fetch  │  │                                                  │
   │ CSP    │  │                                                  │
   │ PNG    │  │              THE  LIVING  BASIN                  │  ← HTML7
   │ Opus   │  │          meaning · structure · design            │
   │ AV1    │  │       + <norm> <cite> <unit> <license>           │
   │ MP4    │  │                                                  │
   │ OBJ    │  │                                                  │
   │ GLB    │  │                                                  │
   │ ICS    │  │                                                  │
   │ PDF    │  │                                                  │
   │ WEBP   │  │                                                  │
   └────────┘  └─────┬─┬────────────┬─┬──────────────────┬─┬──────┘
   tools +           │ │            │ │                  │ │
   filetypes,        │ │            │ │                  │ │
   now native       (   )─(⏱)      (   )─(⏱)            (   )─(⏱)
                   analytics      legal               legal
                   + OpenGraph    regulatories        standards (in)
        ┌────────────┴─┴────────────┴─┴──────────────────┴─┴──────┐
        │  Law · Rights · Invoices · Bathrooms · Local Adapters    │
        │  DSGVO · SEPA · BGB · currency · OpenGraph · SEO · meta   │  the water main
        └──────────────────────────────────────────────────────────┘
             the community · the city · the state · the EU

HTML67 is part of Project Wilhelm.

A standard is only the first stone — and this is just the beginning. See Performance for the numbers and the Roadmap to 2030.

Dig deeper via the sidebar: HTML6, HTML7, GlyphMarkdown, Design-DNA.

How it compares

	HTML + CSS · 2000s	HTML5 · average today	HTML67
Typical build	hand-written HTML, one CSS file	framework + bundler + utility CSS + component libs	native elements, no build
Total page weight	~50–200 KB	~2–5 MB	~150–400 KB
Loading time	~1–3 s (slow line)	3–10 s	< 1 s
External servers / origins	0–1 (just your own)	8–20+ (CDNs, fonts, analytics, embeds, ads)	1 (your own)
CDNs / third parties	none, or one for jQuery later	5–150	none in the core; heavy viewers lazy-load their lib (self-hostable)
HTTP requests	5–15	70–150+	1–10
Legal (DSGVO · DMA · accessibility)	no	no	yes — built in
Renders without server / network	yes	rarely (CDN-dependent)	yes
AI- & SEO-ready (machine-readable meaning)	no	no	yes
Universal standard (web · print · apps)	no	no	yes

Performance

Data centres are racing toward 950 TWh a year — near 3% of the world's electricity by 2030, growing more than four times faster than demand overall (IEA, Energy & AI 2025). And most of what they move isn't meaning. Around 70% of all web traffic now flows through CDNs — by some counts over 80%. Much of that is video, but for the pages, apps and documents people actually read, a large share of every transfer isn't content at all. It's scaffolding: framework code, duplicate libraries, dependencies, trackers — markup written to be rendered, not understood. HTML67 ships the meaning and drops the scaffolding. Here's what that saves.

–90%

energy & data waste

meaning, not scaffolding

A modern page ships ~3 MB to deliver ~20 KB of real meaning — the HTML is barely 1% of the download; the rest is frameworks, fonts and images. HTML67: ~200–400 KB.

Source: HTTP Archive / Web Almanac 2025 — median desktop page ~2.6 MB, ~180× heavier than the 90s; JS ~25% of weight.

–99%

HTTP requests

not 5–15 servers

A typical page fires 70–150+ requests across 10–20 origins — CDNs, fonts, trackers, embeds. HTML67: 1–10, from one server, zero CDNs in front.

Source: HTTP Archive / Web Almanac 2025 — median page ~70+ requests; 92% of sites load third-party scripts.

–75%

server computing power

self-hosted, zero third parties

Servers are ~60% of data-centre electricity; every framework re-render, duplicate dependency and third-party call adds load. Fewer bytes and no third parties means less to process.

Source: IEA Energy & AI 2025 — servers ~60% of data-centre power; data centres ~1.5% of global electricity, doubling to ~950 TWh by 2030.

–50%

AI tokens

compressed context, better indexing

A semantic <price> or <norm> says in one tag what class-soup takes twenty to imply — so a crawler indexes less and a model reads fewer tokens for the same meaning.

Source: IEA Energy & AI 2025/26 — a simple AI query draws ~10× a web search; per-page token savings measured vs. a typical framework + utility-CSS build.

Dig deeper via the sidebar: HTML6, HTML7, GlyphMarkdown, Design-DNA.

HTML6

UI & Presentation — the building blocks HTML never got natively

Cards, graphs, charts, metrics, native partials. Today each one is an npm package + build step. Here they are elements: one tag, no bundler.

live · Metrics & charts

<wl-chart type="area">

<wl-chart type="bar">

<wl-donut>

live · <wl-force-graph>

live · <wl-map threed>

offline · <wl-map pack="munich"> — Tile-Pack eingebacken, läuft ohne Netz

HTML6 also gathers the everyday building blocks by use case. Two topics live here; the law/science vocabularies (Law & licenses, File types) live under HTML7.

Digital sovereignty

Your own infrastructure instead of Big Tech embeds — self-hosted maps, media and files, without third-party trackers.

<geo><player><waveform><pdf><image-gallery><include><qr>

HTML7

Living Vocabularies — Law & Science

Each domain extends its vocabulary on the one foundation: a norm knows its paragraph, a unit does the math, a source builds its reference list, a license wraps every piece of content.

live · Law & Measure

Contract law:

Data protection:

Speed: · Energy:

Reference:

live · <wl-license> wraps every piece of content

HTML7 also gathers its building blocks by use case — two topics, each a set of native elements you drop in as plain tags.

Law, licenses & IP

Intellectual property, licenses and legal texts as ready-made building blocks — Creative Commons, sections, contracts, GDPR.

<license><norm><cite><bibliography><document><paper><legal-accept><consent><sepa-mandate><iban><price>

File types & viewers

One element per file type — 3D models, PDFs, gigapixel images, formulas, diagrams and code.

<pdf><image-gallery><player><katex><mermaid><shiki><lottie><glyph>

HTML7

Law as Code

Recht lebt heute in PDFs, CMS-Feldern und Anwalts-Postfächern — Kopien, die auseinanderlaufen. HTML7 legt es dahin, wo die Anwendung ohnehin lebt: ins Markup. Eine Norm ist ein Element, das seinen Wortlaut, seine amtliche Quelle und seine Zitierweise kennt. Ein Rechtsdokument erklärt pro Abschnitt, welche Pflicht ihn erzwingt. Und die Pflicht selbst läuft als UI. Alles auf dieser Seite ist live — klick es an.

live · <wl-norm> + Normen-Registry

Die Norm kennt sich selbst

Der Autor schreibt <wl-norm gesetz="DSGVO" para="17"> — Zitierweise, Wortlaut und amtlicher Link kommen aus der Registry (src/data/norm-registry.js), nicht aus Copy-Paste. Jede Zitierung trägt auf Wunsch schema.org/Legislation als JSON-LD im DOM.

Kaufrecht: · Löschung: · Cookies: · elektronische Form:

showcase · Art. 13 DSGVO

Ein echter Artikel, drei Schichten

Art. 13 DSGVO als HTML7-Dokument: amtlicher Wortlaut für Menschen, dieselbe DOM-Struktur (data-abs/data-lit, ELI, CELEX) für Maschinen — der Serializer baut daraus live JSON, ohne zweites Datenformat.

→ Zum Showcase: Art. 13 DSGVO live

live · <block-datenschutz>

Dokumente, die ihre Pflicht benennen

Diese Datenschutzerklärung ist entlang der Pflichten von gegliedert — jede Sektion nennt die Vorschrift, die sie erzwingt. Ein Prüfer sieht pro Abschnitt das Warum.

live · Pflicht als UI

Vom Paragraphen zur laufenden Oberfläche

Die Rechte aus und als funktionierendes Formular, die Einwilligung nach als granularer Consent — dieselben Komponenten, dieselbe Registry. Dazu signierbare Dokumente mit SHA-256-Siegel (<wl-document>) und SEPA-Mandate mit Mod-97-Prüfung, beide mit schema.org-Datensatz.

Alles Open Source, kein Build-Step, HTML5-Obermenge — Spec und Referenz: html67.org · GitHub ↗. Amtliche Normtexte sind gemeinfrei ().

HTML7

Ein Gesetzesartikel als HTML7-Dokument

Das hier ist keine Abschrift, sondern eine Quelle mit zwei Lesern: Menschen sehen den gerenderten Normtext mit klickbaren Querverweisen (<wl-norm> — Popup, amtliche Fassung, Zitat kopieren). Maschinen lesen dieselbe DOM-Struktur: Absätze und Buchstaben tragen data-abs/data-lit, der Artikel seinen ELI. Der Button „Maschinen-Sicht" serialisiert das Dokument live zu JSON — kein zweites Datenformat, kein Sync-Problem.

Verordnung (EU) 2016/679 — DSGVO

Artikel 13

Informationspflicht bei Erhebung von personenbezogenen Daten bei der betroffenen Person

Amtliche Fassung (EUR-Lex) ↗ dsgvo-gesetz.de ↗ ELI: data.europa.eu/eli/reg/2016/679/oj · CELEX 32016R0679

(1)

Werden personenbezogene Daten bei der betroffenen Person erhoben, so teilt der Verantwortliche der betroffenen Person zum Zeitpunkt der Erhebung dieser Daten Folgendes mit:

den Namen und die Kontaktdaten des Verantwortlichen sowie gegebenenfalls seines Vertreters;
gegebenenfalls die Kontaktdaten des Datenschutzbeauftragten;
die Zwecke, für die die personenbezogenen Daten verarbeitet werden sollen, sowie die Rechtsgrundlage für die Verarbeitung;
wenn die Verarbeitung auf Absatz 1 Buchstabe f beruht, die berechtigten Interessen, die von dem Verantwortlichen oder einem Dritten verfolgt werden;
gegebenenfalls die Empfänger oder Kategorien von Empfängern der personenbezogenen Daten und
gegebenenfalls die Absicht des Verantwortlichen, die personenbezogenen Daten an ein Drittland oder eine internationale Organisation zu übermitteln, sowie das Vorhandensein oder das Fehlen eines Angemessenheitsbeschlusses der Kommission oder im Falle von Übermittlungen gemäß oder oder Absatz 1 Unterabsatz 2 einen Verweis auf die geeigneten oder angemessenen Garantien und die Möglichkeit, wie eine Kopie von ihnen zu erhalten ist, oder wo sie verfügbar sind.

(2)

Zusätzlich zu den Informationen gemäß Absatz 1 stellt der Verantwortliche der betroffenen Person zum Zeitpunkt der Erhebung dieser Daten folgende weitere Informationen zur Verfügung, die notwendig sind, um eine faire und transparente Verarbeitung zu gewährleisten:

die Dauer, für die die personenbezogenen Daten gespeichert werden oder, falls dies nicht möglich ist, die Kriterien für die Festlegung dieser Dauer;
das Bestehen eines Rechts auf Auskunft seitens des Verantwortlichen über die betreffenden personenbezogenen Daten sowie auf Berichtigung oder Löschung oder auf Einschränkung der Verarbeitung oder eines Widerspruchsrechts gegen die Verarbeitung sowie des Rechts auf Datenübertragbarkeit;
wenn die Verarbeitung auf Absatz 1 Buchstabe a oder Absatz 2 Buchstabe a beruht, das Bestehen eines Rechts, die Einwilligung jederzeit zu widerrufen, ohne dass die Rechtmäßigkeit der aufgrund der Einwilligung bis zum Widerruf erfolgten Verarbeitung berührt wird;
das Bestehen eines Beschwerderechts bei einer Aufsichtsbehörde;
ob die Bereitstellung der personenbezogenen Daten gesetzlich oder vertraglich vorgeschrieben oder für einen Vertragsabschluss erforderlich ist, ob die betroffene Person verpflichtet ist, die personenbezogenen Daten bereitzustellen, und welche mögliche Folgen die Nichtbereitstellung hätte und
das Bestehen einer automatisierten Entscheidungsfindung einschließlich Profiling gemäß Absätze 1 und 4 und – zumindest in diesen Fällen – aussagekräftige Informationen über die involvierte Logik sowie die Tragweite und die angestrebten Auswirkungen einer derartigen Verarbeitung für die betroffene Person.

(3)

Beabsichtigt der Verantwortliche, die personenbezogenen Daten für einen anderen Zweck weiterzuverarbeiten als den, für den die personenbezogenen Daten erhoben wurden, so stellt er der betroffenen Person vor dieser Weiterverarbeitung Informationen über diesen anderen Zweck und alle anderen maßgeblichen Informationen gemäß Absatz 2 zur Verfügung.

(4)

Die Absätze 1, 2 und 3 finden keine Anwendung, wenn und soweit die betroffene Person bereits über die Informationen verfügt.

Maschinen-Sicht

JSON kopieren

Normtext: amtliche deutsche Fassung der VO (EU) 2016/679 (amtliches Werk, gemeinfrei). Die Maschinen-Sicht entsteht zur Laufzeit aus genau dem DOM, den du oben liest — Absätze aus data-abs, Buchstaben aus data-lit, Querverweise aus den <wl-norm>-Elementen samt ihren amtlichen Links.

HTML6 · Text

GlyphMarkdown — Text & meaning, separated from the component

A Markdown superset: the author marks what they mean — emphasized, uncertain, struck through, a feeling — not pixels. As a bonus AI-native: a model writes annotation, not CSS.

<wl-glyph>
  This is █ important █ and
  ~ rather unsure ~.
  [- old text -][+ new text +]
  ( this passage ✶ a note that points at the text )
  @joy+( finally separate )
</wl-glyph>

live · GlyphMarkdown → Ink · hover the ✶

This is █ important █ and ~ rather unsure ~. [- old text -][+ new text +] ( this passage ✶ a note that points at the text, hover to see ) @joy+( finally separate ) An *aside* in the hand-thought script, and **one word** that jumps.

Interactive

Try it — every mark, live

Type GlyphUp on the left, the ink renders on the right instantly. The toolbar carries the full vocabulary: highlights, underlines, structure, dynamics, symbols, colors, emotion and inline comments that point at a passage. Combinations cascade — green highlight, gradient text, an animated marker.

Interactive

Playground — type a tag, see the component

Type an HTML67 tag like <card>, <stat> or <norm> on the left and it renders live on the right — no build step. The toolbar carries a curated component menu that drops ready-made tags at the cursor; loose text between them stays GlyphUp, so components and markup share one box.

DNA

Design tokens — the axioms from which everything flows

There are only a handful of axioms (--ax-*): brand, marker, radii, brightness. Everything visible (--wl-*) is derived from them — buttons, cards, charts never read hex, only tokens. The control panel below sets the axioms live, watch how everything follows.

--ax-brandAxiom · the one hex value

→

--wl-accentderived · points to the axiom

→

<wl-button accent>component · reads only the token

live · theme control panel — assigns values to the axioms, everything derives live

Accent (--ax-brand) Marker (--ax-brand-2) Card radius Button radius --wl-accent points to Mode

Reset

Accent

Solid

Marker

Outlook · the mission ends in 2030

By 2030, digitization is done.

The roadmap below has the steps. The early years are concrete; the later ones we're keeping open on purpose.

HTML67 is part of Project Wilhelm.

A standard is only the first stone. HTML67 is where the web learns to mean again — but the language, the platform and the living layer are one piece of something larger. And this is just the beginning.

<a11y>

HTML6

Accessibility toolbar — text size, contrast, spacing, motion, focus; applies page-wide, persists, and docks onto every HTML67 page automatically

Live example

Markup

<a11y></a11y>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<accessibility>`

long form — same toolbar element

Props / Attributes

Attribute	Type	Description
`collapsed`	Boolean
`heading`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-a11y`
Prefix-free	<a11y> (runtime aliases to `wl-a11y`)
Status	HTML67 · live

HTML67 reference ↗

<alert>

HTML6

Inline notice — appearance="callout" for the prominent box

Live example

Heads up — this is an alert. The prominent callout appearance.

Markup

<alert>Heads up — this is an alert.</alert>
<alert variant="success" heading="Saved" appearance="callout">The prominent callout appearance.</alert>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<callout>`

<alert appearance="callout"> — prominent notice box

Short form of <alert appearance="callout">.

<callout variant="info" heading="Note">Short form of &lt;alert appearance="callout"&gt;.</callout>

Props / Attributes

Attribute	Type	Description
`variant`	info · success · warn · danger
`heading`	String
`appearance`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-alert`
Prefix-free	<alert> (runtime aliases to `wl-alert`)
Status	HTML67 · live

HTML67 reference ↗

<app-shell>

HTML6

App frame with top bar

Live example

App content

Markup

<app-shell app-name="Demo App" emoji="🚀" style="height:11rem">
  <card>App content</card>
</app-shell>

Props / Attributes

Attribute	Type	Description
`app-name`	String
`emoji`	String
`accent`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-app-shell`
Prefix-free	<app-shell> (runtime aliases to `wl-app-shell`)
Status	HTML67 · live

HTML67 reference ↗

<avatar>

HTML6

Profile picture / initials

Live example

Markup

<avatar name="Sven Bekesi"></avatar>

Props / Attributes

Attribute	Type	Description
`src`	String
`name`	String
`size`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-avatar`
Prefix-free	<avatar> (runtime aliases to `wl-avatar`)
Status	HTML67 · live

HTML67 reference ↗

<avatar-group>

HTML6

Avatar Group

Live example

Markup

<avatar-group max="3">
  <avatar name="Ada Lovelace"></avatar>
  <avatar name="Grace Hopper"></avatar>
  <avatar name="Alan Turing"></avatar>
  <avatar name="Edsger Dijkstra"></avatar>
</avatar-group>

Props / Attributes

Attribute	Type	Description
`max`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-avatar-group`
Prefix-free	<avatar-group> (runtime aliases to `wl-avatar-group`)
Status	HTML67 · live

HTML67 reference ↗

<badge>

HTML6

Small status/label chip

Live example

neutral accent solid outline

Markup

<badge>neutral</badge>
<badge variant="accent">accent</badge>
<badge variant="solid">solid</badge>
<badge variant="outline">outline</badge>

Props / Attributes

Attribute	Type	Description
`variant`	neutral · solid · outline · accent

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-badge`
Prefix-free	<badge> (runtime aliases to `wl-badge`)
Status	HTML67 · live

HTML67 reference ↗

<breadcrumb>

HTML6

Path navigation — crumbs live in the light DOM, last child marked aria-current

Live example

Home Reference card

Markup

<breadcrumb>
  <a href="#">Home</a>
  <a href="#">Reference</a>
  <span>card</span>
</breadcrumb>

Props / Attributes

Attribute	Type	Description
`items`	Array
`label`	String

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-breadcrumb`
Prefix-free	<breadcrumb> (runtime aliases to `wl-breadcrumb`)
Status	HTML67 · live

HTML67 reference ↗

<calendar>

HTML6

Month calendar (pick a date)

Live example

Markup

<calendar value="2026-09-15"></calendar>

Props / Attributes

Attribute	Type	Description
`value`	String
`locale`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-calendar`
Prefix-free	<calendar> (runtime aliases to `wl-calendar`)
Status	HTML67 · live

HTML67 reference ↗

<card>

HTML6OpenUI · active ↗

Container for grouped content

Live example

Card title

Slotted body content.

Markup

<card>
  <strong>Card title</strong>
  <p>Slotted body content.</p>
</card>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-card`
Prefix-free	<card> (runtime aliases to `wl-card`)
Status	HTML67 · live

HTML67 reference ↗

<carousel>

HTML6

Image/content slider

Live example

Markup

<carousel>
  <img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23cdd6e0%27/%3E%3Ctext x=%2716%27 y=%2732%27 font-family=%27sans-serif%27 font-size=%2716%27 fill=%27%23333%27%3EA%3C/text%3E%3C/svg%3E" alt="Slide 1">
  <img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23d6cde0%27/%3E%3Ctext x=%2716%27 y=%2732%27 font-family=%27sans-serif%27 font-size=%2716%27 fill=%27%23333%27%3EB%3C/text%3E%3C/svg%3E" alt="Slide 2">
</carousel>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<slider>`

same element — <carousel> is the canonical name (ARIA slider = value control, see <range>)

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-carousel`
Prefix-free	<carousel> (runtime aliases to `wl-carousel`)
Status	HTML67 · live

HTML67 reference ↗

<chart>

HTML6

One chart element, many types — line/area/bar/donut plus pie/radar/radial-bar/index/scatter/boxplot/violin; label names it for assistive tech

Live example

One element, many types — pie/radar/radial-bar/index/scatter/boxplot/violin below as short forms.

Markup

<chart type="area" data="[12,19,14,23,21,30,28,36]" dots height="140"></chart>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<pie>`

<chart type="pie"> — data [{label,value}]

<pie data='[{"label":"A","value":38},{"label":"B","value":27},{"label":"C","value":21},{"label":"D","value":14}]' height="180"></pie>

`<radar>`

<chart type="radar"> — axes + data [{label,values:{…}}]

<radar axes='["Speed","Range","Grip","Comfort","Price"]' data='[{"label":"A","values":{"Speed":8,"Range":6,"Grip":7,"Comfort":5,"Price":9}},{"label":"B","values":{"Speed":6,"Range":9,"Grip":5,"Comfort":8,"Price":6}}]' height="240"></radar>

`<radial-bar>`

<chart type="radial-bar"> — data [{label,value}]

<radial-bar data='[{"label":"Mon","value":12},{"label":"Tue","value":19},{"label":"Wed","value":8},{"label":"Thu","value":15},{"label":"Fri","value":22}]' height="240"></radial-bar>

`<index-chart>`

<chart type="index"> — data [{label,values:[…]}]

<index-chart data='[{"label":"A","values":[100,110,105,120]},{"label":"B","values":[100,95,108,115]}]' height="200"></index-chart>

`<connected-scatter>`

<chart type="scatter"> — data [{x,y}]

<connected-scatter data='[{"x":1,"y":2,"label":"a"},{"x":2,"y":3},{"x":3,"y":1},{"x":4,"y":4}]' height="220"></connected-scatter>

`<boxplot>`

<chart type="boxplot"> — data [{label,values:[…]}]

<boxplot data='[{"label":"A","values":[4,7,9,11,12,14,18]},{"label":"B","values":[6,8,10,13,15,19,24]},{"label":"C","values":[3,5,6,8,9,12,15]}]' height="220"></boxplot>

`<violin>`

<chart type="violin"> — data [{label,values:[…]}]

<violin data='[{"label":"A","values":[4,5,5,6,7,7,8,9,11,12,14]},{"label":"B","values":[6,8,9,10,10,11,13,15,19,21,24]}]' height="220"></violin>

Props / Attributes

Attribute	Type	Description
`type`	line · area · bar · donut
`data`	Array
`axes`	Array	nur für type="radar" (Achsen-Namen)
`height`	Number
`grid`	Boolean
`dots`	Boolean
`accent`	Boolean
`animated`	Boolean
`labels`	Boolean
`label`	String	a11y-Name des Charts (Konvention: label = Beschriftung)

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-chart`
Prefix-free	<chart> (runtime aliases to `wl-chart`)
Status	HTML67 · live

HTML67 reference ↗

<chat>

HTML6

Chat

Live example

Morning — is the spec ready for review? Yes, the HTML67 reference is live.

Markup

<chat>
  <msg from="Ada" side="in" time="09:12">Morning — is the spec ready for review?</msg>
  <msg side="out" time="09:13" status="read">Yes, the HTML67 reference is live.</msg>
  <msg from="Ada" side="in" typing></msg>
</chat>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-chat`
Prefix-free	<chat> (runtime aliases to `wl-chat`)
Status	HTML67 · live

HTML67 reference ↗

<checkbox>

HTML6

Checkbox

Live example

I agree

Markup

<checkbox checked>I agree</checkbox>

Props / Attributes

Attribute	Type	Description
`checked`	Boolean
`disabled`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-checkbox`
Prefix-free	<checkbox> (runtime aliases to `wl-checkbox`)
Status	HTML67 · live

HTML67 reference ↗

<codeblock>

HTML6

Code block with copy button — takes its text child or a code attribute; highlight adds Shiki syntax colors

HTML67 take on <code>.

Live example

const answer = 42;

highlight lazy-loads the Shiki backend — short form: <shiki>.

Markup

<codeblock>const answer = 42;</codeblock>
<codeblock code="const highlighted = true;" lang="js" highlight></codeblock>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<shiki>`

<codeblock highlight> — Shiki syntax-highlight backend

<shiki code="const answer = 42;" lang="js"></shiki>

Props / Attributes

Attribute	Type	Description
`code`	String
`language`	String	Sprache des Codes — NICHT das globale lang= (BCP47)
`lang`	String	Legacy-Alias, kollidiert mit globalem lang= — language= nutzen
`highlight`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-code`
Prefix-free	<codeblock> (runtime aliases to `wl-code`)
Status	HTML67 · live

HTML67 reference ↗

<collapsible-tree>

HTML6

Collapsible node-link tree — click or Enter/Space toggles branches, keyboard-focusable nodes

Live example

Markup

<collapsible-tree data='{"name":"root","children":[{"name":"A","children":[{"name":"A1"},{"name":"A2"}]},{"name":"B"}]}' height="240"></collapsible-tree>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-collapsible-tree`
Prefix-free	<collapsible-tree> (runtime aliases to `wl-collapsible-tree`)
Status	HTML67 · live

HTML67 reference ↗

<color-picker>

HTML6

Color picker

Live example

Markup

<color-picker value="#3e63dd"></color-picker>

Props / Attributes

Attribute	Type	Description
`value`	String
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-color-picker`
Prefix-free	<color-picker> (runtime aliases to `wl-color-picker`)
Status	HTML67 · live

HTML67 reference ↗

<combobox>

HTML6OpenUI · active ↗

Searchable select — keyboard-driven listbox, single or tag-style multiple

Live example

multiple turns it into a tag input — like native <select multiple>, Backspace removes the last tag.

Markup

<combobox label="Country" placeholder="Country…" options='[{"value":"de","label":"Germany"},{"value":"at","label":"Austria"},{"value":"ch","label":"Switzerland"}]'></combobox>
<combobox multiple values='["de","at"]' label="Countries" placeholder="Countries…" options='[{"value":"de","label":"Germany"},{"value":"at","label":"Austria"},{"value":"ch","label":"Switzerland"}]'></combobox>

Props / Attributes

Attribute	Type	Description
`options`	Array
`value`	String
`values`	Array
`multiple`	Boolean
`placeholder`	String
`label`	String
`open`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-combobox`
Prefix-free	<combobox> (runtime aliases to `wl-combobox`)
Status	HTML67 · live

HTML67 reference ↗

<command-palette>

HTML6

⌘K command palette

Live example

Invisible until you press ⌘K / Ctrl+K — then the palette opens over the page.

Markup

<command-palette commands='[{"label":"Open file","hint":"⌘O","value":"open"},{"label":"Save","hint":"⌘S","value":"save"},{"label":"Settings","value":"prefs"}]'></command-palette>

Props / Attributes

Attribute	Type	Description
`open`	Boolean
`commands`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-command`
Prefix-free	<command-palette> (runtime aliases to `wl-command`)
Status	HTML67 · live

HTML67 reference ↗

<compare>

HTML6

Before/after image slider

Live example

Shows built-in placeholders — set before/after to your image URLs.

Markup

<compare></compare>

Props / Attributes

Attribute	Type	Description
`before`	String
`after`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-compare`
Prefix-free	<compare> (runtime aliases to `wl-compare`)
Status	HTML67 · live

HTML67 reference ↗

<context-menu>

HTML6OpenUI · active ↗

Right-click menu

Live example

Right-click me

Markup

<context-menu>
  Right-click me
  <button slot="menu" data-value="copy">Copy</button>
  <button slot="menu" data-value="paste">Paste</button>
  <hr slot="menu" />
  <button slot="menu" data-value="delete" data-danger>Delete</button>
</context-menu>

Props / Attributes

Attribute	Type	Description
`items`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-context-menu`
Prefix-free	<context-menu> (runtime aliases to `wl-context-menu`)
Status	HTML67 · live

HTML67 reference ↗

<contributions>

HTML6

Contributions heat map (GitHub look)

Live example

Markup

<contributions data='[{"date":"2026-01-01","value":3},{"date":"2026-01-08","value":5},{"date":"2026-02-02","value":2},{"date":"2026-03-15","value":7},{"date":"2026-04-10","value":4}]'></contributions>

Props / Attributes

Attribute	Type	Description
`height`	Number
`data`	Array
`animated`	Boolean
`labels`	Boolean
`year`	Number
`locale`	String

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-calendar-heatmap`
Prefix-free	<contributions> (runtime aliases to `wl-calendar-heatmap`)
Status	HTML67 · live

HTML67 reference ↗

<copy>

HTML6

Copy-to-clipboard button

Live example

Markup

<copy value="https://html67.org"></copy>

Props / Attributes

Attribute	Type	Description
`value`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-copy`
Prefix-free	<copy> (runtime aliases to `wl-copy`)
Status	HTML67 · live

HTML67 reference ↗

<countdown>

HTML6

Countdown to a date

Live example

Markup

<countdown datetime="2027-01-01T00:00"></countdown>

Props / Attributes

Attribute	Type	Description
`to`	String
`datetime`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-countdown`
Prefix-free	<countdown> (runtime aliases to `wl-countdown`)
Status	HTML67 · live

HTML67 reference ↗

<cropper>

HTML6

Image cropper (Cropper.js) — drag to crop, .getDataURL() returns the cut

Live example

Markup

<cropper src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23cdd6e0%27/%3E%3Ctext x=%2716%27 y=%2732%27 font-family=%27sans-serif%27 font-size=%2716%27 fill=%27%23333%27%3EA%3C/text%3E%3C/svg%3E" aspect="1.777"></cropper>

Props / Attributes

Attribute	Type	Description
`src`	String
`aspect`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-cropper`
Prefix-free	<cropper> (runtime aliases to `wl-cropper`)
Status	HTML67 · live

HTML67 reference ↗

<data-table>

HTML6

Sortable/selectable table

Live example

Markup

<data-table selectable columns='[{"key":"name","label":"Name"},{"key":"role","label":"Role"}]' rows='[{"name":"Sven","role":"Founder"},{"name":"Caret","role":"AI"}]'></data-table>

Props / Attributes

Attribute	Type	Description
`columns`	Array
`rows`	Array
`selectable`	Boolean
`page-size`	Number

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-data-table`
Prefix-free	<data-table> (runtime aliases to `wl-data-table`)
Status	HTML67 · live

HTML67 reference ↗

<date-picker>

HTML6

Date picker with popover

Live example

Markup

<date-picker placeholder="Pick a date…"></date-picker>

Props / Attributes

Attribute	Type	Description
`value`	String
`placeholder`	String
`open`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-date-picker`
Prefix-free	<date-picker> (runtime aliases to `wl-date-picker`)
Status	HTML67 · live

HTML67 reference ↗

<day>

HTML6

Chat day divider (child of <chat>)

Child element of <chat> — like <li> in <ul>.

Live example

July 31

Markup

<day>July 31</day>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-day`
Prefix-free	<day> (runtime aliases to `wl-day`)
Status	HTML67 · live

HTML67 reference ↗

<dendrogram>

HTML6

Dendrogram (cluster)

Live example

Markup

<dendrogram data='{"name":"UI","children":[{"name":"Layout","children":[{"name":"columns"},{"name":"split"}]},{"name":"Viz","children":[{"name":"radar"},{"name":"sankey"}]}]}' height="240"></dendrogram>

Props / Attributes

Attribute	Type	Description
`height`	Number
`data`	Array
`animated`	Boolean
`labels`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-dendrogram`
Prefix-free	<dendrogram> (runtime aliases to `wl-dendrogram`)
Status	HTML67 · live

HTML67 reference ↗

<description-list>

HTML6

Description List

Live example

Email: mail@example.org
Role: Founder
City: Munich

Markup

<description-list>
  <dl>
    <dt>Email</dt><dd>mail@example.org</dd>
    <dt>Role</dt><dd>Founder</dd>
    <dt>City</dt><dd>Munich</dd>
  </dl>
</description-list>

Props / Attributes

Attribute	Type	Description
`items`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-description-list`
Prefix-free	<description-list> (runtime aliases to `wl-description-list`)
Status	HTML67 · live

HTML67 reference ↗

<drawer>

HTML6

Side panel (sheet)

Live example

Panel content.

Slides in from the right in the native top layer.

Markup

<button onclick="this.nextElementSibling.open = true">Open drawer</button>
<drawer heading="Settings">
  Panel content.
  <button slot="footer">Save</button>
</drawer>

Props / Attributes

Attribute	Type	Description
`open`	Boolean
`side`	right · left · bottom
`heading`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-drawer`
Prefix-free	<drawer> (runtime aliases to `wl-drawer`)
Status	HTML67 · live

HTML67 reference ↗

<dropdown-menu>

HTML6OpenUI · active ↗

Click menu with actions

Live example

Markup

<dropdown-menu>
  <button slot="trigger">Menu ▾</button>
  <button slot="menu" data-value="edit">Edit</button>
  <button slot="menu" data-value="duplicate">Duplicate</button>
  <hr slot="menu" />
  <button slot="menu" data-value="delete" data-danger>Delete</button>
</dropdown-menu>

Props / Attributes

Attribute	Type	Description
`items`	Array
`open`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-dropdown-menu`
Prefix-free	<dropdown-menu> (runtime aliases to `wl-dropdown-menu`)
Status	HTML67 · live

HTML67 reference ↗

<editor>

HTML6

GlyphUp editor (rich text)

Live example

Markup

<editor value="Select some text and press B — it turns into **bold** GlyphUp."></editor>

Props / Attributes

Attribute	Type	Description
`placeholder`	String
`value`	String
`target`	String
`heading`	String
`collapsed`	Boolean
`height`	String
`width`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-editor`
Prefix-free	<editor> (runtime aliases to `wl-editor`)
Status	HTML67 · live

HTML67 reference ↗

<empty-state>

HTML6

Empty state with an action

Live example

Markup

<empty-state heading="No documents yet" description="Upload your first PDF to get started."><button slot="actions">Upload</button></empty-state>

Props / Attributes

Attribute	Type	Description
`heading`	String
`description`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-empty-state`
Prefix-free	<empty-state> (runtime aliases to `wl-empty-state`)
Status	HTML67 · live

HTML67 reference ↗

<field>

HTML6OpenUI · active ↗

Validating input field

Live example

Markup

<field label="Email" type="email" required hint="We do not spam." placeholder="you@example.com"></field>

Props / Attributes

Attribute	Type	Description
`label`	String
`type`	String
`required`	Boolean
`hint`	String
`placeholder`	String
`value`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-field`
Prefix-free	<field> (runtime aliases to `wl-field`)
Status	HTML67 · live

HTML67 reference ↗

<figureblock>

HTML6

Figure with caption

HTML67 take on <figure>.

Live example

Markup

<figureblock ref="fig-1" caption="A numbered figure." src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27150%27%3E%3Crect width=%27320%27 height=%27150%27 fill=%27%23dde3ea%27/%3E%3C/svg%3E" alt="Demo figure"></figureblock>

Props / Attributes

Attribute	Type	Description
`ref`	String
`kind`	figure · table
`caption`	String
`src`	String
`alt`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-figure`
Prefix-free	<figureblock> (runtime aliases to `wl-figure`)
Status	HTML67 · live

HTML67 reference ↗

<file-upload>

HTML6

File dropzone

Live example

Markup

<file-upload multiple accept="image/*"></file-upload>

Props / Attributes

Attribute	Type	Description
`multiple`	Boolean
`accept`	String
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-file-upload`
Prefix-free	<file-upload> (runtime aliases to `wl-file-upload`)
Status	HTML67 · live

HTML67 reference ↗

<force-graph>

HTML6

Force-directed graph

Live example

Markup

<force-graph data='{"nodes":[{"id":"a","label":"A"},{"id":"b","label":"B"},{"id":"c","label":"C"},{"id":"d","label":"D"}],"links":[{"source":"a","target":"b"},{"source":"a","target":"c"},{"source":"b","target":"d"}]}' height="220"></force-graph>

Props / Attributes

Attribute	Type	Description
`height`	Number
`data`	Array
`animated`	Boolean
`labels`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-force-graph`
Prefix-free	<force-graph> (runtime aliases to `wl-force-graph`)
Status	HTML67 · live

HTML67 reference ↗

<form-field>

HTML6

Label, hint and error wrapped around any control — mirrors state onto the slotted input via ARIA

Live example

Markup

<form-field label="Name" hint="As printed on your ID">
  <input placeholder="Jane Doe">
</form-field>

Props / Attributes

Attribute	Type	Description
`label`	String
`hint`	String
`error`	String
`required`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-form-field`
Prefix-free	<form-field> (runtime aliases to `wl-form-field`)
Status	HTML67 · live

HTML67 reference ↗

<geo>

HTML6

Vector map (MapLibre + OpenFreeMap) — styles, 3D buildings, routes, offline tile packs

HTML67 take on <map>.

Live example

threed tilts the camera and extrudes buildings; pack renders from the baked-in offline tile pack — without it tiles load from the network.

Markup

<geo pack="munich" map-style="aquarelle" threed zoom="15" height="22rem"></geo>

Props / Attributes

Attribute	Type	Description
`lat`	Number
`lng`	Number
`zoom`	Number
`height`	String
`label`	String
`map-style`	clean · toner · color
`toolbar`	Boolean
`threed`	Boolean
`tilt`	Boolean
`pois`	Boolean
`globe`	Boolean
`route`	Array
`markers`	Array
`router`	String
`fly`	Boolean
`pack`	String

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-map`
Prefix-free	<geo> (runtime aliases to `wl-map`)
Status	HTML67 · live

HTML67 reference ↗

<glyph>

HTML6

GlyphUp text → ink

Live example

This is █ important █ and ~ rather uncertain ~. @joy+( finally )

Markup

<glyph>This is █ important █ and ~ rather uncertain ~. @joy+( finally )</glyph>

Live editor

Type on the left, the ink renders on the right instantly — exactly the <glyph> renderer.

Legend — all marks

Each row shows the markup and its rendered result. Full spec: apps/wilhe-llm/glyphup.

Text styling

Markup	Result	Meaning
`bold`	bold	bold (marker bold)
`italic`	italic	serif italic (aside / inner thought)
`_ underline _`	_ underline _	single underline
`‗ double ‗`	‗ double ‗	double underline
`▁ thick ▁`	▁ thick ▁	thick underline
`~ uncertain ~`	~ uncertain ~	wavy (uncertain)
`-- struck --`	-- struck --	strikethrough

Marker & color

Markup	Result	Meaning
`█ highlight █`	█ highlight █	full marker (also ▓ ▒ ░ = lighter)
`🔴 colored 🔴`	🔴 colored 🔴	one color: 🔴 🟡 🟢 🔵 🟣 🟠 ⚫ ⚪
`🔴 gradient 🔵`	🔴 gradient 🔵	color gradient in the text
`🟢 █ fill █ 🟢`	🟢 █ fill █ 🟢	color outside → colored marker fill, text stays ink

Corrections (track changes)

Markup	Result	Meaning
`[- out -]`	[- out -]	deletion
`[+ in +]`	[+ in +]	insertion
`[ box ]`	[ box ]	boxed (box)
`{ rule }`	{ rule }	rule / definition (accent border)

Comments (hover the icon)

Markup	Result	Meaning
`( the claim ✶ needs a source )`	( the claim ✶ needs a source )	note anchored to a span — hover the icon, it reveals the note and highlights the text
`( ◉ human )`	( ◉ human )	comment from the human (no anchor)
`( ✶ AI )`	( ✶ AI )	comment from the AI — the grey bubble leads with "From AI:"
`( ? unclear )`	( ? unclear )	question / unclear
`( ✓ good )`	( ✓ good )	looks right
`( ! important )`	( ! important )	important
`( ✖ wrong )`	( ✖ wrong )	wrong

Feeling (emotion tint)

Markup	Result	Meaning
`@joy+( finally )`	@joy+( finally )	+/- controls the intensity
`@anger++( fed up )`	@anger++( fed up )	anger · fear · sadness · hope · calm · love · irony · uncertain …

Expression & hooks

Markup	Result	Meaning
`❝ spoken ❞`	❝ spoken ❞	literal speech
`⟨ thought ⟩`	⟨ thought ⟩	thought
`« hook »`	« hook »	memory anchor (retrieval)
`^^ intensified ^^`	^^ intensified ^^	crescendo
`𝄆 repeated 𝄇`	𝄆 repeated 𝄇	loop / repetition (also \|: … :\|)

Topics

Markup	Result	Meaning
`#html67`	#html67	topic pill (hashtag) — like a <tag>
`#accessibility`	#accessibility	preceded by a space or at the line start

Block structure (at the line start)

Markup	Result	Meaning
`§ Heading`	§ Heading	H1 — §§ = H2, §§§ = H3
`• List item`	• List item	list — ◦ = level 2, ▪ = level 3
`☐ open`	☐ open	task open — ☑ = done

Props / Attributes

Attribute	Type	Description
`value`	String
`src`	String
`inline`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-glyph`
Prefix-free	<glyph> (runtime aliases to `wl-glyph`)
Status	HTML67 · live

HTML67 reference ↗

<grid>

HTML6

Markup table — wraps a native <table> child or takes JSON; for sortable app tables use <data-table>

HTML67 take on <table>.

Live example

Markup

<grid columns='[{"key":"a","label":"Column A"},{"key":"b","label":"Column B"}]' rows='[{"a":"1","b":"2"},{"a":"3","b":"4"}]'></grid>

Props / Attributes

Attribute	Type	Description
`columns`	Array
`rows`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-table`
Prefix-free	<grid> (runtime aliases to `wl-table`)
Status	HTML67 · live

HTML67 reference ↗

<heatmap>

HTML6

Heat map (grid)

Live example

Markup

<heatmap data='[{"x":"Mon","y":"W1","value":3},{"x":"Tue","y":"W1","value":7},{"x":"Wed","y":"W1","value":5},{"x":"Mon","y":"W2","value":8},{"x":"Tue","y":"W2","value":2},{"x":"Wed","y":"W2","value":9}]' height="220"></heatmap>

Props / Attributes

Attribute	Type	Description
`height`	Number
`data`	Array
`animated`	Boolean
`labels`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-heatmap`
Prefix-free	<heatmap> (runtime aliases to `wl-heatmap`)
Status	HTML67 · live

HTML67 reference ↗

<hover-card>

HTML6OpenUI · active ↗

Preview card on hover

Live example

@wilhelm Wilhelm Collective

150 components, zero dependencies.

Opens on hover; data-interest-open keeps it open for this demo.

Markup

<hover-card data-interest-open>
  <a slot="trigger" href="#">@wilhelm</a>
  <strong>Wilhelm Collective</strong>
  <p>150 components, zero dependencies.</p>
</hover-card>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-hover-card`
Prefix-free	<hover-card> (runtime aliases to `wl-hover-card`)
Status	HTML67 · live

HTML67 reference ↗

<icon>

HTML6

Monochrome icon from the shared registry (currentColor) — decorative without label, role=img with one

Live example

Markup

<icon name="mail" size="1.5rem" label="Mail"></icon>
<icon name="phone" size="1.5rem" label="Phone"></icon>
<icon name="pin" size="1.5rem" label="Place"></icon>

Props / Attributes

Attribute	Type	Description
`name`	String
`label`	String
`size`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-icon`
Prefix-free	<icon> (runtime aliases to `wl-icon`)
Status	HTML67 · live

HTML67 reference ↗

<image-gallery>

HTML6

Thumbnail grid + lightbox

Live example

Markup

<image-gallery images='["data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23cdd6e0%27/%3E%3Ctext x=%2716%27 y=%2732%27 font-family=%27sans-serif%27 font-size=%2716%27 fill=%27%23333%27%3EA%3C/text%3E%3C/svg%3E","data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23d6cde0%27/%3E%3Ctext x=%2716%27 y=%2732%27 font-family=%27sans-serif%27 font-size=%2716%27 fill=%27%23333%27%3EB%3C/text%3E%3C/svg%3E"]'></image-gallery>

Props / Attributes

Attribute	Type	Description
`images`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-image-gallery`
Prefix-free	<image-gallery> (runtime aliases to `wl-image-gallery`)
Status	HTML67 · live

HTML67 reference ↗

<include>

HTML6

Embeds a partial (no build)

Live example

Markup

<include src="/html67/partials/feature-card.html" data-emoji="📦" data-title="Partial" data-body="From its own file, no build."></include>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-include`
Prefix-free	<include> (runtime aliases to `wl-include`)
Status	HTML67 · live

HTML67 reference ↗

<input-otp>

HTML6

One-time code input — paste/autofill aware

Live example

Markup

<input-otp></input-otp>

Props / Attributes

Attribute	Type	Description
`length`	Number
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-input-otp`
Prefix-free	<input-otp> (runtime aliases to `wl-input-otp`)
Status	HTML67 · live

HTML67 reference ↗

<katex>

HTML6

Math formula (KaTeX)

Live example

Markup

<katex tex="\frac{a}{b} = c^2"></katex>

Props / Attributes

Attribute	Type	Description
`tex`	String
`display`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-katex`
Prefix-free	<katex> (runtime aliases to `wl-katex`)
Status	HTML67 · live

HTML67 reference ↗

<list>

HTML6

Clickable row list

Live example

Item A 2 min ago Item B yesterday

Markup

<list>
  <a href="#" data-value="a">Item A <small>2 min ago</small></a>
  <a href="#" data-value="b">Item B <small>yesterday</small></a>
</list>

Props / Attributes

Attribute	Type	Description
`items`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-list`
Prefix-free	<list> (runtime aliases to `wl-list`)
Status	HTML67 · live

HTML67 reference ↗

<list-of>

HTML6

Auto-generated list of figures/tables — collects every numbered <figureblock> on the page

Live example

Markup

<figureblock ref="fig-b" caption="First figure." src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27150%27%3E%3Crect width=%27320%27 height=%27150%27 fill=%27%23dde3ea%27/%3E%3C/svg%3E" alt="Demo figure"></figureblock>
<list-of kind="figure"></list-of>

Props / Attributes

Attribute	Type	Description
`kind`	figure · table
`heading`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-list-of`
Prefix-free	<list-of> (runtime aliases to `wl-list-of`)
Status	HTML67 · live

HTML67 reference ↗

<lottie>

HTML6

Lottie animation

Live example

Markup

<lottie src="/components/assets/demo-pulse.json" loop autoplay height="10rem"></lottie>

Props / Attributes

Attribute	Type	Description
`src`	String
`loop`	Boolean
`autoplay`	Boolean
`height`	String
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-lottie`
Prefix-free	<lottie> (runtime aliases to `wl-lottie`)
Status	HTML67 · live

HTML67 reference ↗

<marquee>

HTML6

↺ Historic native tag name — HTML67 deliberately re-specifies it (reduced-motion safe). The legacy native element is obsolete.

Scrolling text — HTML67 revives it (reduced-motion safe)

Live example

Breaking news — HTML67 brings the marquee back …

Markup

<marquee>Breaking news — HTML67 brings the marquee back …</marquee>

Props / Attributes

Attribute	Type	Description
`direction`	left · right
`speed`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-marquee`
Prefix-free	<marquee> (runtime aliases to `wl-marquee`)
Status	HTML67 · live

HTML67 reference ↗

<menubar>

HTML6OpenUI · active ↗

Menu bar (File/Edit…)

Live example

Markup

<menubar menus='[{"label":"File","items":[{"label":"New","value":"new"},{"label":"Open","value":"open"}]},{"label":"Edit","items":[{"label":"Copy","value":"copy"}]}]'></menubar>

Props / Attributes

Attribute	Type	Description
`menus`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-menubar`
Prefix-free	<menubar> (runtime aliases to `wl-menubar`)
Status	HTML67 · live

HTML67 reference ↗

<mermaid>

HTML6

Diagram from text (Mermaid)

Live example

Markup

<mermaid code="graph TD; A--&gt;B--&gt;C"></mermaid>

Props / Attributes

Attribute	Type	Description
`code`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-mermaid`
Prefix-free	<mermaid> (runtime aliases to `wl-mermaid`)
Status	HTML67 · live

HTML67 reference ↗

<modal>

HTML6

Modal (HTML67 take on <dialog>)

HTML67 take on <dialog>.

Live example

This cannot be undone.

Uses the native dialog top layer — Escape and backdrop click close it.

Markup

<button onclick="this.nextElementSibling.show()">Open modal</button>
<modal heading="Discard changes?">
  This cannot be undone.
  <button slot="footer">Cancel</button>
</modal>

Props / Attributes

Attribute	Type	Description
`open`	Boolean
`heading`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-dialog`
Prefix-free	<modal> (runtime aliases to `wl-dialog`)
Status	HTML67 · live

HTML67 reference ↗

<model>

HTML6

3D model viewer (glTF/GLB) — a file renderer like <img>, just for 3D

Live example

Renders the built-in CC-BY sample model — set src for your own glTF/GLB.

Markup

<model height="16rem" license="by" creator="Google" date="2017-01-01" work-url="https://poly.google.com/"></model>

Props / Attributes

Attribute	Type	Description
`src`	String
`poster`	String
`alt`	String
`height`	String
`auto-rotate`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-model-viewer`
Prefix-free	<model> (runtime aliases to `wl-model-viewer`)
Status	HTML67 · live

HTML67 reference ↗

<msg>

HTML6

One chat message (child of <chat>)

Child element of <chat> — like <li> in <ul>.

Live example

One message, declarative.

Markup

<msg from="Ada" side="in" time="14:02">One message, declarative.</msg>

Props / Attributes

Attribute	Type	Description
`from`	String
`side`	in · out
`time`	String
`datetime`	String	Konventions-Alias für time (SPEC: Zeitpunkte heißen datetime)
`status`	sent · delivered · read
`avatar`	String
`locale`	String
`typing`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-msg`
Prefix-free	<msg> (runtime aliases to `wl-msg`)
Status	HTML67 · live

HTML67 reference ↗

<navbar>

HTML6OpenUI · active ↗

Responsive navbar — native popover hamburger, no JS soup

Live example

Wilhelm Home Docs Pricing

Toggle button and popover panel are generated by the element — narrow it to see the hamburger.

Markup

<navbar active="home">
  <a slot="brand" href="#">Wilhelm</a>
  <a href="#" data-value="home">Home</a>
  <a href="#" data-value="docs">Docs</a>
  <a href="#" data-value="pricing">Pricing</a>
</navbar>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<nav-menu>`

navbar without brand/hamburger — same active/select logic

Home Docs Pricing

<nav-menu active="home">
  <a href="#" data-value="home">Home</a>
  <a href="#" data-value="docs">Docs</a>
  <a href="#" data-value="pricing">Pricing</a>
</nav-menu>

Props / Attributes

Attribute	Type	Description
`active`	String
`breakpoint`	String
`narrow`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-navbar`
Prefix-free	<navbar> (runtime aliases to `wl-navbar`)
Status	HTML67 · live

HTML67 reference ↗

<pagination>

HTML6

Page through results

Live example

Markup

<pagination page="2" total="8"></pagination>

Props / Attributes

Attribute	Type	Description
`page`	Number
`total`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-pagination`
Prefix-free	<pagination> (runtime aliases to `wl-pagination`)
Status	HTML67 · live

HTML67 reference ↗

<pdf>

HTML6

PDF viewer

Live example

Markup

<pdf src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" license="by" creator="Mozilla" date="2009-06-15" work-url="https://mozilla.github.io/pdf.js/"></pdf>

Props / Attributes

Attribute	Type	Description
`src`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-pdf`
Prefix-free	<pdf> (runtime aliases to `wl-pdf`)
Status	HTML67 · live

HTML67 reference ↗

<player>

HTML6

Video/audio player

Live example

The license attributes render the Creative Commons attribution below the player.

Markup

<player src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" poster="https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg" license="by" creator="Blender Foundation" date="2008-05-30" work-url="https://peach.blender.org/"></player>

Props / Attributes

Attribute	Type	Description
`src`	String
`type`	video · audio
`poster`	String
`provider`	String
`note`	String
`consent`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-player`
Prefix-free	<player> (runtime aliases to `wl-player`)
Status	HTML67 · live

HTML67 reference ↗

<playlist>

HTML6

Media playlist

Live example

Markup

<playlist items='[{"title":"Intro","src":"/components/assets/demo-tone.wav"},{"title":"Chapter 1","src":"/components/assets/demo-tone.wav"},{"title":"Chapter 2","src":"/components/assets/demo-tone.wav"}]'></playlist>

Props / Attributes

Attribute	Type	Description
`items`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-playlist`
Prefix-free	<playlist> (runtime aliases to `wl-playlist`)
Status	HTML67 · live

HTML67 reference ↗

<popover>

HTML6OpenUI · graduated ↗

Floating content on click

Live example

Floating content.

Markup

<popover>
  <button slot="trigger">Open popover</button>
  Floating content.
</popover>

Props / Attributes

Attribute	Type	Description
`open`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-popover`
Prefix-free	<popover> (runtime aliases to `wl-popover`)
Status	HTML67 · live

HTML67 reference ↗

<progressbar>

HTML6

Progress bar — indeterminate when bare (like native <progress>), shape="ring" for circular

HTML67 take on <progress>.

Live example

Markup

<progressbar value="60" max="100"></progressbar>
<progressbar></progressbar>
<progressbar value="68" shape="ring"></progressbar>

Props / Attributes

Attribute	Type	Description
`value`	Number
`max`	Number
`shape`	String	''\|'ring' — Kreis statt Balken (ersetzt <ring>)
`size`	Number	Ring-Durchmesser in px

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-progress`
Prefix-free	<progressbar> (runtime aliases to `wl-progress`)
Status	HTML67 · live

HTML67 reference ↗

<qr>

HTML6

QR code + scanner

Live example

Markup

<qr value="https://html67.org"></qr>

Props / Attributes

Attribute	Type	Description
`value`	String
`size`	Number
`scan`	Boolean
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-qr`
Prefix-free	<qr> (runtime aliases to `wl-qr`)
Status	HTML67 · live

HTML67 reference ↗

<quantity-stepper>

HTML6

Quantity stepper (+/–)

Live example

Markup

<quantity-stepper value="2"></quantity-stepper>

Props / Attributes

Attribute	Type	Description
`value`	Number
`min`	Number
`max`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-quantity-stepper`
Prefix-free	<quantity-stepper> (runtime aliases to `wl-quantity-stepper`)
Status	HTML67 · live

HTML67 reference ↗

<radio-group>

HTML6

Radio Group

Live example

Markup

<radio-group value="a" options='[{"value":"a","label":"Option A"},{"value":"b","label":"Option B"}]'></radio-group>

Props / Attributes

Attribute	Type	Description
`options`	Array
`value`	String
`label`	String
`disabled`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-radio-group`
Prefix-free	<radio-group> (runtime aliases to `wl-radio-group`)
Status	HTML67 · live

HTML67 reference ↗

<range>

HTML6OpenUI · active ↗

Value slider — ticks + single/dual thumb

Live example

Markup

<range value="60" ticks></range>
<range values="20,60" ticks="10"></range>

Props / Attributes

Attribute	Type	Description
`min`	Number
`max`	Number
`step`	Number
`value`	Number
`values`	String	"20,60" → Multi-Thumb
`ticks`	String	"" (Boolean) oder Zahl = Anzahl
`stepbetween`	Number	Mindestabstand der Thumbs (Multi)
`disabled`	Boolean
`name`	String
`label`	String	a11y-Name der Thumbs (Konvention: label)

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-range`
Prefix-free	<range> (runtime aliases to `wl-range`)
Status	HTML67 · live

HTML67 reference ↗

<rating>

HTML6

Star rating (read-only, half steps)

Live example

Markup

<rating value="3.5" count="128"></rating>

Props / Attributes

Attribute	Type	Description
`value`	Number
`max`	Number
`count`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-rating`
Prefix-free	<rating> (runtime aliases to `wl-rating`)
Status	HTML67 · live

HTML67 reference ↗

<sankey>

HTML6

Flow diagram

Live example

Markup

<sankey data='{"nodes":[{"name":"Solar"},{"name":"Wind"},{"name":"Grid"},{"name":"Homes"},{"name":"Industry"}],"links":[{"source":"Solar","target":"Grid","value":8},{"source":"Wind","target":"Grid","value":12},{"source":"Grid","target":"Homes","value":11},{"source":"Grid","target":"Industry","value":9}]}' height="240"></sankey>

Props / Attributes

Attribute	Type	Description
`height`	Number
`data`	Array
`animated`	Boolean
`labels`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-sankey`
Prefix-free	<sankey> (runtime aliases to `wl-sankey`)
Status	HTML67 · live

HTML67 reference ↗

<shneidermap>

HTML6

Treemap (Shneiderman) — also reachable as <treemap>

Live example

Markup

<shneidermap data='{"name":"root","children":[{"name":"A","value":38},{"name":"B","value":27},{"name":"C","value":21},{"name":"D","value":14}]}' height="220"></shneidermap>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<treemap>`

the common name — same element

Props / Attributes

Attribute	Type	Description
`height`	Number
`data`	Array
`animated`	Boolean
`labels`	Boolean

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-treemap`
Prefix-free	<shneidermap> (runtime aliases to `wl-treemap`)
Status	HTML67 · live

HTML67 reference ↗

<sidebar>

HTML6

Workspace navigation

Live example

Workspace Home Docs

Markup

<sidebar active="a" label="Workspace">
  <small data-section>Workspace</small>
  <a href="#" data-value="a">Home</a>
  <a href="#" data-value="b">Docs</a>
</sidebar>

Props / Attributes

Attribute	Type	Description
`items`	Array
`active`	String
`collapsed`	Boolean
`label`	String	a11y-Name der <nav> (SPEC: label = a11y)

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-sidebar`
Prefix-free	<sidebar> (runtime aliases to `wl-sidebar`)
Status	HTML67 · live

HTML67 reference ↗

<signature>

HTML6

Signature field

Live example

Markup

<signature name="Sven Bekesi" place="Munich"></signature>

Props / Attributes

Attribute	Type	Description
`name`	String
`ort`	String
`place`	String	englischer Alias für ort
`label`	String
`height`	Number
`date`	String	signiertes Datum als ANZEIGE-String (überschreibt „heute")
`datetime`	String	Konventions-Alias: ISO-Zeitpunkt, wird per Locale formatiert
`locale`	String	überschreibt die Locale-Kette fürs Datumsformat
`value`	String	PNG-dataURL der Unterschrift
`signed`	Boolean
`locked`	Boolean	signiert, kein „Neu" (final)

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-signature`
Prefix-free	<signature> (runtime aliases to `wl-signature`)
Status	HTML67 · live

HTML67 reference ↗

<skeleton>

HTML6

Loading placeholder

Live example

Markup

<skeleton style="width:14rem;height:1.2rem"></skeleton>

Props / Attributes

Attribute	Type	Description
`w`	String
`h`	String
`radius`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-skeleton`
Prefix-free	<skeleton> (runtime aliases to `wl-skeleton`)
Status	HTML67 · live

HTML67 reference ↗

<skip-nav>

HTML6

Skip-to-content link — invisible until keyboard focus, then jumps and moves focus to the main content

Live example

Invisible until keyboard focus: press Tab right after loading and the link appears top-left.

Markup

<skip-nav></skip-nav>

Props / Attributes

Attribute	Type	Description
`target`	String
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-skip-nav`
Prefix-free	<skip-nav> (runtime aliases to `wl-skip-nav`)
Status	HTML67 · live

HTML67 reference ↗

<social-links>

HTML6

Social Links

Live example

GH 𝕏 @

Markup

<social-links>
  <a href="#" aria-label="GitHub">GH</a>
  <a href="#" aria-label="X">𝕏</a>
  <a href="#" aria-label="Mail">@</a>
</social-links>

Props / Attributes

Attribute	Type	Description
`items`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-social-links`
Prefix-free	<social-links> (runtime aliases to `wl-social-links`)
Status	HTML67 · live

HTML67 reference ↗

<spinner>

HTML6

Loading spinner

Live example

Markup

<spinner></spinner>

Props / Attributes

Attribute	Type	Description
`size`	Number
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-spinner`
Prefix-free	<spinner> (runtime aliases to `wl-spinner`)
Status	HTML67 · live

HTML67 reference ↗

<split>

HTML6

Resizable split panel

Live example

Left pane

Right pane — drag the divider

The first two children become the panes — no slot attributes needed.

Markup

<split style="height:10rem">
  <div>Left pane</div>
  <div>Right pane — drag the divider</div>
</split>

Props / Attributes

Attribute	Type	Description
`vertical`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-split`
Prefix-free	<split> (runtime aliases to `wl-split`)
Status	HTML67 · live

HTML67 reference ↗

<split-button>

HTML6

Split Button

Live example

Save

The ▾ opens the menu; the main button stays one click.

Markup

<split-button>
  Save
  <button slot="menu" data-value="save-as">Save as …</button>
  <button slot="menu" data-value="export">Export</button>
</split-button>

Props / Attributes

Attribute	Type	Description
`disabled`	Boolean
`open`	Boolean
`menu-label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-split-button`
Prefix-free	<split-button> (runtime aliases to `wl-split-button`)
Status	HTML67 · live

HTML67 reference ↗

<stat>

HTML6

Stat

Live example

Markup

<stat label="Revenue" value="€48.2k" delta="12%" trend="up"></stat>
<stat label="Deals" value="37" delta="3%" trend="down"></stat>

Props / Attributes

Attribute	Type	Description
`label`	String
`value`	String
`delta`	String
`trend`	up · down

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-stat`
Prefix-free	<stat> (runtime aliases to `wl-stat`)
Status	HTML67 · live

HTML67 reference ↗

<state>

HTML6

State

Live example

Hello — clicks.

count is truthy

I agree Visible only while checked. Check the box to continue.

Control flow is attributes on real elements, not pseudo-tags: bind= wires text/inputs (two-way), if=/not toggles, each= repeats the children. Dot-paths only, no expressions — CSP-safe, AI-readable.

Markup

<state data='{"name":"Ada","count":3,"agreed":false,"todos":[{"t":"Spec lesen"},{"t":"Demo bauen"}]}'>
  <p plain>Hello <strong bind="name"></strong> — <strong bind="count"></strong> clicks.</p>
  <input bind="name" placeholder="Your name">
  <button onclick="this.closest('wl-state').bump('count', 1)">+1</button>
  <badge variant="accent" if="count">count is truthy</badge>
  <ul each="todos">
    <li bind="item.t"></li>
  </ul>
  <label><input type="checkbox" bind="agreed"> I agree</label>
  <alert variant="success" if="agreed">Visible only while checked.</alert>
  <alert variant="warn" if="agreed" not>Check the box to continue.</alert>
</state>

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-state`
Prefix-free	<state> (runtime aliases to `wl-state`)
Status	HTML67 · live

HTML67 reference ↗

<stepper>

HTML6

Step-by-step indicator

Live example

Markup

<stepper steps='["Account","Address","Payment"]' current="1"></stepper>

Props / Attributes

Attribute	Type	Description
`steps`	Array
`current`	Number

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-stepper`
Prefix-free	<stepper> (runtime aliases to `wl-stepper`)
Status	HTML67 · live

HTML67 reference ↗

<switch>

HTML6OpenUI · active ↗

Toggle switch

Live example

Markup

<switch label="Notifications"></switch>

Props / Attributes

Attribute	Type	Description
`checked`	Boolean
`disabled`	Boolean
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-switch`
Prefix-free	<switch> (runtime aliases to `wl-switch`)
Status	HTML67 · live

HTML67 reference ↗

<tab>

HTML6

One tab panel (child of <tabs>)

Child element of <tabs> — like <li> in <ul>.

Live example

First panel. Second panel.

A panel inside <tabs> — its label becomes the tab, the first one starts active.

Markup

<tabs>
  <tab label="Overview">First panel.</tab>
  <tab label="Details">Second panel.</tab>
</tabs>

Props / Attributes

Attribute	Type	Description
`label`	String
`active`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-tab`
Prefix-free	<tab> (runtime aliases to `wl-tab`)
Status	HTML67 · live

HTML67 reference ↗

<tabs>

HTML6

Tab switcher

Live example

Overview content. Activity content. Settings content.

Markup

<tabs>
  <tab label="Overview">Overview content.</tab>
  <tab label="Activity">Activity content.</tab>
  <tab label="Settings">Settings content.</tab>
</tabs>

Props / Attributes

Attribute	Type	Description
`tabs`	Array
`active`	String

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-tabs`
Prefix-free	<tabs> (runtime aliases to `wl-tabs`)
Status	HTML67 · live

HTML67 reference ↗

<tag>

HTML6

Removable chip

Live example

design html67

Markup

<tag>design</tag>
<tag>html67</tag>

Props / Attributes

Attribute	Type	Description
`removable`	Boolean
`remove-label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-tag`
Prefix-free	<tag> (runtime aliases to `wl-tag`)
Status	HTML67 · live

HTML67 reference ↗

<time-picker>

HTML6

Time picker — trigger + popover list of times (sister of <date-picker>)

Live example

Markup

<time-picker value="09:30" step="15"></time-picker>

Props / Attributes

Attribute	Type	Description
`value`	String
`step`	Number
`min`	String
`max`	String
`placeholder`	String
`open`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-time-picker`
Prefix-free	<time-picker> (runtime aliases to `wl-time-picker`)
Status	HTML67 · live

HTML67 reference ↗

<timeline>

HTML6

Vertical activity list

Live example

Created Mon

Entry created.

Edited Tue

Status changed.

Markup

<timeline>
  <li><strong>Created</strong> <small>Mon</small><p>Entry created.</p></li>
  <li data-accent><strong>Edited</strong> <small>Tue</small><p>Status changed.</p></li>
</timeline>

Props / Attributes

Attribute	Type	Description
`items`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-timeline`
Prefix-free	<timeline> (runtime aliases to `wl-timeline`)
Status	HTML67 · live

HTML67 reference ↗

<toc>

HTML6

Toc

Live example

Reads the headings of this very page — nothing to configure.

Markup

<toc scope=".content"></toc>

Props / Attributes

Attribute	Type	Description
`scope`	String
`depth`	String
`scrollspy`	Boolean
`numbered`	Boolean
`observe`	Boolean
`label`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-toc`
Prefix-free	<toc> (runtime aliases to `wl-toc`)
Status	HTML67 · live

HTML67 reference ↗

<toggle>

HTML6OpenUI · active ↗

Toggle

Live example

Toggle

Markup

<toggle>Toggle</toggle>

Props / Attributes

Attribute	Type	Description
`pressed`	Boolean
`mixed`	Boolean
`disabled`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-toggle`
Prefix-free	<toggle> (runtime aliases to `wl-toggle`)
Status	HTML67 · live

HTML67 reference ↗

<toolbar>

HTML6OpenUI · active ↗

Toolbar — one tab-stop, arrow-key navigation

Live example

One tab stop, arrow keys move within — try it with the keyboard.

Markup

<toolbar label="Format">
  <button>B</button>
  <button>I</button>
  <button>U</button>
</toolbar>

Props / Attributes

Attribute	Type	Description
`label`	String
`orientation`	horizontal · vertical
`disabled`	Boolean

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-toolbar`
Prefix-free	<toolbar> (runtime aliases to `wl-toolbar`)
Status	HTML67 · live

HTML67 reference ↗

<tooltip>

HTML6OpenUI · graduated ↗

Quick info on hover

Live example

Markup

<tooltip text="A helpful tooltip">
  <button>Hover me</button>
</tooltip>

Props / Attributes

Attribute	Type	Description
`text`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-tooltip`
Prefix-free	<tooltip> (runtime aliases to `wl-tooltip`)
Status	HTML67 · live

HTML67 reference ↗

<tree>

HTML6

Expandable tree

Live example

Markup

<tree nodes='[{"label":"Root","children":[{"label":"A"},{"label":"B","children":[{"label":"B1"}]}]}]'></tree>

Props / Attributes

Attribute	Type	Description
`nodes`	Array

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-tree`
Prefix-free	<tree> (runtime aliases to `wl-tree`)
Status	HTML67 · live

HTML67 reference ↗

<waveform>

HTML6

Audio waveform player (WaveSurfer) — click or Enter toggles play/pause

Live example

Markup

<waveform src="/components/assets/demo-tone.wav" height="64"></waveform>

Props / Attributes

Attribute	Type	Description
`src`	String
`height`	Number

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-waveform`
Prefix-free	<waveform> (runtime aliases to `wl-waveform`)
Status	HTML67 · live

HTML67 reference ↗

<abbreviation>

HTML7

Abbreviation — first mention spells out the full form

HTML67 take on <abbr>.

Live example

SVM gets spelled out on first mention — later mentions like this SVM stay short (tooltip only).

Markup

<p plain><abbreviation full="Support Vector Machine">SVM</abbreviation> gets spelled out on first mention — later mentions like this <abbreviation full="Support Vector Machine">SVM</abbreviation> stay short (tooltip only).</p>

Props / Attributes

Attribute	Type	Description
`full`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-abbr`
Prefix-free	<abbreviation> (runtime aliases to `wl-abbr`)
Status	HTML67 · live

HTML67 reference ↗

<bibliography>

HTML7

Collects every <citation> on the page into a formatted reference list (APA/IEEE/MLA/DIN)

Live example

One claim and another .

Collects every <citation> on the page into a reference list.

Markup

<p>One claim <citation author="Feynman, R." year="1965" title="The Character of Physical Law"></citation> and another <citation author="Shneiderman, B." year="1992" title="Tree Visualization with Tree-Maps"></citation>.</p>
<bibliography></bibliography>

Props / Attributes

Attribute	Type	Description
`format`	String
`heading`	String
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-bibliography`
Prefix-free	<bibliography> (runtime aliases to `wl-bibliography`)
Status	HTML67 · live

HTML67 reference ↗

<citation>

HTML7

Inline source marker — click for the full reference, DOI link and copy (HTML67 take on <cite>)

HTML67 take on <cite>.

Live example

Markup

<citation author="Feynman, R." year="1965" title="The Character of Physical Law"></citation>

Props / Attributes

Attribute	Type	Description
`format`	String
`source`	Object

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-cite`
Prefix-free	<citation> (runtime aliases to `wl-cite`)
Status	HTML67 · live

HTML67 reference ↗

<consent>

HTML7

GDPR cookie banner

Live example

inline keeps the banner in the page flow — without it, it fixes to the viewport edge.

Markup

<consent inline policy="/datenschutz/"></consent>

Props / Attributes

Attribute	Type	Description
`policy`	String
`inline`	Boolean

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-consent`
Prefix-free	<consent> (runtime aliases to `wl-consent`)
Status	HTML67 · live

HTML67 reference ↗

<contact>

HTML7

Contact card (vCard)

Live example

Markup

<contact name="Sven Bekesi" org="Wilhelm Collective" title="Founder" tel="+49 89 123456" email="sven@bekesi.group" url="https://wilhelm.tech"></contact>

Props / Attributes

Attribute	Type	Description
`name`	String
`org`	String
`title`	String
`tel`	String
`email`	String
`url`	String
`address`	String
`note`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-contact`
Prefix-free	<contact> (runtime aliases to `wl-contact`)
Status	HTML67 · live

HTML67 reference ↗

<datetime>

HTML7

Localized date/time — bare renders the current moment

Live example

Markup

<datetime value="2026-06-28T10:00"></datetime>
<datetime mode="date"></datetime>

Props / Attributes

Attribute	Type	Description
`datetime`	String
`value`	String
`mode`	date · time · datetime
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-datetime`
Prefix-free	<datetime> (runtime aliases to `wl-datetime`)
Status	HTML67 · live

HTML67 reference ↗

<document>

HTML7

Signable document — one signature pad per party, sealed with a SHA-256 fingerprint once everyone has signed

Live example

The parties agree on the following terms …

Markup

<document title="Service contract (excerpt)" parties='[{"name":"Erika Mustermann","role":"Client"},{"name":"Sven Bekesi","role":"Contractor"}]'>
  <p>The parties agree on the following terms …</p>
</document>

Props / Attributes

Attribute	Type	Description
`title`	String
`parties`	Array
`jsonld`	Boolean	schema.org/DigitalDocument in document.head mitschreiben

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-document`
Prefix-free	<document> (runtime aliases to `wl-document`)
Status	HTML67 · live

HTML67 reference ↗

<equation>

HTML7

Numbered equation — ^n superscripts, referencable via <ref>

Live example

E = mc^2

Markup

<equation ref="eq-1">E = mc^2</equation>

Props / Attributes

Attribute	Type	Description
`ref`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-equation`
Prefix-free	<equation> (runtime aliases to `wl-equation`)
Status	HTML67 · live

HTML67 reference ↗

<event>

HTML7

Event (ICS)

Live example

Markup

<event title="HTML67 Launch" start="2026-07-01T10:00" end="2026-07-01T11:00" location="Munich" description="Release event"></event>

Props / Attributes

Attribute	Type	Description
`title`	String
`start`	String
`end`	String
`location`	String
`description`	String
`url`	String
`all-day`	Boolean
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-event`
Prefix-free	<event> (runtime aliases to `wl-event`)
Status	HTML67 · live

HTML67 reference ↗

<footnote>

HTML7

Footnote — content lives inline where it belongs; renders a numbered mark

Live example

Every claim can carry its noteRight where it belongs — the note lives inline in the markup, the reader sees a number. without leaving the text flow.

Markup

Every claim can carry its note<footnote>Right where it belongs — the note lives inline in the markup, the reader sees a number.</footnote> without leaving the text flow.
<footnotes heading="Notes"></footnotes>

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-footnote`
Prefix-free	<footnote> (runtime aliases to `wl-footnote`)
Status	HTML67 · live

HTML67 reference ↗

<footnotes>

HTML7

Collects all <footnote> into a numbered endnote list (with back-links)

Live example

The stats cite two sourcesSurvey 2026, n=2.401. in one sentenceField study, preliminary..

Markup

The stats cite two sources<footnote>Survey 2026, n=2.401.</footnote> in one sentence<footnote>Field study, preliminary.</footnote>.
<footnotes heading="Notes"></footnotes>

Props / Attributes

Attribute	Type	Description
`heading`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-footnotes`
Prefix-free	<footnotes> (runtime aliases to `wl-footnotes`)
Status	HTML67 · live

HTML67 reference ↗

<frist>

HTML7

Legal deadline that computes itself (§§ 187–193 BGB)

Live example

Zugang am 15.03.2026, Widerruf binnen 14 Tagen — Fristende:

Kündigungsfrist 3 Monate ab Monatsbeginn 01.03.2026: — ohne § 193:

Deadline math per BGB, hover for the full derivation: § 187 I skips the event day (typ="beginn" counts it, § 187 II), § 188 II/III end week/month/year terms on the corresponding day or the last day of a short month, and § 193 pushes a Sat/Sun/public-holiday end to the next working day — kein-193 switches that off.

Markup

<p>Zugang am 15.03.2026, Widerruf binnen 14 Tagen — Fristende: <frist beginn="2026-03-15" dauer="14 tage"></frist></p>
<p>Kündigungsfrist 3 Monate ab Monatsbeginn 01.03.2026: <frist beginn="2026-03-01" dauer="3 monate" typ="beginn"></frist> — ohne § 193: <frist beginn="2026-03-01" dauer="3 monate" typ="beginn" kein-193></frist></p>

Props / Attributes

Attribute	Type	Description
`beginn`	String
`dauer`	String
`typ`	String
`kein-193`	Boolean
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-frist`
Prefix-free	<frist> (runtime aliases to `wl-frist`)
Status	HTML67 · live

HTML67 reference ↗

<iban>

HTML7

IBAN field with validation

Live example

Markup

<iban value="DE89370400440532013000"></iban>

Props / Attributes

Attribute	Type	Description
`value`	String
`placeholder`	String
`label`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-iban`
Prefix-free	<iban> (runtime aliases to `wl-iban`)
Status	HTML67 · live

HTML67 reference ↗

<legal-accept>

HTML7

Terms/privacy consent

Live example

Markup

<legal-accept version="1.0" agb-url="#" privacy-url="#"></legal-accept>

Props / Attributes

Attribute	Type	Description
`version`	String
`agb-url`	String
`privacy-url`	String
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-legal-accept`
Prefix-free	<legal-accept> (runtime aliases to `wl-legal-accept`)
Status	HTML67 · live

HTML67 reference ↗

<license>

HTML7

License wrapper (Creative Commons)

Live example

Licensed content

Markup

<license license="by-sa" creator="Wilhelm Collective" date="2026-06-28">
  <card>Licensed content</card>
</license>

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-license`
Prefix-free	<license> (runtime aliases to `wl-license`)
Status	HTML67 · live

HTML67 reference ↗

<norm>

HTML7

Legal norm with section (§/Art.)

Live example

Markup

<norm gesetz="BGB" para="433"></norm>

Props / Attributes

Attribute	Type	Description
`gesetz`	String
`para`	String
`abs`	String
`satz`	String
`nr`	String
`text`	String
`art`	Boolean	Artikel statt Paragraph (GG, EU-Recht)
`href`	String	Quelle überschreiben (Norm nicht auf gesetze-im-internet, z.B. MStV/DSGVO)
`jsonld`	Boolean	schema.org/Legislation als ld+json-Kind mitschreiben

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-norm`
Prefix-free	<norm> (runtime aliases to `wl-norm`)
Status	HTML67 · live

HTML67 reference ↗

<number>

HTML7

Localized number/currency/percent

Live example

Markup

<number value="48990" format="currency" currency="EUR"></number>

Short forms

These bare tags keep working — the catalog documents them here as forms of this element.

`<bytes>`

<number format="bytes"> — human-readable file size, same element

<bytes value="1536000"></bytes>

Props / Attributes

Attribute	Type	Description
`value`	String
`format`	decimal · currency · percent · bytes
`currency`	String
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-number`
Prefix-free	<number> (runtime aliases to `wl-number`)
Status	HTML67 · live

HTML67 reference ↗

<paper>

HTML7

DIN 5008 business letter

Live example

Dear Erika,

this whole page is a single <paper> element — fold marks, address window and date sit at their DIN 5008 positions.

Yours, Wilhelm

Markup

<paper subject="A letter as one element" recipient='["Erika Mustermann","Musterweg 12","12345 Musterstadt"]'>
  <p>Dear Erika,</p>
  <p>this whole page is a single &lt;paper&gt; element — fold marks, address window and date sit at their DIN 5008 positions.</p>
  <p>Yours, Wilhelm</p>
</paper>

Props / Attributes

Attribute	Type	Description
`recipient`	Array
`subject`	String
`return-address`	String
`no-marks`	Boolean
`format`	String
`datetime`	String
`locale`	String

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-paper`
Prefix-free	<paper> (runtime aliases to `wl-paper`)
Status	HTML67 · live

HTML67 reference ↗

<phone>

HTML7

Phone field with country code

Live example

Markup

<phone value="+4989123456" country="DE"></phone>

Props / Attributes

Attribute	Type	Description
`value`	String
`country`	String
`placeholder`	String
`label`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-phone`
Prefix-free	<phone> (runtime aliases to `wl-phone`)
Status	HTML67 · live

HTML67 reference ↗

<place>

HTML7

Place on the map

Live example

Markup

<place name="Munich" address="Maximilianstraße 13" lat="48.139" lng="11.58"></place>

Props / Attributes

Attribute	Type	Description
`name`	String
`address`	String
`lat`	Number
`lng`	Number

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-place`
Prefix-free	<place> (runtime aliases to `wl-place`)
Status	HTML67 · live

HTML67 reference ↗

<price>

HTML7

Localized price — Intl currency formatting, compare-at strikethrough, optional 'from' prefix

Live example

Markup

<price amount="48.99" currency="EUR" compare-at="59.99"></price>

Props / Attributes

Attribute	Type	Description
`amount`	Number
`currency`	String
`compare-at`	Number
`from`	Boolean
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-price`
Prefix-free	<price> (runtime aliases to `wl-price`)
Status	HTML67 · live

HTML67 reference ↗

<product-card>

HTML7

Product card (shop)

Live example

Markup

<product-card title="HTML67 Book" amount="29.99" currency="EUR" rating="4" count="128" image="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27180%27%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23cdd6e0%27/%3E%3Ctext x=%2716%27 y=%2732%27 font-family=%27sans-serif%27 font-size=%2716%27 fill=%27%23333%27%3EA%3C/text%3E%3C/svg%3E"></product-card>

Props / Attributes

Attribute	Type	Description
`title`	String
`image`	String
`amount`	Number
`compare-at`	Number
`currency`	String
`rating`	Number
`count`	Number

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-product-card`
Prefix-free	<product-card> (runtime aliases to `wl-product-card`)
Status	HTML67 · live

HTML67 reference ↗

<ref>

HTML7

Cross-reference that renders "Figure N" / "Table N" and renumbers automatically

Live example

See for details.

Markup

<figureblock ref="fig-a" caption="A demo figure." src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27320%27 height=%27150%27%3E%3Crect width=%27320%27 height=%27150%27 fill=%27%23dde3ea%27/%3E%3C/svg%3E" alt="Demo figure"></figureblock>
<p>See <ref to="fig-a"></ref> for details.</p>

Props / Attributes

Attribute	Type	Description
`to`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-ref`
Prefix-free	<ref> (runtime aliases to `wl-ref`)
Status	HTML67 · live

HTML67 reference ↗

<sepa-mandate>

HTML7

SEPA direct-debit mandate

Live example

Markup

<sepa-mandate></sepa-mandate>

Props / Attributes

Attribute	Type	Description
`creditor`	String
`creditor-id`	String
`creditor-address`	String
`mandate-ref`	String
`type`	String	recurring \| oneoff
`jsonld`	Boolean	schema.org-Datensatz in document.head mitschreiben

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-sepa-mandate`
Prefix-free	<sepa-mandate> (runtime aliases to `wl-sepa-mandate`)
Status	HTML67 · live

HTML67 reference ↗

<since>

HTML7

Relative time ("3 days ago")

Live example

Markup

<since datetime="2026-06-01T12:00"></since>

Props / Attributes

Attribute	Type	Description
`datetime`	String
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-since`
Prefix-free	<since> (runtime aliases to `wl-since`)
Status	HTML67 · live

HTML67 reference ↗

<unit>

HTML7

Quantity with unit — non-breaking space, ^n superscripts, locale-aware decimal separator

Live example

·

Markup

<unit value="90" unit="km/h"></unit> · <unit value="9.81" unit="m/s^2"></unit>

Props / Attributes

Attribute	Type	Description
`value`	String
`unit`	String
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-unit`
Prefix-free	<unit> (runtime aliases to `wl-unit`)
Status	HTML67 · live

HTML67 reference ↗

<a>

HTML2

Hyperlink

Syntax

<a>…</a>

Attributes

Attribute	Type / values	Description
`href`	URL	Hyperlink target
`target`	_self · _blank · _parent · _top	Where the target opens
`rel`	noopener · noreferrer · nofollow · external	Relationship to the target
`download`	String	Downloads instead of navigating
`hreflang`	String	Language of the target
`type`	MIME	MIME type of the target
`referrerpolicy`	no-referrer · origin · strict-origin-when-cross-origin	Which referrer is sent
`ping`	URL	Ping URLs on click

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<abbr>

HTML2

Abbreviation

Syntax

<abbr>…</abbr>

Attributes

Attribute	Type / values	Description
`title`	String	Expanded form of the abbreviation

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<address>

HTML2

Contact information

Syntax

<address>…</address>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<area>

HTML2

Image-map region

Syntax

<area>…</area>

Attributes

Attribute	Type / values	Description
`shape`	rect · circle · poly · default	Shape of the region
`coords`	String	Coordinates of the shape
`href`	URL	Link target
`alt`	String	Alternative text
`target`	_self · _blank · _parent · _top	Where the target opens
`rel`	String	Relationship to the target
`download`	String	Download

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<article>

HTML5

Self-contained composition

Syntax

<article>…</article>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<aside>

HTML5

Tangentially related content

Syntax

<aside>…</aside>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<audio>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <player> / <waveform>. → player

Sound content

Syntax

<audio>…</audio>

Attributes

Attribute	Type / values	Description
`src`	URL	Audio source
`controls`	Boolean	Show controls
`autoplay`	Boolean	Play automatically
`loop`	Boolean	Loop endlessly
`muted`	Boolean	Start muted
`preload`	none · metadata · auto	Preload behavior
`crossorigin`	anonymous · use-credentials	CORS mode

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Richer in HTML67	<player> / <waveform>
Status	Standard

<b>

HTML2

Bring-attention text

Syntax

<b>…</b>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<base>

HTML2

Base URL for relative links

Syntax

<base>…</base>

Attributes

Attribute	Type / values	Description
`href`	URL	Base URL for relative links
`target`	_self · _blank · _parent · _top	Default target for links/forms

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<bdi>

HTML5

Bidirectional isolate

Syntax

<bdi>…</bdi>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<bdo>

HTML2

Bidirectional override

Syntax

<bdo>…</bdo>

Attributes

Attribute	Type / values	Description
`dir`	ltr · rtl	Forced text direction

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<blockquote>

HTML2

Block quotation

Syntax

<blockquote>…</blockquote>

Attributes

Attribute	Type / values	Description
`cite`	URL	Source of the quotation

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<body>

HTML2

Document body

Syntax

<body>…</body>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<br>

HTML2

Line break

Syntax

<br>…</br>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<button>

HTML2

Button

Syntax

<button>…</button>

Attributes

Attribute	Type / values	Description
`type`	submit · reset · button	Behavior
`name`	String	Name on submission
`value`	String	Value on submission
`disabled`	Boolean	Disabled
`form`	String	id of the form
`formaction`	URL	Overrides form action
`formmethod`	get · post	Overrides form method
`popovertarget`	String	id of a popover target

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<canvas>

HTML5

Scriptable graphics

Syntax

<canvas>…</canvas>

Attributes

Attribute	Type / values	Description
`width`	Number	Canvas width in px
`height`	Number	Canvas height in px

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<caption>

HTML2

Table caption

Syntax

<caption>…</caption>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<cite>

HTML2

Title of a work

Syntax

<cite>…</cite>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<code>

HTML2

Inline code

Syntax

<code>…</code>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<col>

HTML2

Table column

Syntax

<col>…</col>

Attributes

Attribute	Type / values	Description
`span`	Number	Number of spanned columns

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<colgroup>

HTML2

Table column group

Syntax

<colgroup>…</colgroup>

Attributes

Attribute	Type / values	Description
`span`	Number	Number of columns in the group

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<data>

HTML5

Machine-readable value

Syntax

<data>…</data>

Attributes

Attribute	Type / values	Description
`value`	String	Machine-readable value

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<datalist>

HTML5

Autocomplete options

Syntax

<datalist>…</datalist>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<dd>

HTML2

Description detail

Syntax

<dd>…</dd>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<del>

HTML2

Deleted text

Syntax

<del>…</del>

Attributes

Attribute	Type / values	Description
`cite`	URL	Source of the change
`datetime`	Datetime	Time of deletion

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<details>

HTML5

Disclosure widget

Syntax

<details>…</details>

Attributes

Attribute	Type / values	Description
`open`	Boolean	Start expanded
`name`	String	Group (only one open)

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<dfn>

HTML2

Defining instance

Syntax

<dfn>…</dfn>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<dialog>

HTML5

Dialog / modal

Syntax

<dialog>…</dialog>

Attributes

Attribute	Type / values	Description
`open`	Boolean	Start visible

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<div>

HTML2

Generic block container

Syntax

<div>…</div>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<dl>

HTML2

Description list

Syntax

<dl>…</dl>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<dt>

HTML2

Description term

Syntax

<dt>…</dt>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<em>

HTML2

Stress emphasis

Syntax

<em>…</em>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<embed>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <include> / <player>. → include

External plugin content

Syntax

<embed>…</embed>

Attributes

Attribute	Type / values	Description
`src`	URL	Resource
`type`	MIME	MIME type
`width`	Number	Width in px
`height`	Number	Height in px

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Richer in HTML67	<include> / <player>
Status	Standard

<fencedframe>

HTML5

🧪 Experimental — not yet available everywhere.

Privacy-preserving embed

Syntax

<fencedframe>…</fencedframe>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<fieldset>

HTML2

Form control group

Syntax

<fieldset>…</fieldset>

Attributes

Attribute	Type / values	Description
`disabled`	Boolean	Disable all fields
`form`	String	id of the form
`name`	String	Group name

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<figcaption>

HTML5

Figure caption

Syntax

<figcaption>…</figcaption>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<figure>

HTML5

Self-contained figure

Syntax

<figure>…</figure>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<footer>

HTML5

Footer content

Syntax

<footer>…</footer>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<form>

HTML2

Form

Syntax

<form>…</form>

Attributes

Attribute	Type / values	Description
`action`	URL	Submission target
`method`	get · post · dialog	HTTP method
`enctype`	application/x-www-form-urlencoded · multipart/form-data · text/plain	Encoding
`target`	_self · _blank · _parent · _top	Where the response opens
`novalidate`	Boolean	Skip validation
`autocomplete`	on · off	Autocomplete
`name`	String	Form name
`accept-charset`	String	Allowed character sets

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<h1>

HTML2

Section heading (level 1–6)

Syntax

<h1>…</h1>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<h2>

HTML2

Section heading

Syntax

<h2>…</h2>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<h3>

HTML2

Section heading

Syntax

<h3>…</h3>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<h4>

HTML2

Section heading

Syntax

<h4>…</h4>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<h5>

HTML2

Section heading

Syntax

<h5>…</h5>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<h6>

HTML2

Section heading

Syntax

<h6>…</h6>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<head>

HTML2

Document metadata container

Syntax

<head>…</head>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<header>

HTML5

Introductory content

Syntax

<header>…</header>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<hgroup>

HTML5

Heading + tagline group

Syntax

<hgroup>…</hgroup>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<hr>

HTML2

Thematic break

Syntax

<hr>…</hr>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<html>

HTML2

Document root

Syntax

<html>…</html>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<i>

HTML2

Alternate-voice text

Syntax

<i>…</i>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<iframe>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <include> (Partials) / <player> (Media). → include

Nested browsing context

Syntax

<iframe>…</iframe>

Attributes

Attribute	Type / values	Description
`src`	URL	Embedded page
`srcdoc`	HTML	Inline HTML instead of src
`name`	String	Name of the browsing context
`width`	Number	Width in px
`height`	Number	Height in px
`allow`	String	Permissions policy (camera; microphone …)
`allowfullscreen`	Boolean	Allow fullscreen
`loading`	eager · lazy	Loading strategy
`referrerpolicy`	String	Referrer policy
`sandbox`	allow-scripts · allow-forms · allow-same-origin · allow-popups	Sandbox restrictions

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Richer in HTML67	<include> (Partials) / <player> (Media)
Status	Standard

<img>

HTML2

Image

Syntax

<img>…</img>

Attributes

Attribute	Type / values	Description
`src`	URL	Image source
`alt`	String	Alternative text
`srcset`	String	Sources per resolution/density
`sizes`	String	Display sizes per media query
`width`	Number	Width in px
`height`	Number	Height in px
`loading`	eager · lazy	Loading strategy
`decoding`	sync · async · auto	Decoding hint
`fetchpriority`	high · low · auto	Load priority
`crossorigin`	anonymous · use-credentials	CORS mode
`referrerpolicy`	String	Referrer policy
`usemap`	String	Associated image map
`ismap`	Boolean	Server-side image map

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<input>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <field> / <phone> / <iban> / <date-picker> …. → field

Input control

Syntax

<input>…</input>

Attributes

Attribute	Type / values	Description
`type`	text · email · password · number · tel · url · search · date · time · checkbox · radio · file · range · color · hidden	Input type
`name`	String	Field name on submission
`value`	String	Current value
`placeholder`	String	Placeholder text
`required`	Boolean	Required field
`disabled`	Boolean	Disabled
`readonly`	Boolean	Read-only
`checked`	Boolean	Pre-selected (checkbox/radio)
`min`	String	Minimum value
`max`	String	Maximum value
`step`	Number	Step size
`minlength`	Number	Minimum length
`maxlength`	Number	Maximum length
`pattern`	String	Regex validation
`multiple`	Boolean	Multiple values (file/email)
`accept`	String	Allowed file types
`autocomplete`	String	Autofill hint
`list`	String	id of a <datalist>

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Richer in HTML67	<field> / <phone> / <iban> / <date-picker> …
Status	Standard

<ins>

HTML2

Inserted text

Syntax

<ins>…</ins>

Attributes

Attribute	Type / values	Description
`cite`	URL	Source of the change
`datetime`	Datetime	Time of insertion

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<kbd>

HTML2

Keyboard input

Syntax

<kbd>…</kbd>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<label>

HTML2

Control label

Syntax

<label>…</label>

Attributes

Attribute	Type / values	Description
`for`	String	id of the labeled control
`form`	String	id of the form

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<legend>

HTML2

Fieldset caption

Syntax

<legend>…</legend>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<li>

HTML2

List item

Syntax

<li>…</li>

Attributes

Attribute	Type / values	Description
`value`	Number	Value of this item (in <ol>)

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<link>

HTML2

External resource link

Syntax

<link>…</link>

Attributes

Attribute	Type / values	Description
`rel`	stylesheet · icon · preload · preconnect · manifest · alternate · canonical	Relationship to the resource
`href`	URL	Target of the resource
`type`	MIME	MIME type (text/css …)
`media`	String	Media query for conditional loading
`sizes`	String	Icon sizes (16x16 …)
`as`	script · style · image · font · fetch	Resource type for preload
`crossorigin`	anonymous · use-credentials	CORS mode
`integrity`	String	Subresource Integrity hash
`hreflang`	String	Language of the linked resource

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<main>

HTML5

Dominant content

Syntax

<main>…</main>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<map>

HTML2

Image map

Syntax

<map>…</map>

Attributes

Attribute	Type / values	Description
`name`	String	Name referenced by usemap

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<mark>

HTML5

Highlighted text

Syntax

<mark>…</mark>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<math>

HTML5

MathML root (foreign content)

Syntax

<math>…</math>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<menu>

HTML5

Menu/toolbar list

Syntax

<menu>…</menu>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<meta>

HTML2

Metadata (charset, viewport, …)

Syntax

<meta>…</meta>

Attributes

Attribute	Type / values	Description
`name`	String	Metadata name (viewport, description, author …)
`content`	String	Value for name/http-equiv
`charset`	String	Character encoding (utf-8)
`http-equiv`	content-type · default-style · refresh · content-security-policy	Pragma directive
`property`	String	Open Graph / RDFa property (og:title …)

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<meter>

HTML5

Scalar gauge

Syntax

<meter>…</meter>

Attributes

Attribute	Type / values	Description
`value`	Number	Current value
`min`	Number	Lower bound
`max`	Number	Upper bound
`low`	Number	Threshold "low"
`high`	Number	Threshold "high"
`optimum`	Number	Optimal value

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<nav>

HTML5

Navigation links

Syntax

<nav>…</nav>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<noscript>

HTML2

Script fallback

Syntax

<noscript>…</noscript>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<object>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <include>. → include

External resource

Syntax

<object>…</object>

Attributes

Attribute	Type / values	Description
`data`	URL	Resource
`type`	MIME	MIME type
`name`	String	Name of the context
`width`	Number	Width in px
`height`	Number	Height in px
`form`	String	id of the associated form

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Richer in HTML67	<include>
Status	Standard

<ol>

HTML2

Ordered list

Syntax

<ol>…</ol>

Attributes

Attribute	Type / values	Description
`type`	1 · a · A · i · I	Numbering style
`start`	Number	Start value
`reversed`	Boolean	Count descending

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<optgroup>

HTML2

Option group

Syntax

<optgroup>…</optgroup>

Attributes

Attribute	Type / values	Description
`label`	String	Group name
`disabled`	Boolean	Disable the entire group

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<option>

HTML2

Select option

Syntax

<option>…</option>

Attributes

Attribute	Type / values	Description
`value`	String	Submitted value
`selected`	Boolean	Pre-selected
`disabled`	Boolean	Not selectable
`label`	String	Display text

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<output>

HTML5

Calculation result

Syntax

<output>…</output>

Attributes

Attribute	Type / values	Description
`for`	String	ids of the involved inputs
`form`	String	id of the form
`name`	String	Name

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<p>

HTML2

Paragraph

Syntax

<p>…</p>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<picture>

HTML5

Responsive image container

Syntax

<picture>…</picture>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<pre>

HTML2

Preformatted text

Syntax

<pre>…</pre>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<progress>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <progressbar>. → progressbar

Progress bar

Syntax

<progress>…</progress>

Attributes

Attribute	Type / values	Description
`value`	Number	Current progress
`max`	Number	Maximum value

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Richer in HTML67	<progressbar>
Status	Standard

<q>

HTML2

Inline quotation

Syntax

<q>…</q>

Attributes

Attribute	Type / values	Description
`cite`	URL	Source of the quotation

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<rp>

HTML5

Ruby fallback parenthesis

Syntax

<rp>…</rp>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<rt>

HTML5

Ruby text

Syntax

<rt>…</rt>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<ruby>

HTML5

Ruby annotation

Syntax

<ruby>…</ruby>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<s>

HTML2

No-longer-accurate text

Syntax

<s>…</s>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<samp>

HTML2

Sample output

Syntax

<samp>…</samp>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<script>

HTML2

Script

Syntax

<script>…</script>

Attributes

Attribute	Type / values	Description
`src`	URL	External script file
`type`	module · text/javascript · importmap	Script type
`async`	Boolean	Load asynchronously
`defer`	Boolean	Run after parsing
`nomodule`	Boolean	Only for non-module browsers
`crossorigin`	anonymous · use-credentials	CORS mode
`integrity`	String	SRI hash
`referrerpolicy`	String	Referrer policy

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<search>

HTML5

Search/filter controls

Syntax

<search>…</search>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<section>

HTML5

Generic standalone section

Syntax

<section>…</section>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<select>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <combobox>. → combobox

Dropdown select

Syntax

<select>…</select>

Attributes

Attribute	Type / values	Description
`name`	String	Field name
`multiple`	Boolean	Multiple selection
`size`	Number	Visible options
`required`	Boolean	Required field
`disabled`	Boolean	Disabled
`autocomplete`	String	Autofill hint
`form`	String	id of the form

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Richer in HTML67	<combobox>
Status	Standard

<slot>

HTML5

Shadow-DOM slot

Syntax

<slot>…</slot>

Attributes

Attribute	Type / values	Description
`name`	String	Named slot

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<small>

HTML2

Side comment / fine print

Syntax

<small>…</small>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<source>

HTML5

Media/image source

Syntax

<source>…</source>

Attributes

Attribute	Type / values	Description
`src`	URL	Media source (audio/video)
`srcset`	String	Image sources (picture)
`sizes`	String	Display sizes
`type`	MIME	MIME type
`media`	String	Media query

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<span>

HTML2

Generic inline container

Syntax

<span>…</span>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<strong>

HTML2

Strong importance

Syntax

<strong>…</strong>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<style>

HTML2

Embedded CSS

Syntax

<style>…</style>

Attributes

Attribute	Type / values	Description
`media`	String	Media query
`nonce`	String	CSP nonce
`blocking`	render	Block rendering until loaded

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<sub>

HTML2

Subscript

Syntax

<sub>…</sub>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<summary>

HTML5

Disclosure summary

Syntax

<summary>…</summary>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<sup>

HTML2

Superscript

Syntax

<sup>…</sup>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<svg>

HTML5

SVG root (foreign content)

Syntax

<svg>…</svg>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<table>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <grid> / <data-table>. → data-table

Table

Syntax

<table>…</table>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Richer in HTML67	<grid> / <data-table>
Status	Standard

<tbody>

HTML2

Table body

Syntax

<tbody>…</tbody>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<td>

HTML2

Table data cell

Syntax

<td>…</td>

Attributes

Attribute	Type / values	Description
`colspan`	Number	Span columns
`rowspan`	Number	Span rows
`headers`	String	ids of associated header cells

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<template>

HTML5

Inert content fragment

Syntax

<template>…</template>

Attributes

Attribute	Type / values	Description
`shadowrootmode`	open · closed	Declarative Shadow DOM

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<textarea>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <editor>. → editor

Multiline text input

Syntax

<textarea>…</textarea>

Attributes

Attribute	Type / values	Description
`name`	String	Field name
`rows`	Number	Visible rows
`cols`	Number	Visible columns
`placeholder`	String	Placeholder text
`required`	Boolean	Required field
`disabled`	Boolean	Disabled
`readonly`	Boolean	Read-only
`minlength`	Number	Minimum length
`maxlength`	Number	Maximum length
`wrap`	soft · hard	Line-wrap behavior
`autocomplete`	on · off	Autocomplete

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Richer in HTML67	<editor>
Status	Standard

<tfoot>

HTML2

Table foot

Syntax

<tfoot>…</tfoot>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<th>

HTML2

Table header cell

Syntax

<th>…</th>

Attributes

Attribute	Type / values	Description
`scope`	row · col · rowgroup · colgroup	Scope of the header cell
`colspan`	Number	Span columns
`rowspan`	Number	Span rows
`abbr`	String	Short form for screen readers
`headers`	String	ids of associated header cells

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<thead>

HTML2

Table head

Syntax

<thead>…</thead>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<time>

HTML5

Date/time

Syntax

<time>…</time>

Attributes

Attribute	Type / values	Description
`datetime`	Datetime	Machine-readable date/time

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<title>

HTML2

Document title

Syntax

<title>…</title>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<tr>

HTML2

Table row

Syntax

<tr>…</tr>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<track>

HTML5

Text track for media

Syntax

<track>…</track>

Attributes

Attribute	Type / values	Description
`src`	URL	VTT file
`kind`	subtitles · captions · descriptions · chapters · metadata	Kind of track
`srclang`	String	Language of the track
`label`	String	Display name
`default`	Boolean	Default track

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<u>

HTML2

Unarticulated annotation

Syntax

<u>…</u>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<ul>

HTML2

Unordered list

Syntax

<ul>…</ul>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<var>

HTML2

Variable

Syntax

<var>…</var>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Standard

<video>

richer in HTML67

↪ Fully valid native HTML — HTML67 additionally offers <player>. → player

Video content

Syntax

<video>…</video>

Attributes

Attribute	Type / values	Description
`src`	URL	Video source
`poster`	URL	Preview image
`controls`	Boolean	Show controls
`autoplay`	Boolean	Play automatically
`loop`	Boolean	Loop endlessly
`muted`	Boolean	Start muted
`playsinline`	Boolean	Inline instead of fullscreen (mobile)
`preload`	none · metadata · auto	Preload behavior
`width`	Number	Width in px
`height`	Number	Height in px
`crossorigin`	anonymous · use-credentials	CORS mode

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Richer in HTML67	<player>
Status	Standard

<wbr>

HTML5

Line-break opportunity

Syntax

<wbr>…</wbr>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Standard

<acronym>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Acronym

Syntax

<acronym>…</acronym>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 4
Status	Deprecated / obsolete

<applet>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Java applet

Syntax

<applet>…</applet>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 3.2
Status	Deprecated / obsolete

<basefont>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Base font

Syntax

<basefont>…</basefont>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 4
Status	Deprecated / obsolete

<bgsound>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Background sound

Syntax

<bgsound>…</bgsound>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML —
Status	Deprecated / obsolete

<big>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Large text

Syntax

<big>…</big>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 3.2
Status	Deprecated / obsolete

<center>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Centered block

Syntax

<center>…</center>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 3.2
Status	Deprecated / obsolete

<content>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Shadow insertion point

Syntax

<content>…</content>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML —
Status	Deprecated / obsolete

<dir>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Directory list

Syntax

<dir>…</dir>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

<font>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Font styling

Syntax

<font>…</font>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 3.2
Status	Deprecated / obsolete

<frame>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Frameset frame

Syntax

<frame>…</frame>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 4
Status	Deprecated / obsolete

<frameset>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Frame container

Syntax

<frameset>…</frameset>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 4
Status	Deprecated / obsolete

<image>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Non-standard image

Syntax

<image>…</image>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML —
Status	Deprecated / obsolete

<isindex>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Search prompt

Syntax

<isindex>…</isindex>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

<keygen>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Key-pair generator

Syntax

<keygen>…</keygen>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Deprecated / obsolete

<listing>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Preformatted code

Syntax

<listing>…</listing>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

<menuitem>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Context-menu command

Syntax

<menuitem>…</menuitem>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Deprecated / obsolete

<nobr>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

No line break

Syntax

<nobr>…</nobr>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML —
Status	Deprecated / obsolete

<noembed>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Embed fallback

Syntax

<noembed>…</noembed>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML —
Status	Deprecated / obsolete

<noframes>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Frameset fallback

Syntax

<noframes>…</noframes>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 4
Status	Deprecated / obsolete

<param>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Object parameter

Syntax

<param>…</param>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

<plaintext>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Raw text rest-of-document

Syntax

<plaintext>…</plaintext>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

<rb>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Ruby base

Syntax

<rb>…</rb>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Deprecated / obsolete

<rtc>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Ruby text container

Syntax

<rtc>…</rtc>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 5
Status	Deprecated / obsolete

<spacer>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Whitespace spacer

Syntax

<spacer>…</spacer>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML —
Status	Deprecated / obsolete

<strike>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Struck text

Syntax

<strike>…</strike>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 3.2
Status	Deprecated / obsolete

<tt>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Teletype text

Syntax

<tt>…</tt>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

<xmp>

deprecated

⚠ Deprecated — do not use in new HTML. Here for reference only, struck through as in the index.

Example preformatted

Syntax

<xmp>…</xmp>

Attributes

No element-specific attributes — only the global attributes.

Global attributes

As on every HTML element: id · class · style · title · hidden · lang · dir · tabindex · role · contenteditable · draggable · spellcheck · translate · inert · popover · accesskey · autocapitalize · enterkeyhint plus data-*, aria-* and event handlers (on*).

Details

Category	Native HTML
Since	HTML 2
Status	Deprecated / obsolete

`button-group`

Prop · not an element

Not an element — this is Prop. <button-group> is deliberately not an HTML67 tag; it stays as the wl-button-group web component or becomes a prop/CSS.

Button Group

Instead

<button group>…</button>

Details

Role	Prop (not an element)
Implementation	`wl-button-group`
Bare tag?	no — not aliased

HTML67 reference ↗

`icon-button`

Prop · not an element

Not an element — this is Prop. <icon-button> is deliberately not an HTML67 tag; it stays as the wl-icon-button web component or becomes a prop/CSS.

Icon Button

Instead

<button icon>…</button>

Details

Role	Prop (not an element)
Implementation	`wl-icon-button`
Bare tag?	no — not aliased

HTML67 reference ↗

`toggle-group`

Prop · not an element

Not an element — this is Prop. <toggle-group> is deliberately not an HTML67 tag; it stays as the wl-toggle-group web component or becomes a prop/CSS.

Toggle Group

Instead

<toggle group>…</toggle>

Details

Role	Prop (not an element)
Implementation	`wl-toggle-group`
Bare tag?	no — not aliased

HTML67 reference ↗

`uncertainty`

Prop · not an element

Not an element — this is Prop. <uncertainty> is deliberately not an HTML67 tag; it stays as the wl-uncertainty web component or becomes a prop/CSS.

Uncertainty

Instead

<unit value="90" uncertainty="±2">

Details

Role	Prop (not an element)
Implementation	`wl-uncertainty`
Bare tag?	no — not aliased

HTML67 reference ↗

`accordion`

Variant · not an elementOpenUI · graduated ↗

Not an element — this is Variant. <accordion> is deliberately not an HTML67 tag; it stays as the wl-accordion web component or becomes a prop/CSS.

Accordion

Instead

<dropdown>/<details> with state (open/closed)

Details

Role	Variant (not an element)
Implementation	`wl-accordion`
Bare tag?	no — not aliased

HTML67 reference ↗

`alert-dialog`

Variant · not an element

Not an element — this is Variant. <alert-dialog> is deliberately not an HTML67 tag; it stays as the wl-alert-dialog web component or becomes a prop/CSS.

Alert Dialog

Instead

<dialog> (confirmation variant with confirm/cancel)

Details

Role	Variant (not an element)
Implementation	`wl-alert-dialog`
Bare tag?	no — not aliased

HTML67 reference ↗

`panel`

Variant · not an element

Not an element — this is Variant. <panel> is deliberately not an HTML67 tag; it stays as the wl-panel web component or becomes a prop/CSS.

Flat container with a title bar

Instead

<card heading="…" flat>

Details

Role	Variant (not an element)
Implementation	`wl-panel`
Bare tag?	no — not aliased

HTML67 reference ↗

`ring`

Variant · not an element

Not an element — this is Variant. <ring> is deliberately not an HTML67 tag; it stays as the wl-ring web component or becomes a prop/CSS.

Circular progress

Instead

<progressbar shape="ring">

Details

Role	Variant (not an element)
Implementation	`wl-ring`
Bare tag?	no — not aliased

HTML67 reference ↗

`sitemap-nav`

Variant · not an element

Not an element — this is Variant. <sitemap-nav> is deliberately not an HTML67 tag; it stays as the wl-sitemap-nav web component or becomes a prop/CSS.

Navigation derived from the site itself (manifest.shortcuts)

Instead

<navbar> fed from manifest.shortcuts / sitemap

Details

Role	Variant (not an element)
Implementation	`wl-sitemap-nav`
Bare tag?	no — not aliased

HTML67 reference ↗

`animation`

Behavior · not an element

Not an element — this is Behavior. <animation> is deliberately not an HTML67 tag; it stays as the wl-animation web component or becomes a prop/CSS.

Animation

Instead

<element animate> / IntersectionObserver

Details

Role	Behavior (not an element)
Implementation	`wl-animation`
Bare tag?	no — not aliased

HTML67 reference ↗

`annotatable`

Behavior · not an element

Not an element — this is Behavior. <annotatable> is deliberately not an HTML67 tag; it stays as the wl-annotatable web component or becomes a prop/CSS.

Annotatable

Instead

<article annotatable>…</article>

Details

Role	Behavior (not an element)
Implementation	`wl-annotatable`
Bare tag?	no — not aliased

HTML67 reference ↗

`brush-zoom`

Behavior · not an element

Not an element — this is Behavior. <brush-zoom> is deliberately not an HTML67 tag; it stays as the wl-brush-zoom web component or becomes a prop/CSS.

Brush Zoom

Instead

<chart brush-zoom>

Details

Role	Behavior (not an element)
Implementation	`wl-brush-zoom`
Bare tag?	no — not aliased

HTML67 reference ↗

`chart-annotations`

Behavior · not an element

Not an element — this is Behavior. <chart-annotations> is deliberately not an HTML67 tag; it stays as the wl-chart-annotations web component or becomes a prop/CSS.

Chart Annotations

Instead

<chart annotations="…">

Details

Role	Behavior (not an element)
Implementation	`wl-chart-annotations`
Bare tag?	no — not aliased

HTML67 reference ↗

`collapsible`

Behavior · not an element

Not an element — this is Behavior. <collapsible> is deliberately not an HTML67 tag; it stays as the wl-collapsible web component or becomes a prop/CSS.

Collapsible

Instead

<details> or <section collapsible>

Details

Role	Behavior (not an element)
Implementation	`wl-collapsible`
Bare tag?	no — not aliased

HTML67 reference ↗

`scrollytelling`

Behavior · not an element

Not an element — this is Behavior. <scrollytelling> is deliberately not an HTML67 tag; it stays as the wl-scrollytelling web component or becomes a prop/CSS.

Scrollytelling

Instead

<article scrollytelling>

Details

Role	Behavior (not an element)
Implementation	`wl-scrollytelling`
Bare tag?	no — not aliased

HTML67 reference ↗

`sortable`

Behavior · not an element

Not an element — this is Behavior. <sortable> is deliberately not an HTML67 tag; it stays as the wl-sortable web component or becomes a prop/CSS.

Sortable

Instead

<list sortable>…</list>

Details

Role	Behavior (not an element)
Implementation	`wl-sortable`
Bare tag?	no — not aliased

HTML67 reference ↗

`toast`

Behavior · not an element

Not an element — this is Behavior. <toast> is deliberately not an HTML67 tag; it stays as the wl-toast web component or becomes a prop/CSS.

Toast

Instead

global notification, not a document element

Details

Role	Behavior (not an element)
Implementation	`wl-toast`
Bare tag?	no — not aliased

HTML67 reference ↗

`tour`

Behavior · not an element

Not an element — this is Behavior. <tour> is deliberately not an HTML67 tag; it stays as the wl-tour web component or becomes a prop/CSS.

Tour

Instead

App overlay, not a document element

Details

Role	Behavior (not an element)
Implementation	`wl-tour`
Bare tag?	no — not aliased

HTML67 reference ↗

`zoom-frame`

Behavior · not an element

Not an element — this is Behavior. <zoom-frame> is deliberately not an HTML67 tag; it stays as the wl-zoom-frame web component or becomes a prop/CSS.

Zoomable/pannable frame

Instead

wheel-zoom/pan behavior on <figureblock>/<img>

Details

Role	Behavior (not an element)
Implementation	`wl-zoom-frame`
Bare tag?	no — not aliased

HTML67 reference ↗

`aspect-ratio`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <aspect-ratio> is deliberately not an HTML67 tag; it stays as the wl-aspect-ratio web component or becomes a prop/CSS.

Aspect Ratio

Instead

style="aspect-ratio:16/9"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-aspect-ratio`
Bare tag?	no — not aliased

HTML67 reference ↗

`clip`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <clip> is deliberately not an HTML67 tag; it stays as the wl-clip web component or becomes a prop/CSS.

Clip

Instead

style="position:fixed;inset:auto 20px 20px auto"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-clip`
Bare tag?	no — not aliased

HTML67 reference ↗

`columns`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <columns> is deliberately not an HTML67 tag; it stays as the wl-columns web component or becomes a prop/CSS.

Columns

Instead

style="display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-columns`
Bare tag?	no — not aliased

HTML67 reference ↗

`container`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <container> is deliberately not an HTML67 tag; it stays as the wl-container web component or becomes a prop/CSS.

Container

Instead

style="max-width:56rem;margin-inline:auto"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-container`
Bare tag?	no — not aliased

HTML67 reference ↗

`floating`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <floating> is deliberately not an HTML67 tag; it stays as the wl-floating web component or becomes a prop/CSS.

Floating

Instead

CSS position / Anchor positioning

Details

Role	CSS / Layout (not an element)
Implementation	`wl-floating`
Bare tag?	no — not aliased

HTML67 reference ↗

`prose`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <prose> is deliberately not an HTML67 tag; it stays as the wl-prose web component or becomes a prop/CSS.

Prose

Instead

scoped typography styles (@scope) / a .prose class

Details

Role	CSS / Layout (not an element)
Implementation	`wl-prose`
Bare tag?	no — not aliased

HTML67 reference ↗

`resizable`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <resizable> is deliberately not an HTML67 tag; it stays as the wl-resizable web component or becomes a prop/CSS.

Resizable

Instead

style="resize:both;overflow:auto"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-resizable`
Bare tag?	no — not aliased

HTML67 reference ↗

`scroll-area`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <scroll-area> is deliberately not an HTML67 tag; it stays as the wl-scroll-area web component or becomes a prop/CSS.

Scroll Area

Instead

style="overflow:auto"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-scroll-area`
Bare tag?	no — not aliased

HTML67 reference ↗

`scroller`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <scroller> is deliberately not an HTML67 tag; it stays as the wl-scroller web component or becomes a prop/CSS.

Horizontal snap scroller

Instead

style="display:flex;overflow-x:auto;scroll-snap-type:x mandatory"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-scroller`
Bare tag?	no — not aliased

HTML67 reference ↗

`separator`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <separator> is deliberately not an HTML67 tag; it stays as the wl-separator web component or becomes a prop/CSS.

Separator

Instead

<hr> (native element)

Details

Role	CSS / Layout (not an element)
Implementation	`wl-separator`
Bare tag?	no — not aliased

HTML67 reference ↗

`stack`

CSS / Layout · not an element

Not an element — this is CSS / Layout. <stack> is deliberately not an HTML67 tag; it stays as the wl-stack web component or becomes a prop/CSS.

Stack

Instead

style="display:flex;flex-direction:column;gap:1rem"

Details

Role	CSS / Layout (not an element)
Implementation	`wl-stack`
Bare tag?	no — not aliased

HTML67 reference ↗

`sources`

Internal · not an element

Not an element — this is Internal. <sources> is deliberately not an HTML67 tag; it stays as the wl-sources web component or becomes a prop/CSS.

Sources

Instead

dock chip — collects citations, legal norms, credits & copyright of the page

Details

Role	Internal (not an element)
Implementation	`wl-sources`
Bare tag?	no — not aliased

HTML67 reference ↗

`tangled-tree`

Internal · not an element

Not an element — this is Internal. <tangled-tree> is deliberately not an HTML67 tag; it stays as the wl-tangled-tree web component or becomes a prop/CSS.

Tangled tree

Instead

research viz (layered DAG) — plugin-vocabulary candidate, overlaps force-graph/dendrogram

Details

Role	Internal (not an element)
Implementation	`wl-tangled-tree`
Bare tag?	no — not aliased

HTML67 reference ↗

Components

Lit + OpenProps, monochrom auf den TwentyCRM-Tokens, ohne Bundler. Jede Komponente ist ein Tag — kein Build-Step, und jeder Tag hier funktioniert PREFIXFREI als bare HTML67-Element (Markup je Element: siehe Referenz in der Sidebar). Charts laufen nativ, ohne Lib im Markup.

Examples

Fertige Seiten und Flächen aus den Bausteinen zusammengesetzt — Dashboards, Shop, Recht, Marketing. Nur droppen, kein Zusammenbau.

<accessibility>

HTML6

Accessibility (HTML67 take on <a11y>)

HTML67 take on <a11y>.

Live example

Sample content

generated automatically from the props

Syntax

<accessibility>…</accessibility>

Props / Attributes

Attribute	Type	Description
`collapsed`	Boolean
`heading`	String

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-a11y`
Prefix-free	<accessibility> (runtime aliases to `wl-a11y`)
Status	HTML67 · live

HTML67 reference ↗

<bytes>

HTML7

Human-readable file size

Live example

Markup

<bytes value="1536000"></bytes>

Props / Attributes

Attribute	Type	Description
`value`	String
`locale`	String

Details

Generation	HTML7 — HTML7 · Vocabulary
Implementation	`wl-bytes`
Prefix-free	<bytes> (runtime aliases to `wl-bytes`)
Status	HTML67 · live

HTML67 reference ↗

<nav-menu>

HTML6OpenUI · active ↗

Horizontal navigation

Live example

Home Docs Pricing

Markup

<nav-menu active="home">
  <a href="#" data-value="home">Home</a>
  <a href="#" data-value="docs">Docs</a>
  <a href="#" data-value="pricing">Pricing</a>
</nav-menu>

Props / Attributes

Attribute	Type	Description
`items`	Array
`active`	String

Array/Object: set as a JS property (el.data = […]) or as a JSON attribute.

Details

Generation	HTML6 — HTML6 · UI & Presentation
Implementation	`wl-nav-menu`
Prefix-free	<nav-menu> (runtime aliases to `wl-nav-menu`)
Status	HTML67 · live

HTML67 reference ↗

HTML67 Element Reference

Every HTML element on one page — the native ones (the "old" set, with version and struck-through deprecated tags) and the HTML67 components, by generation. Pick an element on the left.

120HTML67 elements

115native elements

27legacy deprecated

10superseded by HTML67

32Web Components (not DOM)

Deliberate non-elements

Asked-for building blocks that are intentionally NOT elements — native HTML/CSS already carries them:

Instead of…	Use
`<masonry>`	CSS masonry layout (grid-template-rows: masonry) / column layout
`<sticky>`	`style="position:sticky;top:0"`
`<number-input>`	native `<input type="number">` / `<quantity-stepper>`
`<avatar-badge>`	a prop on `<avatar>`
`<tree-select>`	`<combobox>` + `<tree>` composition
`<theme-toggle>`	a command on `[data-theme]` — theming is tokens, not an element
`<toast>`	global feedback behavior (`wl-toast` event), not document content
`<virtual-list>`	planned as behavior: `<list virtual>` / `<data-table virtual>`
`<if>` / `<for>`	control flow is NOT hypertext — they are attributes on real elements: `if="path"`, `<ul each="items">` (inside `<state>`)

Topics — by use case

Elements bundled for direct access instead of searching one by one.

Law, licenses & IPIntellectual property, licenses and legal texts as ready-made building blocks — Creative Commons, sections, contracts, GDPR.AccessibilityElements that bring accessibility built in — spelled-out abbreviations, labeled fields, machine-readable and localized values.Digital sovereigntyYour own infrastructure instead of Big Tech embeds — self-hosted maps, media and files, without third-party trackers.File types & viewersOne element per file type — 3D models, PDFs, gigapixel images, formulas, diagrams and code.