HTML5 vereinfacht den Aufbau und die Übersichtlichkeit im HTML-Code. Einher geht natürlich auch eine „automatische“ Barrierefreiheit und ein reduzierter Quellcode.
Alle Browser – bis auf den Internet Explorer kleiner 9 – können die neuen Elemente bereits verwenden. Hier finden sich Infos zu den neuen, semantischen HTML-Elementen und einen kleinen Workaround, damit man diese im IE verwenden kann:
Inhaltsverzeichnis
Die neuen Elemente
section | Dies definiert einen abgeschlossenen Bereich einer HTML-Seite. Dies kann z. B. ein Kapitel, ein News-Block, eine Kontaktinformation, o. ä. sein |
nav | Dies definiert das Hauptmenü innerhalb einer Site. Der Tag ist nicht für Untermenüs oder kleine Linklisten zu verwenden. |
article | Dieser Tag zeigt an, dass es sich um einen Inhaltsblock auf der Seite handelt. Er beinhaltet z. B. eine Überschrift in einem h1-Tag und einen Text im p-Tag. |
aside | Markiert einen Bereich, der mit dem Hauptinhalt der Seite nur lose verknüpft ist. So z. B. die Werbungsspalte am rechten Rand, eine Linkliste links, … |
hgroup | Diese Sektion markiert eine größere Überschrift, die sich aus mehreren h*-Elementen, Unterüberschriften und Taglines zusammen setzt. |
header | Gibt den Kopfbereich einer Seite (also z. B. das Logo an) |
footer | Definiert die Fußzeile einer Webseite |
time | Definiert ein Datum oder eine Uhrzeit in einem Format, das Suchmaschinen-Robots maschinell lesen können |
mark | Hebt einen Textbereich hervor |
Verwenden der neuen Elemente
Grundsätzlich kann man alle diese Elemente bereits verwenden – sofern Browser nämlich ein Element nicht kennen, fügen Sie es einfach in dem DOM (also den HTML-Objektbaum) ein und man kann „ganz normal“ mit CSS darauf zugreifen.
Leider nicht ganz:
IE (kleiner als 9) kann keine unbekannten Elemente via CSS layouten und fügt sie auch nicht korrekt in den DOM ein (z. B. funktionieren keine „Child“-Elemente).
Erklärung zum Workaround
Wenn man die Objekte mit JavaScript einmal am Beginn der Seite anlegt, kann man sie anschließend „ganz normal“ anstelle von z. B. DIVs verwenden.
Dies sieht dann z. B. so aus und funktioniert bis hinunter zu IE6:
<html>
<head>
<style>
article { display: block; border: 1px solid green}
</style>
<script>document.createElement("article");</script>
</head>
<body>
<article>
<h1>Welcome!</h1>
<p>This is your <span>first Homepage</span>.</p>
</article>
</body>
</html>
Der ultimative Workaround (Update 15.12.2011)
Um dies nicht immer selbst machen zu müssen, hat sich gottseidank bereits jemand Gedanken dazu gemacht und das Skript „HTML5 enabling script“ verfasst. Dies muss man einfach im Header einbinden.
Entweder man lädt die Datei auf den eigenen Webserver herunter oder man verlinkt gleicht direkt zum Google-Server, auf dem das Skript liegt:
<!--if lt IE 9>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!endif-->
That’s it – ab dann können HTML5-Elemente verwendet werden!
Quellen
- Dive into HTML 5: http://diveintohtml5.org/semantics.html
- HTML5 enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/