Im Rahmen von SEO und Barrierefreiheit kamen mit HTML5 neue selbstbeschreibende Tags, die es Maschinen erleichtern Inhalte auf Webseiten einzuordnen. Die neuen Tags ersetzen bisher gebräuchliche allgemeinere Elemente, z.B. <div>, und verbessern dadurch SEO-Ranking, Keyboard-Bedienung und Screenreader-Kompatibilität.
Nachfolgend sind diese Tags nach Anwendungsbereichen gegliedert:
- Layout und DOM-Struktur
- Text und Inhalt
- Interaktive und informationsreiche Elemente
- Medien und eingebettete Inhalte
- Tabellen und Listen
1. Layout und DOM-Struktur
| Tag | Beschreibung | Beispiel |
|---|---|---|
<header> | Kopfbereich eines Dokuments oder Abschnitts | <header><h1>Meine Website</h1><nav>…</nav></header> |
<nav> | Navigationsbereich mit Links | <nav><ul><li><a href="/">Home</a></li></ul></nav> |
<main> | Hauptinhalt der Seite | <main><article>…</article></main> |
<section> | Thematisch zusammengehöriger Abschnitt | <section><h2>Kapitel 1</h2><p>Text…</p></section> |
<article> | Eigenständiger Inhalt | <article><h2>Blogpost</h2><p>…</p></article> |
<aside> | Zusatzinformationen, Randnotizen | <aside><p>Werbung oder Links</p></aside> |
<footer> | Fußbereich eines Dokuments oder Abschnitts | <footer><p>© 2025 Meine Website</p></footer> |
2. Text- und Inhalt
| Tag | Beschreibung / Einsatzzweck | Beispiel |
|---|---|---|
<h1>–<h6> | Überschriftenhierarchie | <h1>Haupttitel</h1><h2>Untertitel</h2> |
<p> | Absatz für Fließtext | <p>Dies ist ein Absatz mit Text.</p> |
<blockquote> | Längeres Zitat aus einer Quelle | <blockquote>„Lorem ipsum…“ – Autor</blockquote> |
<cite> | Quellenangabe oder Werkstitel | <cite>Wikipedia</cite> |
<address> | Kontaktinformationen | <address>Max Mustermann<br>Musterstraße 1<br>12345 Musterstadt</address> |
<pre> | Vorformatierter Text (z. B. Code, ASCII-Art) | <pre>console.log("Hallo Welt");</pre> |
<code> | Quellcode oder Befehle inline | <code>let x = 42;</code> |
<figure> | Gruppiert Medien (Bild, Diagramm, Codeblock) | <figure><img src="bild.jpg"><figcaption>Beschreibung</figcaption></figure> |
<figcaption> | Beschriftung für <figure> | <figcaption>Abbildung 1: Umsatz</figcaption> |
<hr> | Thematischer Trenner innerhalb eines Texts | <hr> |
<strong> | Starke Betonung (semantisch wichtig) | <strong>Wichtiger Hinweis!</strong> |
<em> | Betonung eines Wortes (semantisch, meist kursiv) | <em>besonders wichtig</em> |
<mark> | Hervorhebung relevanter Textteile | <mark>Suchtreffer</mark> |
<abbr> | Abkürzung mit erklärendem Tooltip | <abbr title="Cascading Style Sheets">CSS</abbr> |
<time> | Zeit- oder Datumsangabe (maschinenlesbar) | <time datetime="2025-10-15">15. Oktober 2025</time> |
<data> | Verknüpft sichtbaren Text mit maschinenlesbarem Wert | <data value="42">Antwort</data> |
<dfn> | Definition eines Begriffs | <dfn>HTML</dfn> ist eine Auszeichnungssprache. |
<var> | Variablenname oder Platzhalter | Der Wert von <var>x</var> ist 10. |
<s> | Durchgestrichener, veralteter oder ungültiger Text | <s>Alter Preis: 50 €</s> |
<del> / <ins> | Gelöschter bzw. neu eingefügter Text | <del>alt</del> <ins>neu</ins> |
<b> | Wichtiger Text ohne semantische Betonung | <b>Hinweis:</b> |
<i> | Alternative Stimme oder Bedeutung (z. B. Fachbegriff) | <i>Fachbegriff</i> |
<u> | Konzeptuell hervorgehobener Text | <u>Markierung</u> |
<small> | Nachrangiger Text (z. B. rechtliche Hinweise) | <small>Impressum</small> |
<sub> / <sup> | Tief- und Hochstellung | H<sub>2</sub>O, E = mc<sup>2</sup> |
3. Interaktive und informationsreiche Elemente
| Tag | Beschreibung | Beispiel |
|---|---|---|
<details> | Ausklappbarer Bereich | <details><summary>FAQ Frage</summary><p>Antwort</p></details> |
<summary> | Titel eines <details> | siehe oben |
<dialog> | Dialogfenster | <dialog open>Popup-Text</dialog> |
<progress> | Fortschrittsanzeige | <progress value="70" max="100"></progress> |
<meter> | Skala oder Messwert | <meter value="0.6">60%</meter> |
4. Medien und eingebettete Inhalte
| Tag | Beschreibung | Beispiel |
|---|---|---|
<audio> | Audioeinbettung | <audio controls src="song.mp3"></audio> |
<video> | Videoeinbettung | <video controls src="video.mp4"></video> |
<track> | Untertitel oder Metadaten | <track kind="subtitles" src="untertitel.vtt"> |
<source> | Alternative Medienquelle | <video><source src="video.mp4" type="video/mp4"></video> |
<picture> | Responsive Bilder | <picture><source srcset="bild.webp" type="image/webp"><img src="bild.jpg"></picture> |
<canvas> | Zeichenfläche | <canvas id="meinCanvas"></canvas> |
<svg> | Vektorgrafik | <svg width="100" height="100"><circle cx="50" cy="50" r="40"/></svg> |
5. Tabellen und Listen
| Tag | Beschreibung | Beispiel |
|---|---|---|
<table> | Tabelle | <table><tr><td>1</td><td>2</td></tr></table> |
<caption> | Titel einer Tabelle | <caption>Umsatz 2025</caption> |
<thead> / <tbody> / <tfoot> | Tabellenstruktur | <table><thead><tr><th>Jahr</th></tr></thead></table> |
<th> | Tabellenkopf | <th>Name</th> |
<tr> / <td> | Tabellenzeile / Zelle | <tr><td>Max</td></tr> |
<ul> / <ol> | Ungeordnete / geordnete Liste | <ul><li>Item 1</li></ul> |
<li> | Listenelement | siehe oben |
<dl> | Definitionsliste | <dl><dt>HTML</dt><dd>Auszeichnungssprache</dd></dl> |
<dt> / <dd> | Begriff / Definition | siehe oben |