HTML5-Elemente Referenz - HTML lernen

HTML5 ist eine Sammlung von Technologien zum Erstellen vielfältigerer und leistungsfähigerer Webseiten und Anwendungen, die Multimedia unterstützen, mit Software-Schnittstellen interagieren, Dokumente strukturieren und vieles mehr.

Diese Seite ist eine Kurzreferenz zu den Elementen, die HTML5 hinzugefügt (oder formal standardisiert) hat. Jeder Eintrag verlinkt auf ein eigenes Kapitel mit Attributen, Browser-Unterstützung und ausführbaren Beispielen.

Warum HTML5 semantische Elemente eingeführt hat

Vor HTML5 wurde die Seitenstruktur fast ausschließlich aus generischen <div>- und <span>-Containern aufgebaut, die nur durch class- oder id-Namen unterschieden wurden, die dem Autor etwas bedeuteten, der Maschine jedoch nichts. HTML5 führte semantische Elemente ein — Tags, deren Namen die Bedeutung des enthaltenen Inhalts beschreiben (<header>, <nav>, <article>, <footer>, …) und nicht nur sein Aussehen. Dies hat drei konkrete Vorteile:

Barrierefreiheit. Screenreader und andere Hilfstechnologien stellen Orientierungspunkte wie „main", „navigation" und „complementary" bereit, damit Nutzer direkt zu dem Teil springen können, den sie suchen. Ein <nav> wird als Navigation angekündigt; ein <div class="nav"> hingegen nicht.
SEO und maschinelle Lesbarkeit. Suchmaschinen und andere Crawler nutzen die Struktur, um zu verstehen, worum es auf einer Seite geht und welcher Teil der Hauptinhalt ist, anstatt dies aus Klassennamen zu erschließen.
Wartbarkeit. Semantisches Markup liest sich wie eine Gliederung der Seite, sodass der nächste Entwickler (oder das zukünftige Ich) das Layout versteht, ohne CSS-Hooks entschlüsseln zu müssen.

Eine ausführlichere Anleitung zur semantischen Strukturierung einer Seite finden Sie unter Semantische Elemente in HTML5.

Hinweis: Einige der unten aufgeführten Elemente — wie <embed> und <wbr> — existierten in Browsern lange vor HTML5 und wurden darin lediglich standardisiert (formal spezifiziert), anstatt wirklich neu zu sein.

Neue strukturelle/semantische Elemente

Elemente	Beschreibung
`<article>`	Definiert einen eigenständigen, in sich geschlossenen Inhalt.
`<aside>`	Definiert einen Abschnitt mit zusätzlichen Informationen zum umgebenden Inhalt.
`<details>`	Enthält zusätzliche Details, die der Nutzer öffnen und anzeigen kann.
`<dialog>`	Gibt ein Dialogfeld oder -fenster an.
`<figcaption>`	Fügt dem Inhalt des `<figure>`-Tags eine Beschriftung oder Erklärung hinzu.
`<figure>`	Gibt einen in sich geschlossenen Inhalt an.
`<footer>`	Definiert die Fußzeile einer Webseite oder eines Abschnitts.
`<header>`	Definiert die Kopfzeile einer Seite oder eines Abschnitts.
`<main>`	Gibt den Hauptinhalt eines Dokuments an.
`<nav>`	Definiert einen Block mit Navigationslinks, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten.
`<section>`	Erstellt eigenständige Abschnitte innerhalb einer Webseite mit logisch zusammenhängendem Inhalt.
`<summary>`	Definiert die sichtbare Überschrift für das `<details>`-Element.

Typografische und Internationalisierungs-Elemente (i18n)

Diese Elemente beschreiben Bedeutung auf Textebene, Annotationen sowie den Umgang mit bidirektionalen oder ostasiatischen Schriften.

