HTML-Tags-Referenz

HTML-Tags nachschlagen: alle HTML-Elemente nach dem Living Standard mit Kategorie, kurzer Erklärung und Kopiervorlage, veraltete Tags mit Ersatz markiert.

Suchen

Gruppe

Veraltete Elemente anzeigen

Dokument und Metadaten

<html>…</html>

Dokument und MetadatenWurzelelement des Dokuments; das Attribut lang legt die Sprache fest.

<head>…</head>

Dokument und MetadatenKopfbereich mit Metadaten, Titel, Stylesheets und Skripten; nicht sichtbar.

<title>…</title>

Dokument und MetadatenSeitentitel für Browser-Tab, Lesezeichen und Suchergebnisse. Pflicht, genau einmal im head.

<base>

Dokument und Metadatenleeres ElementBasis-URL und Standardziel für alle relativen Links im Dokument; höchstens einmal.

<link>

Dokument und Metadatenleeres ElementVerknüpft externe Ressourcen: Stylesheet, Favicon, Canonical, Preload, Manifest.

<meta>

Dokument und Metadatenleeres ElementMetadaten wie Zeichensatz, Viewport, Beschreibung oder Robots-Anweisungen.

<style>…</style>

Dokument und MetadatenEingebettetes CSS.

<body>…</body>

Dokument und MetadatenSichtbarer Inhalt des Dokuments.

Abschnitte und Gliederung

<article>…</article>

Abschnitte und GliederungsemantischIn sich geschlossener Inhalt, der auch einzeln Sinn ergibt: Beitrag, Kommentar, Produktkarte.

<section>…</section>

Abschnitte und GliederungsemantischThematischer Abschnitt, in der Regel mit eigener Überschrift.

<nav>…</nav>

Abschnitte und GliederungsemantischBereich mit wichtigen Navigationslinks.

<aside>…</aside>

Abschnitte und GliederungsemantischErgänzender Inhalt neben dem Hauptinhalt, etwa Seitenleiste oder Infokasten.

<h1>…</h1>

Abschnitte und GliederungÜberschrift der höchsten Ebene, meist die Hauptüberschrift der Seite.

<h2>…</h2>

Abschnitte und GliederungÜberschrift zweiter Ebene.

<h3>…</h3>

Abschnitte und GliederungÜberschrift dritter Ebene.

<h4>…</h4>

Abschnitte und GliederungÜberschrift vierter Ebene.

<h5>…</h5>

Abschnitte und GliederungÜberschrift fünfter Ebene.

<h6>…</h6>

Abschnitte und GliederungÜberschrift sechster und niedrigster Ebene.

<hgroup>…</hgroup>

Abschnitte und GliederungsemantischFasst eine Überschrift mit Unterzeile (p-Elementen) zusammen, etwa Titel und Untertitel.

<header>…</header>

Abschnitte und GliederungsemantischKopfbereich einer Seite oder eines Abschnitts, oft mit Logo, Titel und Navigation.

<footer>…</footer>

Abschnitte und GliederungsemantischFußbereich mit Angaben wie Autor, Copyright oder Links.

<address>…</address>

Abschnitte und GliederungsemantischKontaktangaben zur Person oder Organisation des nächsten article oder der Seite.

<main>…</main>

Abschnitte und GliederungsemantischHauptinhalt der Seite; nur ein sichtbares main pro Dokument.

<search>…</search>

Abschnitte und GliederungsemantischBereich mit Such- oder Filterfunktion (seit 2023 im Standard).

Textblöcke und Gruppierung

<p>…</p>

Textblöcke und GruppierungAbsatz.

<hr>

Textblöcke und Gruppierungleeres ElementThematischer Bruch zwischen Absätzen, meist als Linie dargestellt.

<pre>…</pre>

Textblöcke und GruppierungVorformatierter Text; Leerzeichen und Zeilenumbrüche bleiben erhalten.

<blockquote>…</blockquote>

Textblöcke und GruppierungLängeres Zitat aus einer anderen Quelle; Attribut cite für die Quelle.

<ol>…</ol>

Textblöcke und GruppierungGeordnete (nummerierte) Liste; Attribute start, reversed, type.

<ul>…</ul>

Textblöcke und GruppierungUngeordnete Liste mit Aufzählungszeichen.

<menu>…</menu>

Textblöcke und GruppierungListe von Befehlen, etwa Werkzeugleiste; verhält sich wie ul.

