Neue Tags und Web Components

Wie entstehen neue HTML-Tags? Und kann man sie auch selbst bauen?

Der HTML Standard

Eine Arbeitsgruppe entwickelt HTML weiter, die Browser bauen dann die neuen Tags ein. Die Arbeitsgruppe hat den Namen WHATWG (Web Hypertext Application Technology Working Group). Sie veröffentlichen den HTML Standard auf https://html.spec.whatwg.org/

In der Arbeitsgruppe wird über Vorschläge diskutiert, es werden Implementierungen ausprobiert und die Ergebnisse fließen zurück in den Standard. Diesen Teil der Arbeit kann man teilweise als github issues und dann als pull requests mitverfolgen.

Die Entscheidungen erfolgen im Konsens, die wichtigsten Kriterien sind:

Ein Vorschlag muss technisch ausgereift sein und die Bedürfnisse von Web-Entwicklern sowie Browser-Herstellern gleichermaßen abdecken.
Mindestens zwei unabhängige Browser-Engines signalisieren, dass sie das Feature implementieren wollen oder es bereits experimentell unterstützen. Die drei wichtigen Browser-Engines sind Blink (Chrome/Chromium/Edge), Gecko (Firefox) und WebKit (Safari).
Ein neuer Standard darf niemals dazu führen, dass existierende Webseiten nicht mehr funktionieren. (“Don’t break the Web”)

Baseline

Für die Webprogrammierung relevant werden neue HTML Tags, wenn sie in den gängigen Browsern funktionieren. Das kann man im Mozilla Developer Network Wiki nachlesen, z.B. hier am Ende der Seite über das popover-Attribut: Browser-Kompatibilität.

Dieselbe Information findet man auch in caniuse.com.

Jedes Jahr wird eine Liste von neuen Tags, CSS-Eigenschaften, Javascript-Features zusammen gestellt, die in allen Browsern gelandet sind: die Baseline. Siehe z.B. Baseline 2026

Web Components

Man kann auch eigene HTML-Tags bauen. “Web Components” ist dabei der Oberbegriff für mehrere Technologien, die zusammenspielen.

Die neuen Tags müssen ein Minus-Zeichen enthalten. Der Grund: So sind sie sicher von künftigen Standard-HTML-Tags unterscheidbar, die niemals ein Minus-Zeichen enthalten.

Fertige Web Components zu verwenden ist ganz einfach:

In dieser Demo Seite ist es der Tag <youtube-lite> der verwendet wird, in dieser Demo Seite der Tag <image-compare>.