Nachschlagewerk mit 126 HTML-Tags
Was jedes Tag tut, ob es ein End-Tag braucht und welche Attribute man wirklich nutzt — je eine Zeile.
Grundgerüst5
Das Grundgerüst jedes Dokuments, mit fester Reihenfolge und Position.
<html>Das Wurzelelement um das ganze Dokument; sein lang-Attribut nennt die Sprache.<head>Enthält nicht dargestellte Dokumentinformationen — Titel, Meta, Styles.<body>Alles, was der Leser tatsächlich sieht, steht in diesem Element.<title>Der Dokumenttitel, der im Browser-Tab und in Suchergebnissen erscheint.<base>Legt die Basis-URL fest, gegen die relative Links aufgelöst werden.
Abschnitte17
Teilt die Seite in sinnvolle Blöcke; Suchmaschinen und Screenreader folgen dieser Struktur.
<header>Der einleitende Teil eines Abschnitts — Überschrift, Logo, Navigation.<nav>Ein Block wichtiger Navigationslinks — nicht jede Linkgruppe, nur die zur Orientierung.<main>Der Hauptinhalt des Dokuments — einmal pro Seite, ohne Kopf- und Fußbereich.<section>Eine thematische Gruppe mit Überschrift — kein beliebiger Container.<article>Ein Inhalt, der für sich allein Sinn ergibt — Artikel, Beitrag, Kommentar.<aside>Inhalt neben dem Haupttext — ohne ihn liest sich der Text unverändert.<footer>Der abschließende Teil eines Abschnitts — Copyright, Kontakt, verwandte Links.<div>Ein Container ohne eigene Bedeutung — nur wenn kein anderes Element passt.<h1>Die oberste Überschrift der Seite — in der Regel eine pro Dokument.<h2>Eine Überschrift eine Ebene unter h1, für die großen Abschnitte.<h3>Eine Überschrift, die einen h2-Abschnitt weiter unterteilt.<h4>Eine Überschrift vierter Ebene — so tief verschachtelt lohnt ein Blick auf die Struktur.<h5>Eine Überschrift fünfter Ebene — in der Praxis selten nötig.<h6>Die sechste und kleinste Überschriftenebene.<hgroup>Fasst eine Überschrift mit ihrer Unterzeile zusammen.<address>Kennzeichnet Kontaktangaben zum Artikel oder Dokument — nicht jede Postanschrift.<search>Kennzeichnet eine Gruppe von Suchsteuerelementen — erst seit Kurzem im Standard.
Textblöcke7
Text, der als Block fließt — Absätze, Zitate, Codelistings.
<p>Ein Absatz. Browser schließen ihn automatisch, wenn das End-Tag fehlt.<br>Ein einzelner Zeilenumbruch — kein Mittel für Abstand zwischen Absätzen.<hr>Markiert einen Themenwechsel — keine bloße Zierlinie.<pre>Zeigt Text genau wie geschrieben — Leerzeichen und Umbrüche bleiben erhalten.<blockquote>Ein längeres Zitat von anderswo; die Quell-URL steht im cite-Attribut.<figure>Eine in sich geschlossene Abbildung oder Codeblock, auf die der Text verweist; verschiebbar ohne Sinnverlust.<figcaption>Die Beschriftung einer Abbildung, als erstes oder letztes Kind darin.
Inline-Auszeichnung30
Zeichnet einen Teil der Zeile aus, ohne eine neue zu beginnen.
<a>Ein Link woandershin; ohne href ist es ein Platzhalter, kein Link.<span>Ein Inline-Container ohne Bedeutung, um Teile einer Zeile anders zu gestalten.<strong>Kennzeichnet Wichtiges; die fette Darstellung ist nur die Folge.<em>Der Teil, den man beim Vorlesen betonen würde; kursiv ist nur die Darstellung.<b>Hebt hervor, ohne Wichtigkeit auszudrücken — dafür gibt es strong.<i>Text in anderem Tonfall — Fremdwörter, wissenschaftliche Namen, Gedanken.<u>Unterstreicht Text, der eine nicht-textliche Anmerkung braucht, etwa Rechtschreibfehler.<s>Streicht nicht mehr Zutreffendes durch; für Änderungsverlauf nimmt man del.<mark>Hebt hervor, was für den Lesenden zählt — wie ein Textmarker.<small>Kleingedrucktes am Rand — Haftungsausschlüsse, Copyright-Zeilen.<sub>Tiefgestellter Text, wie die 2 in H₂O.<sup>Hochgestellter Text, für Potenzen und Fußnotenzeichen.<code>Ein Codefragment, meist in dicktengleicher Schrift dargestellt.<kbd>Steht für eine Taste, die man drückt, etwa Strg oder Enter.<samp>Von einem Programm erzeugte Ausgabe.<var>Der Name einer Variablen in einer Formel oder im Code.<q>Ein kurzes Zitat im Fließtext; die Anführungszeichen setzt der Browser.<cite>Nennt den Titel eines Werks — nicht den Namen einer Person.<abbr>Eine Abkürzung; die Auflösung steht im title-Attribut.<time>Ein Datum oder eine Uhrzeit; das datetime-Attribut trägt die maschinenlesbare Form.<data>Hängt an den lesbaren Wert einen maschinenlesbaren an.<dfn>Kennzeichnet den Begriff, der an dieser Stelle definiert wird.<bdi>Isoliert Text, dessen Leserichtung sonst die Umgebung stören würde.<bdo>Erzwingt die Schreibrichtung; das dir-Attribut ist Pflicht.<ruby>Ruby-Anmerkung — die Lesung über den Zeichen, zusammen mit rt.<rt>Innerhalb von ruby steht hier die Lesung selbst.<rp>Ersatzklammern für Browser, die Ruby nicht darstellen können.<wbr>Schlägt eine Stelle für einen Zeilenumbruch vor — nützlich in langen URLs.<ins>Später hinzugefügter Inhalt — wenn ein Dokument seinen Änderungsverlauf zeigt.<del>Entfernter Inhalt; bildet mit ins den Änderungsverlauf ab.
Listen7
Geordnete und ungeordnete Listen sowie Begriffslisten.
<ul>Eine ungeordnete Liste — Umsortieren ändert nichts am Sinn.<ol>Eine geordnete Liste; start setzt die Anfangszahl, reversed zählt rückwärts.<li>Ein Listenpunkt; gehört in ein ul oder ol.<dl>Eine Liste, die Begriffe mit ihren Beschreibungen paart.<dt>In einer dl steht hier der beschriebene Begriff.<dd>Die Beschreibung nach einem dt; ein Begriff kann mehrere haben.<menu>Eine Liste von Befehlen oder Werkzeugen; verhält sich heute wie ul.
Tabellen10
Daten in Zeilen und Spalten — kein Layout-Mittel.
<table>Enthält Daten in Zeilen und Spalten — kein Layout-Werkzeug.<thead>Die Kopfzeilen einer Tabelle; sie wiederholen sich auf jeder Druckseite.<tbody>Die Datenzeilen einer Tabelle; Browser ergänzen sie auch ungeschrieben.<tfoot>Die Zusammenfassungszeilen am Tabellenende, etwa Summen.<tr>Eine Tabellenzeile, die th- oder td-Zellen enthält.<th>Eine Kopfzelle; scope sagt, ob sie eine Zeile oder Spalte benennt.<td>Eine Datenzelle; colspan und rowspan verbinden sie über Spalten oder Zeilen.<caption>Der Titel der gesamten Tabelle, als erstes Kind darin.<colgroup>Fasst mehrere Spalten zusammen, praktisch für spaltenweite Gestaltung.<col>Verweist innerhalb von colgroup auf eine Spalte — oder so viele wie span sagt.
Formulare14
Steuerelemente, die einen Wert aufnehmen und verschicken.
<form>Bündelt Eingaben zum Absenden; action nennt das Ziel, method die Art.<input>Ein einzelnes Eingabefeld; type macht daraus Text, Zahl, Datum, Farbe oder Datei.<textarea>Ein mehrzeiliges Textfeld; der Vorgabetext steht zwischen den Tags.<button>Ein Knopf; ohne type wird er im Formular zum Absende-Knopf.<select>Eine Auswahlliste für einen Wert; mit multiple sind mehrere möglich.<option>Eine Auswahlmöglichkeit in einem select.<optgroup>Gruppiert Optionen unter einer Beschriftung.<label>Eine Beschriftung für ein Eingabefeld; mit for aktiviert ein Klick auf den Text das Feld.<fieldset>Fasst zusammengehörige Felder ein; disabled sperrt alle auf einmal.<legend>Die Beschriftung eines fieldset, als erstes Kind.<datalist>Vorschläge für ein Eingabefeld; man darf trotzdem etwas anderes eintippen.<output>Enthält ein Rechenergebnis; for nennt die zugrunde liegenden Felder.<progress>Ein Balken, der den Fortschritt einer Aufgabe zeigt.<meter>Zeigt einen Wert in einem bekannten Bereich — nicht für Fortschritt.
Medien10
Bilder, Audio, Video und Flächen zum Zeichnen.
<img>Ein Bild; alt muss wiedergeben, was das Bild vermittelt.<picture>Lässt den Browser je nach Bildschirm oder Format ein anderes Bild wählen.<source>Eine Kandidatendatei innerhalb von picture, video oder audio.<video>Spielt Video ab; autoplay funktioniert meist nur zusammen mit muted.<audio>Spielt Ton ab; ohne controls ist nichts zu sehen.<track>Fügt Untertitel oder Beschreibungen hinzu und verweist auf eine WebVTT-Datei.<canvas>Eine leere Fläche, auf der Skript zeichnet; das Gezeichnete ist kein Text.<svg>Zeichnet Vektorgrafik direkt im Dokument; sie bleibt in jeder Größe scharf.<map>Legt anklickbare Bereiche über ein Bild, gemeinsam mit area.<area>Ein anklickbarer Bereich in einer map, über Form und Koordinaten definiert.
Einbettung4
Setzt ein anderes Dokument oder eine Ressource in dieses ein.
<iframe>Bettet ein anderes Dokument als Fenster ein; title nennt dessen Inhalt.<embed>Bindet externe Plugin-Inhalte ein; heute kaum noch gebräuchlich.<object>Bindet eine externe Ressource ein; im Inneren ist Ersatzinhalt möglich.<portal>Ein experimentelles Element, das eine andere Seite vorzeigt und dorthin führt.
Skript und Stil5
Verleiht dem Dokument Verhalten und Aussehen.
<script>Lädt oder enthält JavaScript; defer führt es nach dem Parsen aus.<noscript>Inhalt, der nur ohne aktives Skript erscheint.<style>Direkt im Dokument notiertes CSS, üblicherweise im head.<template>Ein Fragment, das jetzt nicht dargestellt, später per Skript geklont wird.<slot>Hält in einer Web-Komponente Platz für Inhalt von außen frei.
Dokumentinfo2
Angaben für Browser und Suchmaschinen, nicht für Menschen.
Aufklappbares3
Dinge, die sich per Klick öffnen und schließen — ohne JavaScript.
Veraltet12
Vom Standard ausgemusterte Tags; man trifft sie nur in alten Dokumenten.
<center>Der alte Weg zum Zentrieren; heute macht das CSS.<font>Das alte Tag, um Schrift, Größe und Farbe direkt zu setzen.<marquee>Das alte Lauftext-Tag; CSS-Animation ersetzt es.<blink>Ließ Text blinken; kein Browser unterstützt es mehr.<big>Das alte Tag für eine Stufe größeren Text.<strike>Das alte Durchstreichungs-Tag; heute nimmt man s oder del.<tt>Das alte Tag für dicktengleiche Schrift; code ersetzt es.<frame>Ein Feld der alten Methode, das Fenster auf Dokumente aufzuteilen.<frameset>Der alte Container, der Frames anstelle von body anordnete.<acronym>Das alte Tag für Akronyme; heute genügt abbr.<applet>Das alte Tag für Java-Applets; die Laufzeitumgebung existiert nicht mehr.<dir>Das alte Tag für Verzeichnislisten; ul hat es ersetzt.
So liest man das
- Die meisten Tags treten paarweise auf, öffnend und schließend. Nur inhaltslose Tags wie img oder br bleiben offen.
- Ein </br> bei einem leeren Element nützt nichts: Der Browser ignoriert es oder fügt eine Leerzeile ein.
- Das Aussehen ist Sache des CSS. Ein Tag sagt, was etwas ist; fett oder kursiv ist nur die Folge.
- Das passende Tag hilft Suchmaschinen und Screenreadern gleichermaßen. Alles in div zu packen wirft diese Information weg.
Häufige Fragen
Q. Wie viele HTML-Tags gibt es?
Rund 110 leben im aktuellen Standard, mit den veralteten etwa 130. Diese Referenz führt 126 — die heute gebräuchlichen und jene, die einem in alten Dokumenten begegnen.
Q. Welche Tags haben kein End-Tag?
Die inhaltslosen: img, br, hr, input, meta, link und einige mehr. Ein </img> bewirkt nichts. Der XHTML-Schrägstrich in <br /> ist erlaubt, ändert in HTML aber nichts.
Q. Worin unterscheiden sich div und section?
Ein div ist ein bedeutungsloser Kasten, eine section eine thematische Gruppe mit Überschrift. Passt dort eine Überschrift, nimm section; brauchst du nur etwas für Styles, ist div ehrlich.
Q. Dürfen Tag-Namen groß geschrieben werden?
HTML unterscheidet keine Groß- und Kleinschreibung, <DIV> funktioniert also. Üblich ist Kleinschreibung, und in XML-Kontexten wie XHTML oder SVG ist nur sie gültig.
Q. Was passiert bei veralteten Tags?
Die meisten Browser stellen sie noch dar. Der Standard hat sie jedoch fallen gelassen, sie können jederzeit verschwinden — und Ersatz gibt es längst: CSS für center und font, CSS-Animation für marquee.