<li>…</li>

Textblöcke und GruppierungListeneintrag in ol, ul oder menu.

<dl>…</dl>

Textblöcke und GruppierungBeschreibungsliste aus Begriffen und Erklärungen, etwa Glossar oder Metadaten.

<dt>…</dt>

Textblöcke und GruppierungBegriff in einer Beschreibungsliste.

<dd>…</dd>

Textblöcke und GruppierungErklärung zum Begriff in einer Beschreibungsliste.

<figure>…</figure>

Textblöcke und GruppierungsemantischEigenständige Abbildung, Grafik, Tabelle oder Code mit optionaler Bildunterschrift.

<figcaption>…</figcaption>

Textblöcke und GruppierungsemantischBildunterschrift oder Legende eines figure.

<div>…</div>

Textblöcke und GruppierungAllgemeiner Block-Container ohne Bedeutung; nur verwenden, wenn kein passenderes Element existiert.

Textauszeichnung

<a>…</a>

TextauszeichnungLink (Hyperlink) mit href; ohne href ein Platzhalter.

<em>…</em>

TextauszeichnungBetonung, die den Sinn verändert; meist kursiv dargestellt.

<strong>…</strong>

TextauszeichnungBesondere Wichtigkeit oder Dringlichkeit; meist fett.

<small>…</small>

TextauszeichnungKleingedrucktes wie Hinweise, rechtliche Anmerkungen oder Quellenangaben.

<s>…</s>

TextauszeichnungNicht mehr zutreffender Inhalt, etwa alter Preis. Für Löschungen im Dokument del verwenden.

<cite>…</cite>

TextauszeichnungTitel eines Werks (Buch, Film, Artikel), nicht der Name einer Person.

<q>…</q>

TextauszeichnungKurzes Zitat im Fließtext; der Browser setzt Anführungszeichen.

<dfn>…</dfn>

TextauszeichnungBegriff, der an dieser Stelle definiert wird.

<abbr>…</abbr>

TextauszeichnungAbkürzung; die Langform kann im Attribut title stehen.

<ruby>…</ruby>

TextauszeichnungRuby-Annotation, etwa Aussprachehilfen über ostasiatischen Schriftzeichen.

<rt>…</rt>

TextauszeichnungText der Ruby-Annotation.

<rp>…</rp>

TextauszeichnungKlammern als Ersatz für Browser ohne Ruby-Unterstützung.

<data>…</data>

TextauszeichnungVerknüpft Inhalt mit einem maschinenlesbaren Wert im Attribut value.

<time>…</time>

TextauszeichnungsemantischDatum oder Uhrzeit, maschinenlesbar im Attribut datetime.

<code>…</code>

TextauszeichnungQuelltext-Fragment im Fließtext.

<var>…</var>

TextauszeichnungVariable in Mathematik oder Programmierung.

<samp>…</samp>

TextauszeichnungBeispielhafte Ausgabe eines Programms.

<kbd>…</kbd>

TextauszeichnungTastatureingabe oder Tastenkombination.

<sub>…</sub>

TextauszeichnungTiefgestellter Text, etwa in H2O.

<sup>…</sup>

TextauszeichnungHochgestellter Text, etwa Exponenten oder Fußnotenzeichen.

<i>…</i>

TextauszeichnungText in anderer Stimmung oder Sprache, Fachbegriffe, Gedanken; ohne zusätzliche Betonung.

<b>…</b>

TextauszeichnungHervorgehobener Text ohne zusätzliche Wichtigkeit, etwa Schlüsselwörter.

<u>…</u>

TextauszeichnungNicht sprachliche Markierung, etwa Rechtschreibfehler; wird unterstrichen und leicht mit Links verwechselt.

<mark>…</mark>

TextauszeichnungsemantischHervorhebung wegen Relevanz im aktuellen Zusammenhang, etwa Suchtreffer.

<bdi>…</bdi>

TextauszeichnungIsoliert Text mit unbekannter Schreibrichtung, etwa Benutzernamen in arabischer Schrift.

<bdo>…</bdo>

TextauszeichnungErzwingt eine Schreibrichtung über das Attribut dir.

<span>…</span>

TextauszeichnungAllgemeiner Inline-Container ohne Bedeutung.

<br>

Textauszeichnungleeres ElementZeilenumbruch innerhalb eines Absatzes, etwa in Adressen oder Gedichten.

