HTML5 Logo (weiß)

Artikelreihe: HTML 5 Tags browserübergreifend integrieren

In diesem Kapitel möchte ich zeigen, wie man die strukturellen HTML 5 Tags bereits heute Browser-übergreifend in seine Website integrieren kann. Auch ältere Browser wie der Internet Explorer 6 kann diese mit Hilfe eines kleinen JavaScripts unterstützen.

0 Kommentare

Raphael Steinmann

12.04.2013

Die Planung

Bevor wir uns in den HTML-Code stürzen, versuchen wir die Struktur doch zunächst grafisch mit einem kleinen Mock-up abzubilden. Anschließend klären wir, was noch benötigt wird, um die neuen HTML5 Tags zu verwenden.

In der folgenden Abbildung findet sich ein Beispielaufbau eines fiktiven Weblogs. Darin habe ich bewusst ein wenig übertrieben und versucht alle wichtigen HTML5 Tags unterzubringen:

 

Mock-up - Abbildung einer HTML 5 Blog Struktur

Mock-up – Abbildung einer HTML 5 Blog Struktur

 

Die Struktur entspricht einem typischen Blog-Layout. Der <header> enthält die Hauptnavigation. In der linken <section> werden die Blogartikel aufgelistet dargestellt. Jede <section> wiederrum enthält einen eigenen <header> der die jeweilige <section> mit einer Überschrift auszeichnet.

Die <article> enthalten jeweils einen eigenen <header> und einen <footer>. Im Header könnten die Artikelüberschrift, sowie die Einleitung stehen. Im <footer> wiederrum könnte man eine Autoren-Information, sowie weiterführende Links verpacken. Die einzelnen Textpassagen bleiben wie sie immer waren. Per <aside> definieren wir zum Beispiel die für den <article> genutzten Quellen. Grafiken werden als <figure> Element eingebunden und mit einer <figcaption> beschrieben.

Die zweite <section> stellt unsere Sidebar dar. Dort sind zum Beispiel zwei Widgets enthalten, die auf die Kategorien und die Tags des Blogs verweisen.

Was wird noch für die HTML 5 Tags benötigt?

Damit die Browser und Validierer unsere neuen HTML 5 Tags überhaupt erkennen und verstehen können, müssen wir ihnen beibringen, dass unser Dokument in HTML5 erstellt wurde. Dies geschieht über den Doctype. Diesen habe ich bereits ausführlich im Teil 2: Den neuen HTML5 Doctype beschrieben.

Außerdem müssen wir einen Weg finden, dass auch ältere Browser die neuen Tags verstehen können. Hier konnte ich eine Möglichkeit recherchieren, die mit einfachem Javascript diese Elemente für alle Browser rendern kann. Doch darauf werde ich weiter unten genauer eingehen.

Integration des HTML5 Codes

Nun, mehr gibt es eigentlich nicht zu beachten. Jetzt können wir uns an den Code selbst machen. Dieser ist so simpel, wie man es von HTML gewöhnt ist. Im folgenden Code-Schnipsel findet Ihr das fertig umgesetzte Mock-up als HTML-Variante. Ich habe die Artikel-Ansicht aus vorerst rausgelassen, damit es übersichtlich bleibt:

 

 

Die Artikel-Liste des Mock-usp würde ungefähr wie das folgende Beispiel aussehen. Auch hier habe ich einige Inhalte eingefügt und auch weitere HTML-5-Tags verwendet, die zunächst nicht geplant waren.

 

 

Das Fazit zum HTML5-Code

Wie man unschwer in den Code-Schnipseln sehen kann, ist HTML 5 fast identisch zum alten HTML-Code. Es erfordert einmal eine etwas neuartige Planung vor Erstellen einer Website, um die Tags gezielt und korrekt einzusetzen. Ansonsten verhalten sich die einzelnen Elemente quasi wie ein Div-Element.

Das dazu passende CSS

Jetzt fehlt nur noch das Wissen, wie man die neuen HTML5 Tags in CSS formatieren kann. Es ist eine denkbar einfache Sache. Die Tags verhalten sich auch auf Ebene des Document Object Models (DOM) wie die Div-Elemente.

 

 

Das bisherige Ergebnis

Nun sollte unser fiktionaler Blog wie in dem oberen Screenshot aussehen. Zumindest sollte dies auf allen gängigen Browsersystemen der Fall sein. Der untere Screenshot hingegen zeigt den Blog wie er auf dem Internet Explorer 6 und 7 gerendert wird.

 

 

Screenshot - HTML5 Tags im Einsatz (gängige Browser)

Screenshot – HTML5 Tags im Einsatz (gängige Browser)

 

 

Screenshot - HTML5 Tags im Einsatz (Internet Explorer8)

Screenshot – HTML5 Tags im Einsatz (Internet Explorer 8)

 

Mit Javascript zur Browserübergreifenden Lösung

Wie man im 2. Screenshot erkennen kann formatiert der Internet Explorer alle alten HTML-Tags einwandfrei. Da er die neuen jedoch nicht verstehen kann, kann auch keine Style-Formatierung auf das Element angewendet werden.

Dieses Problem kann man mit einigen Zeilen JavaScript schnell in den Griff bekommen. Diese müssen in den Head-Teil der Seite geschrieben werden, damit sie aktiviert werden, bevor der Browser anfängt das HTML selbst zu rendern. Mit Hilfe eines bedingten Kommentars, kann dafür sorgen, dass dieses Script lediglich von dem Internet Explorer ausgeführt werden kann.

 

 

Das oben stehende Script erstellt im Document Object Model des Browsers einfach die fehlenden Elemente und sorgt somit dafür, dass dieser sie auch verstehen kann.

Wichtig ist hierbei, dass auch die CSS-Datei entsprechend vorbereitet ist. Damit der Internet-Explorer die obigen Elemente auch korrekt formatiert ist es notwendig ihm mitzuteilen, dass er sie als Block-Elemente anzeigt. Dies kann mit der folgenden simplen Zeile geschafft werden:

 

 

Das war alles! Nun sind die neuen HTML5 Tags sogar für alte Browser einsatzbereit und können bereits heute zumindest für übersichtlicheren Code beitragen.

Bereits heute wird schon in der SEO-Szene spekuliert, dass diese Tags eines Tag einen weiteren Faktor zur Beurteilung der Qualität einer Website von dem Google-Algorithmus sein wird. Bisher ist jedoch von Google offiziell bestätigt worden, dass dies nicht der Fall ist. Es liegt also an einem selbst, ob man die neuen Tags bereits heute verwenden möchte. Zumindest Menschen die Screenreader benutzen werden Dankbar sein.

Die Script können unter: Code-Snippets HTML5 Tags browerkompatibel integrieren heruntergeladen und weiterverwendet werden.