<html>
Wurzelelement, das die ganze Seite umschließt. Die Sprachangabe im lang-Attribut gehört hierher.
<head>
Kopfbereich mit allem, was der Browser wissen muss, aber niemand sieht.
<body>
Der sichtbare Teil des Dokuments.
<title>
Titel der Seite, sichtbar im Browsertab und als Überschrift im Suchergebnis.
ohne Endtag
<base>
Basisadresse, auf die sich alle relativen Links der Seite beziehen. Genau einmal erlaubt.
ohne Endtag
<link>
Verknüpfung zu externen Ressourcen, vor allem Stylesheets, Favicons und Canonicals.
ohne Endtag
<meta>
Angaben über das Dokument: Zeichensatz, Viewport, Beschreibung, Robots-Anweisungen.
<style>
CSS direkt im Dokument statt in einer eigenen Datei.
<script>
JavaScript, entweder inline oder als Verweis auf eine Datei.
<noscript>
Inhalt für den Fall, dass JavaScript abgeschaltet ist.
nach HTML5
<template>
Markup-Vorlage, die der Browser parst, aber nicht darstellt. Wird per Skript geklont.
nach HTML5
<slot>
Platzhalter in einer Web-Komponente, in den eigener Inhalt einfließt.
neu in HTML5
<header>
Einleitender Bereich einer Seite oder eines Abschnitts, typisch mit Logo und Überschrift.
neu in HTML5
<nav>
Block mit Navigationslinks. Gedacht für die Hauptwege durch die Seite, nicht für jede Linkgruppe.
nach HTML5
<main>
Der eine Hauptinhalt des Dokuments, ohne Kopf, Fuß und Seitenleiste. Nur einmal pro Seite.
neu in HTML5
<section>
Thematisch zusammengehöriger Abschnitt, der eine eigene Überschrift verdient.
neu in HTML5
<article>
In sich geschlossener Inhalt, der auch allein stehen könnte: Beitrag, Kommentar, Produktkarte.
neu in HTML5
<aside>
Randinhalt, der den Haupttext ergänzt, aber nicht zu ihm gehört.
neu in HTML5
<footer>
Abschluss einer Seite oder eines Abschnitts, oft mit Autor, Datum und Rechtlichem.
<h1>
Überschrift erster Ordnung, die Hauptüberschrift des Inhalts.
<h2>
Überschrift zweiter Ordnung.
<h3>
Überschrift dritter Ordnung.
<h4>
Überschrift vierter Ordnung.
<h5>
Überschrift fünfter Ordnung.
<h6>
Überschrift sechster Ordnung, die unterste Stufe.
neu in HTML5
<hgroup>
Überschrift samt zugehörigen Unterzeilen als eine Einheit.
<address>
Kontaktangaben zum Autor oder Betreiber, keine beliebige Postanschrift.
nach HTML5
<search>
Bereich mit Suchfunktion. Ersetzt das früher übliche role="search".
<p>
Absatz. Das meistgenutzte Element überhaupt.
ohne Endtag
<hr>
Thematischer Bruch im Text. Wird als Linie dargestellt, meint aber den Inhaltswechsel.
<pre>
Vorformatierter Text, bei dem Zeilenumbrüche und Leerzeichen erhalten bleiben.
<blockquote>
Längeres Zitat als eigener Block. Die Quelle gehört ins cite-Attribut.
<ol>
Nummerierte Liste, bei der die Reihenfolge eine Bedeutung hat.
<ul>
Unnummerierte Liste ohne feste Reihenfolge.
<menu>
Liste von Befehlen oder Werkzeugen. Technisch dasselbe wie ul, nur semantisch enger.
<li>
Einzelner Listenpunkt in ol, ul oder menu.
<dl>
Beschreibungsliste aus Begriffen und den zugehörigen Erläuterungen.
<dt>
Der Begriff in einer Beschreibungsliste.
<dd>
Die Erläuterung zum vorangehenden Begriff.
neu in HTML5
<figure>
Abbildung, Codeblock oder Diagramm samt Beschriftung als abgeschlossene Einheit.
neu in HTML5
<figcaption>
Die Bildunterschrift innerhalb einer figure.
<div>
Behälter ohne eigene Bedeutung. Die richtige Wahl erst, wenn kein passendes Element existiert.
<a>
Verweis auf eine andere Adresse, einen Anker oder eine Datei.
<em>
Betonung, die den Sinn des Satzes verändert. Wird kursiv dargestellt.
<strong>
Inhaltliche Wichtigkeit, etwa eine Warnung. Wird fett dargestellt.
<small>
Nebenbemerkung wie Rechtliches oder ein Haftungshinweis.
<s>
Inhalt, der nicht mehr zutrifft, etwa ein alter Preis.
<cite>
Titel eines Werks: Buch, Film, Aufsatz.
<q>
Kurzes Zitat mitten im Satz. Der Browser setzt die Anführungszeichen.
<dfn>
Die Stelle, an der ein Fachbegriff definiert wird.
<abbr>
Abkürzung, deren Bedeutung im title-Attribut steht.
neu in HTML5
<ruby>
Behälter für Aussprachehilfen, vor allem in ostasiatischen Schriften.
neu in HTML5
<rt>
Die Aussprachehilfe selbst, die über dem Zeichen steht.
neu in HTML5
<rp>
Klammern als Rückfalllösung für Browser ohne Ruby-Unterstützung.
neu in HTML5
<data>
Verbindet lesbaren Text mit einem maschinenlesbaren Wert.
neu in HTML5
<time>
Datum oder Uhrzeit in maschinenlesbarer Form im datetime-Attribut.
<code>
Ein Stück Quelltext.
<var>
Variable in einer Formel oder im Programmtext.
<samp>
Ausgabe eines Programms.
<kbd>
Eingabe über die Tastatur, etwa eine Tastenkombination.
<sub>
Tiefgestellter Text, etwa in chemischen Formeln.
<sup>
Hochgestellter Text, etwa Exponenten oder Fußnotenziffern.
<i>
Abweichende Stimmlage: Fachbegriff, fremdsprachiger Ausdruck, Gedanke.
<b>
Hervorhebung ohne besondere Wichtigkeit, etwa ein Schlüsselwort.
<u>
Nicht-textliche Auszeichnung, etwa eine als falsch markierte Schreibweise.
neu in HTML5
<mark>
Hervorhebung wegen Bezug zum Kontext, etwa ein Suchtreffer im Text.
neu in HTML5
<bdi>
Kapselt Text, dessen Schreibrichtung die Umgebung nicht beeinflussen soll.
<bdo>
Erzwingt eine Schreibrichtung für den umschlossenen Text.
<span>
Behälter ohne Bedeutung für eine Textstelle, wenn kein passendes Element existiert.
ohne Endtag
<br>
Zeilenumbruch, der zum Inhalt gehört, etwa in einer Anschrift.
neu in HTML5ohne Endtag
<wbr>
Erlaubte Trennstelle in einem langen Wort, falls der Platz nicht reicht.
<ins>
Nachträglich eingefügter Inhalt.
<del>
Nachträglich entfernter Inhalt.
ohne Endtag
<img>
Bild. Das alt-Attribut ist Pflicht, notfalls leer bei reiner Dekoration.
nach HTML5
<picture>
Rahmen um mehrere Bildvarianten, aus denen der Browser die passende wählt.
neu in HTML5ohne Endtag
<source>
Eine einzelne Quelle für picture, video oder audio.
<iframe>
Fremde Seite im eigenen Dokument. Datenschutzrechtlich der heikelste Kandidat.
neu in HTML5ohne Endtag
<embed>
Einbindung externer Inhalte über ein Plugin. Heute kaum noch sinnvoll.
<object>
Allgemeine Einbindung externer Ressourcen, etwa einer PDF-Datei.
neu in HTML5
<video>
Video ohne Plugin, mit eigenen Bedienelementen des Browsers.
neu in HTML5
<audio>
Tonwiedergabe ohne Plugin.
neu in HTML5ohne Endtag
<track>
Untertitel oder Kapitelmarken zu video und audio.
<map>
Verweissensitive Grafik: definiert klickbare Bereiche auf einem Bild.
ohne Endtag
<area>
Ein einzelner klickbarer Bereich innerhalb einer map.
neu in HTML5
<canvas>
Zeichenfläche, die per JavaScript gefüllt wird. Für Diagramme und Spiele.
neu in HTML5
<svg>
Vektorgrafik direkt im Dokument, beliebig skalierbar und per CSS gestaltbar.
neu in HTML5
<math>
Mathematische Formel in MathML.
<table>
Tabelle für echte Daten. Für Layout seit zwanzig Jahren nicht mehr vorgesehen.
<caption>
Beschriftung der Tabelle, steht als erstes Kind in table.
<colgroup>
Gruppe von Spalten, um sie gemeinsam zu formatieren.
ohne Endtag
<col>
Eine einzelne Spalte innerhalb einer colgroup.
<thead>
Kopfbereich der Tabelle. Wird beim Druck auf jeder Seite wiederholt.
<tbody>
Rumpf der Tabelle mit den eigentlichen Datenzeilen.
<tfoot>
Fußbereich, typisch für Summen.
<tr>
Eine Tabellenzeile.
<td>
Eine Datenzelle.
<th>
Eine Kopfzelle. Mit scope festlegen, ob sie für Zeile oder Spalte gilt.
<form>
Rahmen um alle Eingabefelder, die gemeinsam abgeschickt werden.
<label>
Beschriftung eines Eingabefelds. Ohne sie ist ein Formular nicht bedienbar.
ohne Endtag
<input>
Eingabefeld. Der type bestimmt alles: Text, E-Mail, Datum, Farbe, Datei, Schalter.
<button>
Schaltfläche. Ohne type-Angabe verschickt sie das Formular.
<select>
Auswahlliste, aufklappbar oder mehrzeilig.
neu in HTML5
<datalist>
Vorschlagsliste zu einem Textfeld, ohne die Eingabe zu beschränken.
<optgroup>
Gruppe von Auswahlmöglichkeiten mit eigener Überschrift.
<option>
Ein Eintrag in select oder datalist.
<textarea>
Mehrzeiliges Textfeld.
neu in HTML5
<output>
Ergebnis einer Berechnung, das ein Skript hineinschreibt.
neu in HTML5
<progress>
Fortschrittsbalken für einen laufenden Vorgang.
neu in HTML5
<meter>
Messwert auf einer bekannten Skala, etwa Speicherbelegung. Kein Fortschritt.
<fieldset>
Gruppe zusammengehöriger Felder.
<legend>
Überschrift eines fieldset.
neu in HTML5
<details>
Aufklappbarer Bereich, der ohne JavaScript funktioniert.
neu in HTML5
<summary>
Die immer sichtbare Zeile eines details-Elements.
nach HTML5
<dialog>
Dialogfenster, das der Browser selbst verwaltet, samt modalem Modus.
abgeschafft
<acronym>
Akronym als Sonderfall der Abkürzung.
Heute stattdessen: abbr
abgeschafft
<applet>
Java-Applet im Dokument.
Heute stattdessen: object oder embed
abgeschafft
<basefont>
Grundschrift für das ganze Dokument.
Heute stattdessen: CSS
abgeschafft
<big>
Größerer Text.
Heute stattdessen: CSS
abgeschafft
<blink>
Blinkender Text. Nie ein Standard, aber jahrelang verbreitet.
Heute stattdessen: nichts
abgeschafft
<center>
Zentrierter Inhalt.
Heute stattdessen: CSS
abgeschafft
<dir>
Verzeichnisliste.
Heute stattdessen: ul
abgeschafft
<font>
Schriftart, Größe und Farbe direkt im Markup.
Heute stattdessen: CSS
abgeschafft
<frame>
Einzelner Rahmen in einem Frameset.
Heute stattdessen: iframe
abgeschafft
<frameset>
Aufteilung des Fensters in mehrere Rahmen.
Heute stattdessen: CSS-Layout
abgeschafft
<noframes>
Ersatzinhalt für Browser ohne Frames.
Heute stattdessen: nichts
abgeschafft
<isindex>
Einzeiliges Suchfeld aus der Frühzeit des Web.
Heute stattdessen: input
abgeschafft
<keygen>
Schlüsselpaar für Zertifikate erzeugen.
Heute stattdessen: Web Crypto API
abgeschafft
<marquee>
Laufschrift.
Heute stattdessen: CSS-Animation
abgeschafft
<menuitem>
Eintrag in einem Kontextmenü.
Heute stattdessen: button
abgeschafft
<nobr>
Verhindert den Zeilenumbruch.
Heute stattdessen: CSS white-space
abgeschafft
<noembed>
Ersatzinhalt für Browser ohne embed.
Heute stattdessen: object
abgeschafft
<param>
Parameter für ein object-Element.
Heute stattdessen: Attribute am object
abgeschafft
<plaintext>
Alles danach als Klartext, ohne Ende.
Heute stattdessen: pre
abgeschafft
<rb>
Basistext einer Ruby-Annotation.
Heute stattdessen: ruby
abgeschafft
<rtc>
Zweite Ebene einer Ruby-Annotation.
Heute stattdessen: rt
abgeschafft
<spacer>
Leerraum einfügen.
Heute stattdessen: CSS margin
abgeschafft
<strike>
Durchgestrichener Text.
Heute stattdessen: s oder del
abgeschafft
<tt>
Schreibmaschinenschrift.
Heute stattdessen: code oder CSS
abgeschafft
<xmp>
Vorformatierter Beispieltext.
Heute stattdessen: pre
Kein Element gefunden. Andere Schreibweise probieren oder den Filter auf „Alle“ zurücksetzen.
114 Elemente des aktuellen Standards, dazu 25 abgeschaffte.
Element, Tag oder Befehl
In der Praxis werden die drei Begriffe durcheinandergeworfen, und meistens ist das auch egal. Genau genommen ist das Element die Sache selbst, also etwa ein Absatz. Das Tag ist die Schreibweise, mit der du es im Quelltext notierst,<p> als Starttag und </p> als Endtag. Von Befehlen spricht kaum jemand, der beruflich damit zu tun hat. Der Begriff stammt aus einer Zeit, in der HTML für eine Programmiersprache gehalten wurde. Es ist aber eine Auszeichnungssprache: Du befiehlst nichts, du beschreibst, was ein Stück Text ist.
An einer Stelle wird der Unterschied praktisch. Dreizehn Elemente haben überhaupt keinen Inhalt und deshalb auch kein Endtag, <img> und <br> zum Beispiel. Oben sind sie mit "ohne Endtag" gekennzeichnet. Ein </img> quittiert dir der Browser zwar klaglos, richtig wird es dadurch nicht.
Wie viele HTML-Elemente gibt es?
Die ehrliche Antwort lautet: Es kommt darauf an, wann du fragst. HTML hat keine Versionsnummern mehr. Die WHATWG pflegt einen Living Standard, der sich fortlaufend ändert, das W3C hat seine eigene Zählung 2019 aufgegeben. Ein Element wie<search> kam 2023 dazu, ohne dass irgendjemand eine neue HTML-Version ausgerufen hätte. Wer heute nach "HTML 6" sucht, sucht nach etwas, das es nicht geben wird.
Diese Übersicht zählt 114 Elemente im aktuellen Standard. Andere Quellen kommen auf leicht abweichende Zahlen, weil sie <svg> und <math> weglassen, die aus eigenen Standards stammen und nur in HTML eingebettet werden, oder weil sie die sechs Überschriftenebenen als ein Element führen. Wenn dir irgendwo eine Zahl zwischen 110 und 120 begegnet, ist dasselbe gemeint.
Was HTML5 gebracht hat
Vor HTML5 bestand eine typische Seite aus<div>-Elementen mit sprechenden Klassennamen. Ob ein Block die Navigation war oder der Fußbereich, wusste nur der Entwickler, der die Klasse vergeben hatte. HTML5 hat dafür eigene Elemente eingeführt: <header>, <nav>, <article>, <section>, <aside> und <footer>. Der sichtbare Unterschied ist gleich null, der unsichtbare beträchtlich: Screenreader springen diese Bereiche gezielt an, und Suchmaschinen lesen die Struktur ohne Raterei.
Der zweite große Schritt betraf Medien. <video> und <audio> haben Flash abgelöst und damit ein Plugin, an dem jahrelang die halbe Sicherheitsbranche verzweifelt ist. Dazu kam <canvas> als Zeichenfläche für alles, was sich nicht als fertiges Bild ausliefern lässt.
Der dritte Schritt war der unauffälligste und im Alltag der nützlichste: neue Feldtypen für <input>. Datum, E-Mail, Telefonnummer, Farbe, Zahlenbereich. Auf dem Handy blendet der Browser die passende Tastatur ein, und die Prüfung auf eine gültige E-Mail-Adresse braucht keine Zeile JavaScript mehr.
Nach HTML5 ging es in kleinen Schritten weiter. <main>, <picture>, <dialog> und <search> sind erst danach dazugekommen. In der Liste oben sind sie deshalb getrennt gekennzeichnet.
Elemente, die es nicht mehr gibt
25 Elemente sind aus dem Standard geflogen. Die meisten davon waren Gestaltungsanweisungen, die im Markup nichts verloren haben:<font>, <center>, <big>, <strike>. Das alles macht heute CSS, und zwar an einer Stelle statt in tausend Tags.
Andere sind mit der Technik verschwunden, an die sie gebunden waren. <applet> starb mit Java im Browser, <frameset> und <frame> mit einer Layouttechnik, die jede einzelne Unterseite unauffindbar machte. Und <blink> war nie ein Standard, sondern eine Erfindung von Netscape, die es trotzdem in unzählige Seiten geschafft hat.
Die meisten dieser Elemente funktionieren im Browser weiterhin. Das ist kein Freibrief, sondern Rücksicht auf das alte Web: Nichts soll kaputtgehen, was einmal online gestellt wurde. Neu schreiben solltest du sie trotzdem nicht, denn valide sind sie nicht mehr, und Screenreader ignorieren sie zum Teil.
Die Elemente, bei denen am häufigsten danebengegriffen wird
<div> als Standardantwort. Ein <div> bedeutet nichts. Es ist die richtige Wahl, wenn du wirklich nur einen Kasten zum Ausrichten brauchst. Ist der Inhalt darin ein eigenständiger Beitrag, gehört <article> darum, bei einem thematischen Abschnitt <section>.
<b> und <strong> sehen gleich aus, meinen aber Verschiedenes. <strong> sagt: Das hier ist wichtig, notfalls eine Warnung. <b> sagt nur: Das hebt sich ab. Dasselbe gilt für <em> gegenüber <i>. Wer alles fett schreibt, was ins Auge fallen soll, nimmt <b>. Wer eine Betonung meint, die den Sinn des Satzes verändert, nimmt <em>.
Tabellen fürs Layout. Das ist seit zwanzig Jahren vorbei, taucht aber in Newslettern und älteren Vorlagen bis heute auf. <table> ist für Daten da, die Zeilen und Spalten haben. Alles andere macht CSS Grid.
<br> statt Absatz. Zwei Zeilenumbrüche hintereinander sehen aus wie ein Absatz, sind aber keiner. <br> gehört dahin, wo der Umbruch zum Inhalt gehört, also in eine Anschrift oder ein Gedicht.
<input> ohne <label>. Ein Platzhaltertext im Feld ist keine Beschriftung. Er verschwindet beim Tippen, und ein Screenreader liest ihn nicht zuverlässig vor. Ohne <label> ist ein Formular für einen Teil deiner Besucher schlicht nicht bedienbar.
Rückblick: der Beitrag von 2012
Diese Seite ging im Oktober 2012 mit einem anderen Anlass online. Der ursprüngliche Text steht hier weiter, weil er ganz gut zeigt, worum es damals ging. Wer erinnert sich nicht gern an seine Schulzeit, vor allem an das Unterrichtsfach Chemie, zurück? Dort durfte man sich über mehrere Schuljahre hinweg mit dem Periodensystem der Elemente befassen, wofür ich bis heute noch keinen Anwendungsfall in meinem Alltag finden konnte und es zur damaligen Zeit nicht wirklich gemocht hatte. Die Umsetzung für die Auszeichnungssprache HTML5 von Josh Duck trifft da schon deutlicher meinen Nerv. Er hat den kompletten W3C Working Draft in ein Periodensystem der HTML5-Elemente umgesetzt und die 107 HTML5-Elemente in einer praktischen Übersicht kategorisiert. Die Möglichkeit zur Eingabe einer URL, deren Ergebnis eine Auflistung der verwendeten HTML5-Elemente sowie deren Häufigkeit im aufgerufenen Dokument präsentiert, verschafft eine schnelle, visuelle Übersicht.HTML5-Browserunterstützung
Übersicht aller HTML-Elemente von HTML 3.2 bis XHTML 2.0