<wbr>

Textauszeichnungleeres ElementMögliche Trennstelle in langen Wörtern oder Adressen.

Änderungen

<ins>…</ins>

ÄnderungenEingefügter Text; Attribute cite und datetime.

<del>…</del>

ÄnderungenGelöschter Text; Attribute cite und datetime.

Bilder, Medien und Einbettung

<picture>…</picture>

Bilder, Medien und EinbettungContainer für mehrere Bildquellen (Formate, Größen, Art Direction) mit img als Rückfall.

<source>

Bilder, Medien und Einbettungleeres ElementAlternative Quelle für picture, audio oder video.

<img>

Bilder, Medien und Einbettungleeres ElementBild; alt ist Pflicht, width und height verhindern Layoutsprünge, loading="lazy" lädt später.

<iframe>…</iframe>

Bilder, Medien und EinbettungBettet eine andere Seite ein; mit sandbox und allow einschränken.

<embed>

Bilder, Medien und Einbettungleeres ElementEinbettung externer Inhalte über ein Plugin oder den Browser, etwa PDF.

<object>…</object>

Bilder, Medien und EinbettungExterne Ressource (z. B. PDF) mit Rückfallinhalt.

<video>…</video>

Bilder, Medien und EinbettungVideo mit Attributen wie controls, poster, muted, playsinline.

<audio>…</audio>

Bilder, Medien und EinbettungAudiodatei mit eingebauter Steuerung über controls.

<track>

Bilder, Medien und Einbettungleeres ElementUntertitel oder Kapitel (WebVTT) für video und audio.

<map>…</map>

Bilder, Medien und EinbettungImagemap mit klickbaren Bereichen.

<area>

Bilder, Medien und Einbettungleeres ElementKlickbarer Bereich in einer map.

<svg>…</svg>

Bilder, Medien und EinbettungEingebettete Vektorgrafik (SVG-Namensraum).

<math>…</math>

Bilder, Medien und EinbettungMathematische Formel in MathML.

<canvas>…</canvas>

Bilder, Medien und EinbettungZeichenfläche für Grafiken per JavaScript (2D, WebGL).

Tabellen

<table>…</table>

TabellenTabelle für tabellarische Daten, nicht für Layout.

<caption>…</caption>

TabellenÜberschrift einer Tabelle; erstes Kind von table.

<colgroup>…</colgroup>

TabellenGruppe von Spalten für gemeinsame Breiten oder Stile.

<col>

Tabellenleeres ElementEine oder mehrere Spalten in colgroup (Attribut span).

<thead>…</thead>

TabellenKopfzeilen der Tabelle.

<tbody>…</tbody>

TabellenDatenzeilen der Tabelle.

<tfoot>…</tfoot>

TabellenFußzeilen der Tabelle, etwa Summen.

<tr>…</tr>

TabellenTabellenzeile.

<th>…</th>

TabellenKopfzelle; scope="col" oder "row" hilft Screenreadern.

<td>…</td>

TabellenDatenzelle; colspan und rowspan verbinden Zellen.

Formulare

<form>…</form>

FormulareFormular mit action und method.

<label>…</label>

FormulareBeschriftung eines Formularfelds; über for mit der id verknüpft.

<input>

Formulareleeres ElementEingabefeld; type bestimmt die Art: text, email, number, date, checkbox, radio, file, range und weitere.

<button>…</button>

FormulareSchaltfläche; type="button", "submit" oder "reset".

<select>…</select>

FormulareAuswahlliste.

<datalist>…</datalist>

FormulareVorschlagsliste für ein input (Attribut list).

<optgroup>…</optgroup>

FormulareGruppe von Optionen in select mit Beschriftung label.

<option>…</option>

FormulareEintrag in select oder datalist.

<textarea>…</textarea>

FormulareMehrzeiliges Textfeld.

<output>…</output>

FormulareErgebnis einer Berechnung oder Benutzeraktion.

<progress>…</progress>

FormulareFortschrittsanzeige einer Aufgabe.

<meter>…</meter>

FormulareMesswert in einem bekannten Bereich, etwa Speicherbelegung (nicht für Fortschritt).

<fieldset>…</fieldset>

FormulareGruppiert zusammengehörige Formularfelder.

<legend>…</legend>

FormulareBeschriftung eines fieldset.

Interaktive Elemente

<details>…</details>

Interaktive ElementesemantischAufklappbarer Bereich, der ohne JavaScript funktioniert; Attribut open, name für Akkordeons.

<summary>…</summary>

Interaktive ElementesemantischSichtbare Zeile von details, die zum Auf- und Zuklappen dient.

<dialog>…</dialog>

Interaktive ElementesemantischDialogfenster oder Modal; per showModal() modal öffnen.

Skripte und Komponenten

<script>…</script>

Skripte und KomponentenEinbinden oder Einbetten von JavaScript; type="module", defer, async.

<noscript>…</noscript>

Skripte und KomponentenInhalt für Browser mit deaktiviertem JavaScript.

<template>…</template>

Skripte und KomponentenVorlage, die nicht gerendert wird und per JavaScript geklont werden kann.

<slot>…</slot>

Skripte und KomponentenPlatzhalter im Shadow DOM von Web Components.

Veraltete Elemente

<acronym>

Veraltete ElementeAkronym. Ersatz: abbr.

<applet>

Veraltete ElementeJava-Applet. Ersatz: embed oder object; Java-Applets laufen in aktuellen Browsern nicht mehr.

<basefont>

Veraltete ElementeStandardschrift der Seite. Ersatz: CSS.

<bgsound>

Veraltete ElementeHintergrundmusik (Internet Explorer). Ersatz: audio.

<big>

Veraltete ElementeGrößere Schrift. Ersatz: CSS font-size.

<blink>

Veraltete ElementeBlinkender Text, nie standardisiert. Ersatz: keiner.

<center>

Veraltete ElementeZentrierter Block. Ersatz: CSS text-align oder margin auto.

<dir>

Veraltete ElementeVerzeichnisliste. Ersatz: ul.

<font>

Veraltete ElementeSchriftart, -farbe und -größe. Ersatz: CSS.

<frame>

Veraltete ElementeRahmen in einem frameset. Ersatz: iframe oder normales Layout.

<frameset>

Veraltete ElementeSeite aus mehreren Frames. Ersatz: iframe oder CSS-Layout.

<noframes>

Veraltete ElementeInhalt für Browser ohne Frames.

<image>

Veraltete ElementeFalsch geschriebenes img, wird vom Parser zu img umgewandelt.

<isindex>

Veraltete ElementeEinzeiliges Suchfeld. Ersatz: form mit input.

<keygen>

Veraltete ElementeSchlüsselpaar-Erzeugung im Formular. Ersatz: Web Crypto API.

<listing>

Veraltete ElementeVorformatierter Text. Ersatz: pre und code.

<marquee>

Veraltete ElementeLauftext. Ersatz: CSS-Animation, sparsam einsetzen.

<menuitem>

Veraltete ElementeKontextmenü-Eintrag, nie breit unterstützt. Ersatz: keiner.

<multicol>

Veraltete ElementeMehrspaltiger Text (Netscape). Ersatz: CSS columns.

<nextid>

Veraltete ElementeHilfselement aus frühem HTML. Ersatz: keiner.

<nobr>

Veraltete ElementeKein Zeilenumbruch. Ersatz: CSS white-space: nowrap.

<noembed>

Veraltete ElementeRückfallinhalt für embed. Ersatz: object.

<param>

Veraltete ElementeParameter für object. Ersatz: Attribute am object oder data-Attribute.

<plaintext>

Veraltete ElementeRest der Seite als reiner Text. Ersatz: pre mit text/plain-Ausgabe.

<rb>

Veraltete ElementeBasistext in ruby. Ersatz: Text direkt in ruby.

<rtc>

Veraltete ElementeContainer für Ruby-Texte. Ersatz: rt direkt in ruby.

<spacer>

Veraltete ElementeLeerraum (Netscape). Ersatz: CSS margin oder padding.

<strike>

Veraltete ElementeDurchgestrichen. Ersatz: s oder del.

<tt>

Veraltete ElementeFestbreitenschrift. Ersatz: code, kbd, samp oder CSS.

<xmp>

Veraltete ElementeBeispielcode. Ersatz: pre und code.

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

HTML-Elemente im Überblick

Diese HTML Tags Liste enthält alle 114 Elemente des aktuellen HTML Living Standard (WHATWG), dazu 30 veraltete HTML-Tags mit ihrem modernen Ersatz. Zu jedem Element sehen Sie die Kategorie, eine kurze Erklärung und eine Kopiervorlage mit den wichtigsten Attributen. Leere Elemente wie img, br oder input haben kein schließendes Tag. Die Suche findet Tags nach Namen und nach Stichworten aus der Beschreibung, etwa „Tabelle“ oder „Untertitel“.

