Neue Elemente in HTML5

Neue Elemente in HTML5

Nachfolgend sind die neuen Elemente von HTML5 aufgelistet, zusammen mit ihren Beschreibungen.

Neue semantische/strukturale Elemente

Die neuen Elemente von HTML5 können eine bessere Dokumentstruktur ermöglichen:

Tag Beschreibung
<article> Definiert einen Artikel im Dokument.
<aside> Definiert Inhalte außerhalb des Inhalts der Seite.
<bdi> Definiert den Textfluss für Text, der von anderen Texten unterschiedlich ist.
<details> Definiert zusätzliche Details, die der Benutzer einsehen oder verbergen kann.
<dialog> Definiert ein Dialogfeld oder ein Fenster.
<figcaption> Definiert die Überschrift des <figure>-Elements.
<figure> Definiert selbstinhaltige Inhalte, wie Abbildungen, Diagramme, Fotos, Code-Listen usw.
<footer> Definiert die Fußzeile eines Dokuments oder einer Sektion.
<header> Definiert die Kopfzeile eines Dokuments oder einer Sektion.
<main> Definiert das Hauptinhalt des Dokuments.
<mark> Definiert wichtiges oder hervorgehobenes Inhalt.
<menuitem> Definiert die Befehle/Menuelemente, die vom Benutzer aus einem Pop-up-Menü aufgerufen werden können.
<meter> Definiert eine skalare Messung innerhalb eines bekannten Bereichs (Skala).
<nav> Definiert einen Navigationslink im Dokument.
<progress> Definiert den Fortschritt einer Aufgabe.
<rp> Definiert, was in Browsern angezeigt wird, die Ruby-Kommentare nicht unterstützen.
<rt> Definiert die Erklärung/Aussprache von Zeichen (für ostasiatische Schriften).
<ruby> Definiert Ruby-Kommentare (für ostasiatische Schriften).
<section> Definiert einen Abschnitt in der Dokument.
<summary> Definiert die sichtbare Überschrift des <details>-Elements.
<time> Definiert Datum und Zeit.
<wbr> Definiert mögliche Zeilenumbrüche (line-break).

Mehr darüber lesen HTML5 SemantikInhalt.

Neue Formularelemente

Tag Beschreibung
<datalist> Definiert die vordefinierten Optionen für Eingabekontrollen.
<keygen> Definiert das Feld des Schlüsselgenerators (für Formulare).
<output> Definiert das Ergebnis des Berechnens.

Mehr darüber lesen HTML-FormularelementeNeue, alte und alte Elemente.

Neue Eingabetypen

Neue Eingabetypen Neue Eingabeattribute
  • Farbe
  • Datum
  • datetime
  • datetime-local
  • E-Mail
  • Monat
  • Zahl
  • Bereich
  • Suche
  • Telefonnummer
  • Zeit
  • URL
  • Woche
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • Höhe und Breite
  • Liste
  • min und max
  • mehrere
  • Muster (regexp)
  • placeholder
  • erforderlich
  • Schritt

Lernen HTML Eingabetypalle neuen und alten Eingabetypen

Lernen HTML-Input-Attributealle Eingabeattribute

HTML5 - Neue Attributsyntax

HTML5 ermöglicht vier verschiedene Attributsyntaxen.

Dieser Beispiel zeigt die verschiedenen Syntaxen, die im <input>-Tag verwendet werden:

Tag Beschreibung
Leer <input type="text" value="Bill Gates" deaktiviert>
Ohne Anführungszeichen <input type="text" value=Bill>
Doppelte Anführungszeichen <input type="text" value="Bill Gates">
Einfach angeführte <input type="text" value='Bill Gates'>

In HTML5 kann je nach Bedarf alle diese vier Syntaxen verwendet werden.

HTML5 Bild

Tag Beschreibung
<canvas> Definieren Sie die Zeichnung von Bildern mit JavaScript.
<svg> Definieren Sie die Zeichnung von Bildern mit SVG.

Mehr darüber lesen HTML5 Canvas Inhalt.

Mehr darüber lesen HTML5 SVG Inhalt.

Neue Medienelemente

Tag Beschreibung
<audio> Definieren Sie das Audio- oder Musikmaterial.
<embed> Definieren Sie den Container für externe Anwendungen (z.B. Plugins).
<source> Definieren Sie die Quellen von <video> und <audio>.
<track> Definieren Sie die Spuren von <video> und <audio>.
<video> Definieren Sie das Video- oder Filmmaterial.

Mehr darüber lesen HTML5 VideoInhalt.

Mehr darüber lesen HTML5 AudioInhalt.