DIV- und Klassen-Elemente wird es, gerade bei den CMS-Systemen, weiterhin geben. Die Zukunft gehört aber den neuen semantischen Gliederungstags von HTML5.
Die wichtigsten, neu eingeführten Elemente / Tags lassen sich im Prinzip in 4 Kategorien einteilen.
1. Die Multimedia Elemente von HTML5
Mit den Multimedia Elementen gehört das von den Suchmaschinen wenig geliebte Adobe Flash, in Webseiten, der Vergangenheit an. Audio und Video einbinden ist so einfach und W3C konform wie noch nie.
<canvas></canvas>
Mit dem Canvas-Element wird eine rechteckige Zeichenfläche definiert, die statische oder dynamische Grafiken enthalten kann.
<video></video>
Wie der Name schon sagt. Videos einbinden auf einfache Weise.
<audio></audio>
Das Tag um Audiofiles wiederzugeben.
2. Die Gruppierungselemente von HTML5
Mit den Gruppierungselementen wird die Webseite in Bereiche gegliedert. Verschachtelte DIV-Strukturen gehören bei konsequenter Anwendung der Vergangenheit an.
<header></header>
Der header-Tag umschließt den Kopfbereich. In den Kopfbereich gehören zum Beispiel das Logo und horizontale Navigation.
<nav></nav>
Die Hauptnavigation wird mit dem nav-Tag gekapselt
<figure></figure>
Das figure-Element vereinfacht die Auszeichnung von Inhalten wie Bildern und Grafiken mit Unterschriften.
<article></article>
Im article-Element werden ganze Artikeltexte gekapselt und hervorgehoben. Die Gliederung geschieht durch das section-Element.
<section></section>
Dieses Tag entspricht prinzipiell dem Absatz (<p></p>) und kann daher auch mehrfach als Gliederungselement auftreten.
<aside></aside>
Mit aside kann man auf einfache Weise eine Sidebar erstellen, die auch unabhängig vom Seiteninhalt sein kann.
<details></details>
Das details-Tag enthält in aller Regel weitere Informationen, die mit Klick ein- und ausgeblendet werden können.
<footer></footer>
Querverweise, Autor- und andere Informationen gehören in den Fußbereich der Webseite.
3. Die Formularelemente von HTML5
Das Erstellen von Formularen wird in HTML5 nicht nur einfacher sondern auch Grafisch ansprechender ohne großartig mit Cascading Stylesheets arbeiten zu müssen.
<input></input>
Schlicht und einfach das neue Eingabefeld das mit Telefonnummern, Zahlen, URL- und Email-Adressen, Datums und Zeitangaben umgehen kann.
<datalist></datalist>
Mit dem datalist-Element können Vervollständigungsvorschläge angezeigt werden.
<output></output>
Ergebnisse von Berechnungen werden mit dem output-Tag zurückgegeben.
<progress></progress> und <meter></meter>
Diese beiden Elemente zeigen den Fortschritt und den IST Zustand einer Aktion an. Prozent und Sekunden Angaben bilden dabei die Basis.
<source></source>
Mit source werden die Quellen für Medien angeben.
4. Die Textauszeichnungselemente von HTML5
Horvorhebungen werden Suchmaschinenfreundlich mit den Textauszeichnungselementen
<time></time>
Mit dem time-Element werden Zeitangaben in die Seite integriert. Diese sind lokalisiert Formatiert und können bequem ausgelesen werden.
<mark></mark>
Textabschnitte und einzelne Wörter werden mit mark hervorgehoben und für die Suche favorisiert.
Die Vorteile von HTML5
HTML5 beinhaltet semantische Elemente, die aus Google Sicht und damit auch aus SEO Sicht das identifizieren wichtigen Contents erleichtert. Auch die Barrierefreiheit wird mit entsprechenden Screenreadern verbessert. Die mobile Webentwicklung wird mit HTML5 plattformübergreifend einfacher. Die leidige Versions Entwicklung bei Apps für Windows, Android oder iOS gehört der Vergangenheit an, wenn auf HTML5 gesetzt wird. CSS3 kann in Verbindung mit HTML5 auf unterschiedliche Plattformbedingungen „intelligent“ reagieren. Alles in allem sind dies Merkmale einer ausgewachsenen Programmiersprache. Es wird spannend für den professionellen Webdesigner.
Die komplette HTML5 Referenz finden Sie hier.