Der Begriff HTML5 Tags ist im Alltag noch verbreitet; seit 2019 gibt es aber keine nummerierten Versionen mehr, sondern den laufend gepflegten Living Standard. Neu hinzugekommen sind in den letzten Jahren etwa search für Suchbereiche und das name-Attribut für exklusive details-Akkordeons. Als semantische HTML-Tags markiert sind Elemente wie header, nav, main, article, section, aside und footer, die Struktur und Bedeutung tragen. Sie helfen Screenreadern und Suchmaschinen, die Seite zu verstehen, und sind div-Containern vorzuziehen, wo sie passen.

Veraltete Elemente wie font, center oder marquee zeigen Browser oft noch an, sie sind aber nicht mehr gültig und gehören durch CSS oder die genannten HTML-Elemente ersetzt. Für Sonderzeichen im Text gibt es die HTML-Entities. Grenzen: Die Liste nennt nicht jedes Attribut; maßgeblich ist der Standard unter html.spec.whatwg.org.

Anleitung: HTML-Tags in 4 Schritten

Im Feld „Suchen“ einen Tag-Namen oder ein Stichwort wie „Tabelle“ oder „Untertitel“ eingeben.
Über „Gruppe“ auf einen Bereich wie Formulare, Tabellen oder Textauszeichnung eingrenzen.
Mit „Veraltete Elemente anzeigen“ auch obsolete Tags samt modernem Ersatz einblenden.
Die Kopiervorlage eines Elements mit „Kopieren“ übernehmen.

Typische Anwendungsfälle

Seitenstruktur planen: Passende semantische Elemente wie header, main, article und footer für ein neues Template auswählen.
Alten Code modernisieren: Tags wie font oder center in einer Altseite finden und durch CSS oder gültige Elemente ersetzen.
Barrierefreiheit verbessern: Statt div mit Klick-Handler das richtige Element wie button oder details wählen.
HTML lernen: Gezielt nachschlagen, wofür ein Element gedacht ist und welche Attribute es üblicherweise hat.

Fragen

Häufige Fragen

Wie viele HTML-Tags gibt es?

Der HTML Living Standard definiert derzeit rund 114 Elemente, wenn man svg und math als Einstiegspunkte in SVG und MathML mitzählt. Dazu kommen etwa 30 veraltete Tags, die Browser zum Teil noch darstellen, die aber nicht mehr gültig sind.

Was sind semantische HTML-Tags?

Elemente, deren Name die Bedeutung des Inhalts beschreibt, etwa header, nav, main, article, section, aside, footer, figure oder time. Sie verbessern Barrierefreiheit und Verständlichkeit für Suchmaschinen gegenüber allgemeinen div- und span-Containern.

Was ist der Unterschied zwischen b und strong?

strong kennzeichnet besondere Wichtigkeit, b nur eine optische Hervorhebung ohne zusätzliche Bedeutung, etwa für Schlüsselwörter. Beide werden standardmäßig fett dargestellt. Entsprechend steht em für sinnverändernde Betonung und i für anderssprachige Begriffe oder Gedanken.

Welche HTML-Tags sind veraltet?

Unter anderem font, center, big, strike, tt, marquee, frame, frameset, applet und acronym. Sie sind im Standard als obsolet geführt. Die Liste nennt für jedes veraltete Element den modernen Ersatz, meist CSS oder ein passendes HTML-Element.

Gibt es noch HTML5?

Der Name HTML5 wird umgangssprachlich weiter benutzt. Technisch gilt seit 2019 der HTML Living Standard der WHATWG, der laufend aktualisiert wird und keine Versionsnummern mehr trägt.

Welche HTML-Tags brauchen kein schließendes Tag?

Die leeren Elemente area, base, br, col, embed, hr, img, input, link, meta, source, track und wbr. Ein Schrägstrich am Ende wie bei <br /> ist erlaubt, aber nicht nötig.

Was ist der Unterschied zwischen div und section?

div ist ein Container ohne eigene Bedeutung, etwa für Layout. section kennzeichnet einen thematischen Abschnitt, der in der Regel eine eigene Überschrift hat. Wo nur gestaltet wird, ist div die richtige Wahl.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge