Wie viele HTML-Tags nutzen Sie tatsächlich? Die meisten Entwickler haben ein Arsenal von etwa einem Dutzend: div, p, a, img, span, Überschriften und Listen. Die übrigen über 100 Tags der Spezifikation liegen brach, einfach weil man sie vergessen hat oder nie kannte.

Das ist ein Fehler. Browser haben gelernt, Semantik tiefergehend zu verstehen, als Sie vielleicht denken. Screenreader sind darauf angewiesen. Suchmaschinen parsen die Struktur. Das richtige Tag an der richtigen Stelle liefert Barrierefreiheit, SEO und lesbaren Code, ohne eine einzige Zeile JS.

Wir haben 18 HTML-Tags ausgewählt, die es wert sind, in Ihr tägliches Markup aufgenommen zu werden. Sie sind nicht neu im Sinne von „gerade aus dem Entwurf veröffentlicht", aber sie sind neu für viele Entwickler, weil sie zu Unrecht übersehen wurden. Einige stammen aus HTML5, andere existieren seit jeher in der Spezifikation. Jedes enthält ein funktionierendes Beispiel und eine Erläuterung, wo es tatsächlich hilft.

💡 Kurzüberblick:

• Welche Tags Barrierefreiheits- und Semantikprobleme ohne JavaScript lösen
• Wo sub/sup, dfn, var und time bei der Textauszeichnung nützlich sind
• Wie <q>, <blockquote> und <cite> Zitate korrekt formatieren
• Warum <video>, <picture> und <figure> Medieninhalte strukturieren
• Was del/ins, meter, dialog und menu für Benutzeroberflächen bringen

1. Semantische Textauszeichnung: sub, sup, dfn, var, time, kbd

Fünf Tags, die reinen Text in eine für Maschinen und Menschen verständliche Struktur verwandeln. Kein JS, nur natives HTML.

<sub>** und **<sup>: tief- und hochgestellt. Chemische Formeln, mathematische Exponenten, Fußnoten. CSS kann Text mit vertical-align optisch senken oder anheben, vermittelt aber nicht die Semantik. Und das ist entscheidend: Ein Screenreader meldet „H zwei O", anstatt „H zwei O" als normalen Text vorzulesen. Verwenden Sie sie nicht für rein dekorative Zwecke; dafür gibt es Styles.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>: ein Begriff, der definiert wird. Wenn Sie ein neues Konzept einführen und seine Definition liefern, umschließen Sie den Begriff mit diesem Tag. Der Browser tut optisch nichts damit, aber Suchmaschinen und Wörterbucherweiterungen nutzen <dfn>, um ein Seitenglossar aufzubauen. Das id-Attribut erlaubt Ihnen, Rückverweise zu setzen, wenn der Begriff erneut erwähnt wird.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>: eine Variable. In technischer Dokumentation, Tutorials, Formelbeschreibungen. Browser stellen sie standardmäßig kursiv dar. Für vollständige mathematische Ausdrücke ist MathML besser, aber <var> ist praktisch, wenn die Variable Teil eines Satzes ist.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>: ein Datum oder eine Uhrzeit. Maschinen haben Mühe, „2. April" mitten in einem Absatz zu parsen. Das <time>-Tag isoliert das Datum und liefert über das datetime-Attribut ein maschinenlesbares Format. Kalender, Suchmaschinen, Event-Parser: Alle werden es Ihnen danken.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>: Tastatureingabe. Anleitungen, Tastenkürzel, Befehle. Optisch in einer Monospace-Schrift dargestellt, semantisch trennt es Tastennamen vom umgebenden Text. Sie können sie für Kombinationen verschachteln.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Zitate und Quellenangaben: q, blockquote, cite

Drei Tags, die alle Zitierszenarien abdecken, von einer eingebetteten Phrase bis zu einem längeren Buchauszug.

