HTML 5 kommt mit einer Vielzahl neuer Elemente daher. Einige dienen der logischen Strukturierung des HTML-Dokuments und sorgen gleichzeitig für einen übersichtlicheren Code. Auch wenn HTML5 noch immer in Entwicklung ist und es bisher nur wenige Browser, wie Safari 4 und der kürzlich veröffentlichte Firefox 3.5, unterstützen, kann man dennoch ohne große Bedenken auf die neuen Elemente zurückgreifen. Mit ein paar kleinen Kniffen besteht selbst Urgroßvater IE 6 den Vokabeltest.

Die sechs grundlegenden Elemente auf einen Blick

Anstatt für nahezu jeden Zweck – egal ob Header, Navi, Artikel oder Footer – auf den obligatorischen div-Container zurückzugreifen, bietet HTML 5 folgende neue Elemente:

• <header> </header>
  Definiert den Kopf-Bereich der Webseite und beinhaltet typischerweise den Namen oder ein Logo.
• <nav> </nav>
  In diesem Element bringt man die Navigation der Webseite unter.
• <article> </article>
  Dies umfasst eine logische Einheit des Seiteninhalts, wie zum Beispiel je ein kompletter Artikel eines Blogs.
• <section> </section>
  Mit diesem Element kann man die Webseite oder auch einzelne Bereiche beispielsweise innerhalb eines Artikels in zusammenhängende Abschnitte unterteilen.
• <aside> </aside>
  Dieses Element kann als eine Art Randnotiz verwendet werden. In einem Blog könnte es für eine Liste ähnlicher Beiträge oder auch für die Sidebar Verwendung finden.
• <footer> </footer>
  Definiert den Fuß-Bereich der Webseite, in dem man üblicherweise das Copyright, eine Sitemap oder etwaige andere Infos zur Webseite unterbringt.

Weitere Elemente, wie beispielsweise für die Einbettung von Musik, Streams und Videos ohne Plugins in die Webseite gibt es in der HTML5 Referenz der W3Schools.

Die Elemente jedem Browser beibringen

Bisher können nur die modernen Gecko- und Webkit-Browser Firefox 3.5 und Safari 4 etwas mit den neuen Elementen anfangen. Da sie im Prinzip nur ein “div-Element mit Sinn” sind, werden sie auch als Block-Element erkannt. Ältere Browser, welche die neuen Elemente jedoch nicht kennen, behandeln sie wie Inline-Elemente.

Ein kleiner Trick hilft hier aus: Via CSS definiert man die Elemente einfach zusätzlich als Block-Element. In Firefox und Safari ist es dann zwar doppelt gemoppelt, aber das ist nicht weiter tragisch. An einem Beispiel sähe das dann so aus:

header {
    display: block;
}

Für den Internet Explorer ist leider ein wenig mehr Aufwand nötig, da dieser zunächst nicht zulässt, dass diesen Elementen via CSS Eigenschaften zugewiesen werden können. Abhilte schaft hier ein wenig Java Script. Für jedes verwendete Element ist eine Zeile Code wie die folgende nötig:

document.createElement('header');

Sinnvoll, unkompliziert und zukunftssicher

Beachtet man diese Kleinigkeiten, kann man schon heute problemlos Webseiten mit den neuen HTML 5 Elementen versehen, die in allen derzeitigen Browsern funktionieren. Und da das W3C kürzlicher vermeldete, dass gegen Ende das Jahres die Arbeitsgruppe für XHTML 2 eingestellt wird und man alle Ressourcen auf die HTML 5 Entwicklung richtet, ist man mit dem Einsatz der neuen Elemente auch auf der zukunftssicheren Seite.