HTML Living Standard · 2026 edition

Every HTML feature,
beautifully unleashed.

A living, interactive tour of the web platform — semantic text, native forms, media, <dialog>, popovers, web components, canvas, SVG, MathML and the browser APIs that make them sing.

Start the tour →

Built with the platform

This popover uses the native popover attribute — no JavaScript. Press Esc or click outside to dismiss.

Elements: 0+
Input types: 0
Live demos: 0+
Frameworks: 0

01 · Semantics & Text

Words with meaning

Semantic elements tell browsers, search engines and assistive tech what your content is, not just how it looks.

inline Text-level semantics

<strong> importance · <em> stress · b · i · u
<mark> highlights · <small> fine print · ~~<s> no longer accurate~~
HTML via <abbr> · <dfn> definition
H₂O · E = mc² · The Cite Element
Press Ctrl + K · <samp> output · x = <code>
Edits: ~~removed text~~ inserted text
An inline quotation with <q>
Published October 15, 2026 · Product #398
إيان scored 90 · bdo reverses this
Supercalifragilisticexpialidocious with <wbr> & 
漢(kan)字(ji) — ruby annotations

block Quotes & preformatted

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

— Tim Berners-Lee, W3C

  ╔══════════════════╗
  ║  <pre> keeps     ║
  ║  w h i t e       ║
  ║  space intact    ║
  ╚══════════════════╝

lists Lists of every flavour

Unordered
Bulleted
- Nested

Reversed
Ordered
Lift-off!

Roman
Numerals

⌘ <menu>

⚡ toolbar

<dl>: Description list
<dt>: The term
<dd>: Its description

layout Document outline

A semantic page skeleton — hover any landmark.

<aside>

<main>

a11y Headings

h1 Display

h2 Section

h3 Subsection

h4 Group

h5 Detail

h6 Eyebrow

Contact via <address>: hello@example.com

02 · Forms

Native forms, zero libraries

22 input types, built-in validation, :user-invalid styling, <datalist>, <output> and <meter>.

text Identity

Name *

Password

Website

Phone

pickers Pickers

Date

Time

Month

Week

Local date & time

Favourite browser (<datalist>)

Framework (<optgroup>)

File

Color

Hex: #a855f7

choice Choices

Awesomeness: 75

Quantity

Free Pro Team

Subscribe to newsletter Notifications (styled switch)

Message

03 · Media & Embeds

Pixels, sound & motion

Responsive images with <picture>, captioned video, audio, the Web Audio API and sandboxed iframes.

video <video> + <track> captions

CC0 footage from MDN · WebVTT captions served locally · playsinline muted loop

audio Sound

Web Audio API synth — tap the keys:

Abstract neon mountains under a gradient sky — Different sources by viewport & colour scheme. `loading="lazy"`

Three planets; click one — `<map>` + `<area>` clickable regions (hover for titles).

iframe Sandboxed iframe

srcdoc + sandbox: runs scripts, can't touch this page.

04 · Interactive Elements

Interactivity, built in

Dialogs, popovers, disclosure widgets, drag & drop, templates and editable content — mostly without a line of JS.

dialog Modal dialog

Focus-trapped, Esc to close, animated with @starting-style.

returnValue: —

popover Popover API

Top-layer, light-dismiss and zero JavaScript via popovertarget.

popover="auto"

Click anywhere outside or press Esc to dismiss me.

popover="manual"

I stay until explicitly closed.

details Exclusive accordion

What is name on details?

Details sharing a name form an exclusive group — opening one closes the others.

Does it animate?

Yes — via ::details-content and interpolate-size.

Is it accessible?

Fully keyboard operable and announced as a disclosure widget.

progress Progress & meter

Upload0%

Indeterminate

Disk usage (meter)82%

82%

drag Native drag & drop

To do

🎨 Design

🧪 Test

Done

🚢 Ship

template <template> cloning

contenteditable Editable & persisted

Click and type here! This block uses contenteditable. Try Ctrl+B for bold. Changes are auto-saved to localStorage and survive reloads.

Nothing saved yet.

inert inert & hidden

hidden="until-found" — try Ctrl+F for “easter egg”:

05 · Tables

Tabular data, properly

<caption>, <colgroup>, <thead>/<tfoot>, scope and aria-sort. Click a header to sort.

Browser support for flagship HTML features (illustrative, first stable version).
Feature	Chrome	Firefox	Safari	Year
<dialog>	37	98	15.4	2022
Popover API	114	125	17	2024
Exclusive <details name>	120	130	17.2	2024
<search>	118	118	17	2023
Declarative Shadow DOM	111	123	16.4	2024
View Transitions	111	144	18	2025
hidden="until-found"	102	139	26	2025
Features listed	7

06 · Graphics & Math

Draw anything, natively

Immediate-mode <canvas>, declarative inline <svg> with SMIL animation, and <math> (MathML Core).

canvas Interactive particle field

Move your pointer through the network — 2D context, ResizeObserver, HiDPI aware.

svg Inline SVG

Gradients, filters, animateMotion.

math MathML Core

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

e^{i π} + 1 = 0

\int_{- \infty}^{\infty} e^{- x^{2}} d x = \sqrt{π}

07 · Web Components

Your own HTML elements

Custom Elements, Shadow DOM, <slot>, ::part and Declarative Shadow DOM — reusable, encapsulated, framework-free.

<glow-card hue="280">

Shadow DOM styles with a @property-animated conic border. Content projected via named & default slots.

<glow-card hue="180">

Same element, different attribute → attributeChangedCallback updates the hue.

Live clock & counter

--:--:--

shadowrootmode Declarative Shadow DOM

Server-rendered shadow root — no JavaScript needed. The p rule inside can't leak out.

<div>
  <template shadowrootmode="open">
    <style>p { color: hotpink }</style>
    <p>Encapsulated</p><slot></slot>
  </template>
  Light DOM content
</div>

08 · Browser APIs

The platform, live-detected

What your browser supports right now, plus a few APIs you can try.

detect Feature support in your browser

Enable JavaScript to run feature detection.

try Try them

Result: —

Keyboard shortcuts

/ focus feature filter
T toggle theme (View Transition)
Tab skip link & focus rings

Download OG image (download attr)

head Under the hood

Meta & SEO

theme-color per scheme, Open Graph, JSON-LD structured data.

Performance

preconnect, lazy loading, decoding="async", module scripts.

Accessibility

Skip link, landmarks, aria-live, reduced-motion support.

Modern CSS

oklch, :has(), :user-invalid, scroll-driven animation, @starting-style.

Every HTML feature,
beautifully unleashed.

Built with the platform