Elemente	Beschreibung
`<bdi>`	Isoliert bidirektionalen Text (wenn eine Sprache mit Rechts-nach-links-Ausrichtung, wie Arabisch oder Hebräisch, in einer Links-nach-rechts-Umgebung verwendet wird).
`<data>`	Verknüpft den sichtbaren Inhalt mit einem maschinenlesbaren `value` (in HTML 5.1 hinzugefügt).
`<mark>`	Hebt einen relevanten Teil des Textes hervor.
`<rp>`	Definiert alternativen Text, der in Browsern angezeigt wird, die das `<ruby>`-Tag nicht unterstützen.
`<rt>`	Fügt den Aussprache-/Annotationstext hinzu, der oberhalb (oder neben) dem Basistext innerhalb eines `<ruby>`-Elements angezeigt wird.
`<ruby>`	Definiert eine Ruby-Annotation (Furigana) — phonetische Hilfen für Japanisch und andere ostasiatische Sprachen.
`<time>`	Definiert eine menschenlesbare Uhrzeit auf einer 24-Stunden-Uhr oder ein genaues Datum im Gregorianischen Kalender.
`<wbr>`	Markiert eine Position, an der der Browser bei Bedarf einen Zeilenumbruch einfügen darf (eine „Worttrennmöglichkeit").

Neue Formular-Elemente

Elemente	Beschreibung
`<datalist>`	Erstellt eine Liste von Eingabeoptionen, die durch das `<input>`-Tag vordefiniert sind.
`<output>`	Definiert einen Platz zur Darstellung des Ergebnisses einer Berechnung, die durch ein Skript oder die Interaktion des Nutzers mit einem Formularelement (`<form>`-Tag) durchgeführt wurde.

Neue Medien- und Grafik-Elemente

Elemente	Beschreibung
`<audio>`	Bettet Audioinhalte in ein HTML-Dokument ein.
`<canvas>`	Definiert einen Bereich auf der Webseite, in dem wir per Skript Objekte, Bilder, Animationen und Fotokompositionen zeichnen können.
`<embed>`	Dient als Container für externe Anwendungen und interaktive Inhalte (in HTML5 standardisiert).
`<picture>`	Stellt mehrere Bildquellen bereit, damit der Browser die beste für den viewport oder das Format auswählen kann.
`<source>`	Definiert mehrere Medienressourcen in verschiedenen Formaten für `<audio>`, `<video>` oder `<picture>`.
`<svg>`	Zeichnet skalierbare Vektorgrafiken (siehe SVG in HTML5).
`<track>`	Gibt Texttracks (Untertitel, Bildunterschriften) für Medienelemente an.
`<video>`	Bettet Video in ein HTML-Dokument ein.

Weitere neue Elemente

Elemente	Beschreibung
`<meter>`	Definiert eine skalare Messung innerhalb eines bekannten Bereichs (zum Beispiel Festplattennutzung).
`<progress>`	Zeigt den Fortschritt einer Aufgabe an (ein Fortschrittsbalken).
`<template>`	Enthält inaktives HTML, das beim Laden nicht gerendert wird, aber per Skript geklont und eingefügt werden kann.

Entfernt / Veraltet in HTML5

Diese Elemente waren einst Teil der Spezifikation, wurden aber inzwischen entfernt. Browser unterstützen sie nicht mehr zuverlässig, und sie sollten im neuen Code nicht verwendet werden.

Elemente	Beschreibung
`<keygen>`	Erzeugte bei der Formularübertragung ein öffentlich/privates Schlüsselpaar. Aus dem Standard entfernt — verwenden Sie stattdessen die Web Crypto API.
`<menuitem>`	Definierte einen Befehl in einem Kontextmenü. Aus dem Standard entfernt; nie weit verbreitet unterstützt.

Ein einfaches semantisches Beispiel

Das folgende Fragment zeigt, wie die strukturellen Elemente zusammenarbeiten, um ein typisches Seitenlayout zu beschreiben — beachten Sie, dass es selbst ohne CSS wie eine Gliederung lesbar ist:

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why semantic HTML matters</h2>
      <p>Semantic tags describe meaning, not just appearance.</p>
      <figure>
        <img src="diagram.png" alt="Page structure diagram" />
        <figcaption>A semantic page outline.</figcaption>
      </figure>
    </article>

    <aside>
      <h2>Related</h2>
      <p>Links to other posts.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>

Übungen

Übung

Welche der folgenden sind gültige HTML5-Elemente?