<q>: ein Inline-Zitat innerhalb eines Absatzes. Der Browser umschließt den Inhalt automatisch mit Anführungszeichen, die der Seitensprache entsprechen. Das optionale cite-Attribut gibt die Quell-URL an. Der Nutzer sieht sie nicht, Maschinen hingegen schon.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>: ein Blockzitat. Für längere Auszüge: ein Absatz aus einem Artikel, eine Rezension, eine Passage aus einer Spezifikation. Unterstützt ebenfalls cite. Der Browser fügt standardmäßig einen Einzug hinzu, und Sie können das Element nach Belieben gestalten.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>: der Titel des zitierten Werks. Nur der Titel: ein Buch, Artikel, Film, Spiel. Nicht der Name des Autors, nicht das Datum, nur der Titel. Browser zeigen ihn standardmäßig kursiv an. Wird oft mit dem cite-Attribut bei <q>/<blockquote> verwechselt, aber es handelt sich um unterschiedliche Dinge: Das Attribut speichert eine URL, während das <cite>-Tag dem Nutzer den Titel anzeigt.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Dokumentstruktur: address und dl/dt/dd

<address>: Kontaktinformationen. Nicht die Postanschrift eines Unternehmens (das übernehmen Schema-Mikrodaten), sondern die Kontaktdaten des Autors der Seite oder des Artikels. Innerhalb von <article> bezieht es sich auf den Artikelautor, innerhalb von <body> auf den Seitenbetreiber. Suchmaschinen nutzen diesen Block für den Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>: eine Beschreibungsliste. Nicht nur ein „Glossar mit Begriffen", sondern jede „Schlüssel/Wert"-Struktur: Produktspezifikationen, Metadaten, FAQ. Ein Begriff (<dt>) kann mehrere Beschreibungen (<dd>) haben und umgekehrt. Die Reihenfolge ist relevant: Zuerst kommt der Begriff, dann seine Beschreibung.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Medieninhalte: video, picture und figure/figcaption

Drei leistungsstarke Werkzeuge für die Arbeit mit visuellen und multimedialen Inhalten. Jedes deckt seinen eigenen Aufgabenbereich ab.

<video>: eingebettetes Video ohne Drittanbieter-Player. Sie können eine einzelne src-Quelle oder mehrere <source>-Elemente angeben; der Browser wählt das erste unterstützte Format. Nützliches Detail: Das autopictureinpicture-Attribut verkleinert das Video beim Tab-Wechsel automatisch in ein schwebendes Fenster, während disablepictureinpicture dies unterbindet. Analog steuert disableremoteplayback das Casting auf Chromecast und Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>: responsive Bilder mit voller Kontrolle. Anders als bei srcset auf <img>, wo der Browser die Quelle auswählt, erlaubt <picture> strikte Media Queries. Unterschiedliche Formate (WebP für Chromium, JPEG für andere), verschiedene Zuschnitte für Mobilgeräte, eine dunkle Variante für den Dark Mode, alles ohne eine einzige Zeile JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** und **<figcaption>: in sich geschlossene Inhalte mit einer Bildunterschrift. Eine Illustration, ein Diagramm, eine Code-Auflistung, eine Tabelle, alles, was sich aus dem Haupttext herauslösen lässt, ohne dass die Bedeutung verloren geht. <figcaption> verknüpft die Bildunterschrift semantisch mit dem Inhalt: Ein Screenreader liest beides zusammen vor und nicht als separate Elemente. Wenn der Inhalt nur am Rande mit dem Text zu tun hat (etwa ein Zitat in einer Seitenleiste), verwenden Sie stattdessen <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Navigationskarten: map und area

Alt, aber nicht veraltet. Image Maps machen einzelne Bereiche eines Bildes zu anklickbaren Links. Wo Text an seine Grenzen stößt (ein interaktiver U-Bahn-Plan, ein Gebäude-Grundriss, ein anatomisches Diagramm), funktionieren <map> mit <area> ohne JS.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

Das Attribut shape akzeptiert circle, rect, poly und default. Die Koordinaten werden in Pixeln von der linken oberen Ecke aus angegeben. Für komplexe Umrisse nutzen Sie poly mit einer Liste von Punkten. Trotz seines Alters (der Tag ist weit über zwanzig Jahre alt) wird er stabil von allen Browsern unterstützt.

6. Textbearbeitung: del und ins

