HTML/HTML5

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Artikel stellen wir Ihnen die Neuerungen und Änderungen von HTML5 gegenüber HTML4.01 vor.[1]

Empfehlung: Erstellen Sie HTML5-Dokumente.
  • Da HTML5 abwärtskompatibel ist, verstehen es auch ältere Browser.
  • Der Einsatz von HTML5-Features bietet viele Vorteile, die wir Ihnen hier vorstellen möchten.

Inhaltsverzeichnis

[Bearbeiten] Angaben im Head

[Bearbeiten] Doctype

In HTML5 können Sie die Dokumenttyp-Deklaration rigoros vereinfachen:[2]

Beispiel: Angabe einer Dokumenttyp-Deklaration
<!DOCTYPE HTML>
Empfehlung: Erstellen Sie HTML5-Dokumente.
  • Jeder Browser „versteht“ diesen Doctype.
  • Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
  • Der doctype ist kürzer und übersichtlicher ;-)

[Bearbeiten] Zeichenkodierung

In HTML müssen Sie wie bisher die Zeichenkodierung festlegen.[3] Am einfachsten erreichen Sie dies durch die Angabe:

Beispiel: Zeichencodierung
<meta charset="utf-8">
Beachten Sie: Wenn Sie für HTML5-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.
Des Weiteren muss das Dokument auch mit dieser Zeichenkodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichenkodierung abgespeichert sein.

[Bearbeiten] Neue Elemente und Attribute

In HTML5 wurden eine Reihe neuer Elemente eingeführt.[4]

[Bearbeiten] Seitenstrukturierung

Die Seitenstrukturierung, die früher oft unter einer Vielzahl verschachtelter div-Elemente litt (Div-Suppe, oder Divitis) kann semantischer gestaltet werden:

section
thematische Gruppierung von Inhalten, benötigt eine h1-h6-Überschrift
article
einzelne in sich geschlossene Inhaltsbereiche
main
Hauptinhalt einer Webseite
aside
Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt stehen
header
einleitende Inhalte, Orientierungshilfen , Kopf einer Webseite oder z.B. eines article
footer
Fuß einer Seite oder z.B. eines article
nav
Navigation
figure
Elternelement für eine zum Seiteninhalt gehörende Abbildung, als Textunterschrift (caption) kann eine mögliche figcaption dienen

[Bearbeiten] Formulare

Für Formulare gibt es neue Elemente:

datalist
unterstützt Eingabe durch Vorschläge aus einer Liste
keygen
meter
visualisiert einen Wert einer Größe in Abhängigkeit einer Skala in bis zu drei (Ampel-)Farben, beispielsweise die Anzahl der Kommentare zu einer Frage.
output
dient zur Ausgabe des Ergebnisses einer Berechnung oder von eingegebenen Werten
progress
Fortschrittsanzeige

Das input-Element erlaubt eine Vielzahl neuer Werte:

  • tel
  • search
  • url
  • email
  • date
  • time
  • number
  • range: Schieberegler
  • color: Farbwähler

Gerade bei Formularen gibt es viele neue und nützliche Attribute.[5]

[Bearbeiten] Multimedia

In HTML4 wurden Multimedia-Dateien nur indirekt eingebunden und konnten nur mit Plug-ins wie z.B. dem Flash-Player abgespielt werden. Mit den audio- und video-Elementen können Sie Lieder und Filme nun direkt im Browser abspielen.

Mit dem canvas-Element können Sie in JavaScript erzeugte Animationen und Grafiken in Webseiten integrieren.

[Bearbeiten] Textauszeichnung

Zur Textauszeichnung wurden folgende Elemente neu eingeführt:

time
dient dazu, Daten, Zeitangaben oder -dauern durch Mikroformate auch für Computer und Suchmaschinen lesbar zu machen.
mark
dient dazu, Textstellen aufgrund einer Nutzeraktion oder vermuteter Absicht des Nutzers zu markieren
ruby, rp und rt
Aussprachehinweise, hauptsächlich für asiatische Schriften

[Bearbeiten] contenteditable-Attribut

Mit dem neuen Universalattribut contenteditable können Sie den Inhalt von HTML-Elementen zur Bearbeitung durch die Benutzer freigeben.

Beispiel ansehen …
<section contenteditable="true">
   <h2>Diese Überschrift kann verändert werden.</h2>
   <p>Dieser Absatz kann verändert werden.</p>
</section>

Benutzereingaben könnten dann beispielsweise im localStorage gespeichert werden.

[Bearbeiten] obsolete Elemente und Attribute

In HTML5 werden veraltete Elemente und Attribute nicht mehr als deprecated, sondern als obsolet bezeichnet.[6]

[Bearbeiten] Präsentationselemente

Dies betrifft hauptsächlich Elemente für Stilangaben, die heute mit CSS festgelegt werden.

[Bearbeiten] Frames

Der Einsatz von Frames ist ebenfalls obsolet.

[Bearbeiten] weitere obsolete Elemente

Folgende Elemente wurden aufgegeben, da sie nur selten verwendet wurden, oder ihr Gebrauch zu Missverständnissen führte.

[Bearbeiten] Präsentationsattribute

HTML5 besitzt keine der Präsentationsattribute wie in älteren HTML-Versionen, da diese besser in CSS festgelegt werden können:

  • align bei caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead und tr.
  • alink, link, text und vlink bei body.
  • background-Attribut bei body.
  • bgcolor-Attribut bei table, tr, td, th und body.
  • border-Attribut bei object.
  • cellpadding und cellspacing-Attributs bei table.
  • char und charoff-Attributs bei col, colgroup, tbody, td, tfoot, th, thead und tr.
  • clear-Attribut bei br.
  • compact-Attribut bei dl, ol und ul.
  • frame-Attribut bei table.
  • frameborder-Attribut bei iframe.
  • height-Attribut bei td und th.
  • hspace und vspace-Attributs bei img und object.
  • marginheight und marginwidth-Attributs bei iframe.
  • noshade-Attribut bei hr.
  • nowrap-Attribut bei td und th.
  • rules-Attribut bei table.
  • scrolling-Attribut bei iframe.
  • size-Attribut bei hr.
  • type-Attribut bei li, und ul.
  • valign-Attribut bei col, colgroup, tbody, td, tfoot, th, thead und tr.
  • width-Attribut bei hr, table, td, th, col, colgroup und pre.

Die folgenden Attribute sind zwar erlaubt; Benutzer sollten aber von ihrem Gebrauch Abstand nehmen und ihn so weit wie möglich vermeiden:

  • border-Attribut bei img. Der einzig erlaubte Wert ist "0"; verwenden Sie CSS-border.

[Bearbeiten] keine Typangaben für script und link

Die Typangabe bei link und script-Elementen kann weggelassen werden, falls Sie die Sprachen CSS bzw. JavaScript verwenden:

Beispiel: Angabe einer Dokumenttyp-Deklaration
<!-- bisher --> <link rel="stylesheet" href="stylesheet.css" type="text/css"> <script type="text/javascript" src="script.js"></script> <!-- HTML5 --> <link rel="stylesheet" href="stylesheet.css"> <script src="script.js"></script>

[Bearbeiten] Textanker für interne Verweise

Sprungmarken für seiteninterne Verweise werden nicht mehr mittels eines Links mit name-Attribut, sondern durch die Angabe einer id angebeben.

Beispiel: Zeichencodierung
<!-- veraltet --> <h1><a name="Allgemein">Allgemein</a></h1> <!-- HTML5 --> <h1 id="Allgemein">Allgemein</h1>

[Bearbeiten] Content Model (Kategorien)

HTML5 hat anstelle der Einteilung in inline und Block-Elemente neue Kategorien von Elementen.

[Bearbeiten] Quellen

  1. W3C: HTML5 Differences from HTML4 09.12.2014
  2. W3C: Doctype
  3. W3C: character-encoding
  4. W3C: new-elements
  5. W3C: new-attributes
  6. W3C: obsolete-elements

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML