Neue HTML5-Elemente
Neue Elemente in HTML5
Unten findest du eine Liste neuer HTML5‑Elemente und eine Beschreibung ihrer Verwendung.
Neue semantische/strukturelle Elemente
HTML5 führt neue Elemente für eine bessere Dokumentstruktur ein:
| Tag | Beschreibung |
|---|---|
| <article> | Definiert einen Artikel in einem Dokument |
| <aside> | Definiert Inhalte, die vom Hauptinhalt der Seite getrennt sind |
| <bdi> | Isoliert einen Textteil, der in eine andere Schreibrichtung formatiert sein kann als der umgebende Text |
| <details> | Definiert zusätzliche Details, die der Benutzer ein‑ oder ausblenden kann |
| <dialog> | Definiert ein Dialogfeld oder Fenster |
| <figcaption> | Definiert eine Beschriftung für ein <figure>-Element |
| <figure> | Definiert eigenständige Inhalte |
| <footer> | Definiert eine Fußzeile für ein Dokument oder einen Abschnitt |
| <header> | Definiert eine Kopfzeile für ein Dokument oder einen Abschnitt |
| <main> | Definiert den Hauptinhalt eines Dokuments |
| <mark> | Definiert markierten / hervorgehobenen Text |
| <meter> | Definiert eine skalare Messung innerhalb eines bekannten Bereichs (eine Anzeige) |
| <nav> | Definiert Navigationslinks |
| <progress> | Repräsentiert den Fortschritt einer Aufgabe |
| <rp> | Definiert, was in Browsern angezeigt wird, die Ruby‑Annotationen nicht unterstützen |
| <rt> | Definiert eine Erklärung/Aussprache von Zeichen (für ostasiatische Typografie) |
| <ruby> | Definiert eine Ruby‑Annotation (für ostasiatische Typografie) |
| <section> | Definiert einen Abschnitt in einem Dokument |
| <summary> | Definiert eine sichtbare Überschrift für ein <details>-Element |
| <time> | Definiert ein Datum/eine Uhrzeit |
| <wbr> | Definiert einen möglichen Zeilenumbruch |
Erfahre mehr über HTML5‑Semantik.
Neue Formularelemente
| Tag | Beschreibung |
|---|---|
| <datalist> | Definiert eine Liste vordefinierter Optionen für Eingabefelder |
| <output> | Definiert das Ergebnis einer Berechnung |
Erfahre mehr über alte und neue Formularelemente in HTML‑Formularelemente.
Neue Eingabetypen
| Neue Eingabetypen | Neue Eingabeattribute |
|---|---|
|
|
Erfahre alles über alte und neue Eingabetypen in HTML Input Types.
Erfahre alles über Eingabeattribute in HTML Input Attributes.
HTML5 – Syntax neuer Attribute
HTML5 erlaubt vier verschiedene Attribut‑Syntaxen.
Dieses Beispiel zeigt die unterschiedlichen Syntaxen, die im <input>-Tag verwendet werden:
| Typ | Beispiel |
|---|---|
| Leer | <input type="text" value="John" disabled> |
| Ohne Anführungszeichen | <input type="text" value=John> |
| Doppelte Anführungszeichen | <input type="text" value="John Doe"> |
| Einfache Anführungszeichen | <input type="text" value='John Doe'> |
In HTML5 können alle vier Syntaxen verwendet werden, abhängig davon, was das Attribut erfordert.
HTML5‑Grafiken
| Tag | Beschreibung |
|---|---|
| <canvas> | Zeichnet Grafiken dynamisch mithilfe von Skripten (normalerweise JavaScript) |
| <svg> | Zeichnet skalierbare Vektorgrafiken |
Erfahre mehr über HTML5 Canvas.
Erfahre mehr über HTML5 SVG.
Neue Media‑Elemente
| Tag | Beschreibung |
|---|---|
| <audio> | Definiert Audio‑Inhalte |
| <embed> | Definiert einen Container für externe (nicht‑HTML) Anwendungen |
| <source> | Definiert mehrere Medienquellen für Media‑Elemente (<video> und <audio>) |
| <track> | Definiert Textspuren für Media‑Elemente (<video> und <audio>) |
| <video> | Definiert ein Video oder einen Film |
Erfahre mehr über HTML5 Video.
Erfahre mehr über HTML5 Audio.
