HTML5-Elemente bereits jetzt nutzen

Webdesign & Entwicklung 15. 12. 2011

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:

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

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...
Beitrag drucken

Autor

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.