Wenn Sie Änderungen, Dokumentrevisionen, Artikelaktualisierungen oder Gesetzesdifferenzen darstellen, liefern <del> und <ins> eine semantisch korrekte Repräsentation. <del> markiert entfernten Inhalt (Browser streichen ihn durch), <ins> markiert hinzugefügten Inhalt (Browser unterstreichen ihn).

Beide unterstützen cite (warum geändert wurde) und datetime (wann). Suchmaschinen sehen die Versionshistorie der Seite und nicht nur überschriebenen Text.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

Verwenden Sie <del> und <ins> nicht für rein dekorative Durchstreichungen; dafür gibt es text-decoration: line-through. Diese Tags dienen ausdrücklich der Inhaltsversionierung.

7. Eingabefelder der nächsten Generation

Das <input>-Element hat sich weit über einfache Textzeichenfolgen hinaus entwickelt. Moderne Browser unterstützen Dutzende Typen, von denen jeder eine integrierte Validierung, eine mobiloptimierte Tastatur und native Widgets mitbringt, ohne eine einzige Zeile JavaScript.

Wichtige Typen, die viele Projekte noch immer ignorieren:

• type="color": eine Farbpalette. Ein nativer Picker, ohne eine Farbbibliothek einbinden zu müssen.
• type="range": ein Schieberegler zwischen min und max. Lautstärke, Preis, Bewertung, alles ohne einen Slider selbst zu programmieren.
• type="date": ein lokalisierter Kalender. Der Browser zeigt eine Datumsauswahl an, deren Formatierung an die Region des Nutzers angepasst ist.
• type="datetime-local": Datum und Uhrzeit ohne Zeitzone. Für Buchungen, Fristen, Planungswerkzeuge.

Das pattern-Attribut akzeptiert einen regulären Ausdruck: Der Wert passiert die Validierung erst, wenn er dem Muster entspricht.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Numerische Anzeigen

Nicht zu verwechseln mit <progress>: <meter> steht für einen statischen Wert innerhalb eines bekannten Bereichs (Speicherplatzbelegung, Punktzahl, Bewertung), während <progress> den Fortschritt einer Aufgabe anzeigt (Download, schrittweiser Prozess).

Der Browser färbt <meter> automatisch ein, je nachdem, wo der Wert im Verhältnis zu low, high und optimum liegt. Grüner Bereich: Wert nahe am Optimum; gelb: tolerierbar; rot: außerhalb des normalen Bereichs. Die Farblogik lässt sich per CSS anpassen, aber die grundlegende Semantik funktioniert direkt ab Werk.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Interaktive Elemente: Dialog und Menü

Zwei Tags für Interaktionen, die bisher JS-Bibliotheken oder Eigenentwicklungen erforderten.

<dialog>: ein natives modales Fenster. Das Element ist von selbst ausgeblendet. Fügt man das open-Attribut hinzu, zeigt der Browser es oberhalb der Seite im top layer an. Die JavaScript-Methode showModal() stellt zudem das ::backdrop-Pseudoelement zum Abdunkeln des Hintergrunds bereit. Popup, Aktionsbestätigung, Hinweis, alles ohne eine einzige Zeile CSS-Positionierung.

Unterstützung: Chrome, Edge, Firefox, Safari (seit 2022). In älteren Browsern wird der Dialog einfach als normaler Block-Container dargestellt; Polyfills sind verfügbar.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>: eine Liste interaktiver Aktionen. Nicht für Navigation (dafür <nav> verwenden), sondern spezifisch für eine Werkzeugleiste: Pinsel in einem Grafikeditor, Formatierungsschaltflächen, Objektaktionen. Das semantische Äquivalent zu <ul>, aber für Schaltflächen und Befehle. Es hat kein Standard-Styling, nur Bedeutung.

Das type="toolbar"-Attribut (das einzige, das in der Spezifikation verblieben ist) setzt explizit die Toolbar-Rolle. Der Kontexttyp wurde aus dem Standard entfernt, sodass <menu> heute ausschließlich für sichtbare Aktionsgruppen auf dem Bildschirm gedacht ist.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Wenn HTML-Auszeichnung für Sie neu ist, finden Sie hier eine ausgezeichnete Einführung von Traversy; Traversy Media ist einer der besten Frontend-Kanäle auf YouTube:

⁉️🤔 Häufig gestellte Fragen

Warum semantische Tags verwenden, wenn man alles mit <div> und <span> bauen kann?

Screenreader sind auf Tags angewiesen, um die Seitenstruktur für blinde Nutzer aufzubauen; div ist für sie unsichtbar. Suchmaschinen extrahieren Semantik für Rich Snippets: Bewertungen aus <meter>, FAQ aus <dl>, Kontaktdaten aus <address>. Zudem dokumentiert sich der Code selbst: <article> sagt sofort „das ist ein Artikel", während <div class="article"> das nicht tut.

Welche Tags aus der Liste sind bereits produktionsreif einsetzbar?

Alle achtzehn. <dialog> erhielt mit Safari 15.4 (2022) browserübergreifende Unterstützung, <menu> funktioniert de facto überall als semantischer Wrapper. <picture> und <video> mit <source> sind seit 2016 ausgereift. <meter>, <time>, <kbd>, <dfn> stammen aus dem tiefen Erbe von HTML mit universeller Unterstützung. Der einzige Vorbehalt: <input type="date"> und type="color" können je nach Betriebssystem unterschiedlich dargestellt werden, aber das beeinträchtigt die Funktionalität nicht.

Sind <b> und <i> tot?

Nein, aber ihre Rolle hat sich verändert. <b> dient jetzt dazu, Aufmerksamkeit zu erregen, ohne Wichtigkeit zu vermitteln (Schlüsselwörter in einem Lebenslauf), <i> steht für idiomatische Ausdrücke, Begriffe in einer anderen Sprache, Schiffsnamen. Für die Hervorhebung von Wichtigkeit verwenden Sie <strong>; für Betonung <em>. Stilistisches Fett/Kursiv erfolgt ausschließlich über CSS.

Kann ich <meter> für einen Lade-Fortschrittsbalken verwenden?

Nein. <meter> ist für einen statischen Wert innerhalb eines bekannten Bereichs (Festplattenbelegung, Punktzahl, Bewertung). Für Fortschritt über die Zeit verwenden Sie ausschließlich <progress>. Browser animieren <progress>, wenn sich value ändert, während <meter> statisch bleibt. Die beiden werden ständig verwechselt, aber die Semantik unterscheidet sich und Screenreader kündigen sie unterschiedlich an.

Was soll ich tun, wenn ein Browser <dialog> nicht unterstützt?

Das Element wird einfach als Block-Container gerendert und verursacht keinen Fehler. Fügen Sie ein Polyfill hinzu: dialog-polyfill vom Google-Chrome-Team (400 Zeilen, keine Abhängigkeiten) deckt showModal(), close() und ::backdrop für ältere Browser ab.

Welchen Tag sollten Sie zuerst einführen?

{iframe} und <picture> sind zwei Tags, die maximalen Nutzen bei minimalem Aufwand liefern. {iframe} ersetzt jeden Drittanbieter-Videoplayer durch ein natives Fenster mit Bild-in-Bild. <picture> eliminiert das manuelle Umschalten zwischen WebP/AVIF-Formaten; der Browser wählt, was er versteht.

Skalieren Sie von dort aus: <input> mit modernen Typen (color, date, range) spart Kilobyte an JS-Widgets ein. <dialog> beseitigt die Abhängigkeit von Modalbibliotheken. <del>/<ins> bringt Ordnung in die Versionierung von Inhalten.

Sie müssen nicht alle 18 in einem einzigen Sprint umsetzen. Beginnen Sie mit einem Tag pro Woche. Innerhalb von sechs Monaten wird Ihr Markup semantisch reichhaltig und Ihr Code selbstdokumentierend sein, ohne eine einzige Zeile JavaScript, wo sie nicht benötigt wird.

Wenn Sie nicht wissen, wo Sie anfangen sollen, öffnen Sie Ihr aktuelles Projekt, suchen Sie das nächstgelegene <div class="..."> ohne klare Semantik und ersetzen Sie es durch einen passenden Tag aus der Liste. Der Unterschied in der Lesbarkeit des Codes wird sofort spürbar sein.