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

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:

Temporär ausgeschaltet!

1	Temporär ausgeschaltet!

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.

<!-- Der Artikel-Kopf -->
<header class="post">
	<hgroup>
		<h2>Die Hauptüberschrift des Artikels</h2>
		<h3>Eine Weitere Überschrift des Artikels</h3>
	</hgroup>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
	<p>Posted by Raphael Steinmann on
		<time datetime="2011-12-06T17:02">12. Dez.</time>
	</p>
</header>

<!-- Der Artikel selbst -->
<article class="post">
	<!-- Beginn des eigentlichen Artikel-Inhaltes -->

	<aside>
		<p>
			&quot;Ein Zitat, dass zu diesem Artikel gehören könnte!&quot;
		</p>
	</aside>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

	<figure>
		<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" width="165" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics">
		<figcaption>Das Original HTML-5-Logo der <a href="http://www.w3.org/html/logo/">W3C</a></figcaption>
	</figure>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>

	<!-- Der Footer-Bereich des Artikels -->
	<footer>
		<p>Der Artikel hat <i>100</i> Kommentare ... u.s.w.</p>
	</footer>
</article>

<h2>Die Hauptüberschrift des Artikels</h2>

<h3>Eine Weitere Überschrift des Artikels</h3>

</hgroup>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>

<p>Posted by Raphael Steinmann on

</p>

</header>

<aside>

<p>

"Ein Zitat, dass zu diesem Artikel gehören könnte!"

</p>

</aside>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<figcaption>Das Original HTML-5-Logo der <a href="http://www.w3.org/html/logo/">W3C</a></figcaption>

</figure>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>

<p>Der Artikel hat <i>100</i> Kommentare ... u.s.w.</p>

</footer>

</article>

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.

/* Einheitlichkeit: Definiert die neuen Tags für alle Browser als Blog-Elemente => wird vor allem für den IE < 9 benötigt! */
header, nav, article, footer, address, section, figure, figcaption {
	display: block;
}

/* Generelle Formatierung */
body{
	width: 1000px;
	margin: 20px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
p { margin: 0 0 20px; }
p, li { line-height: 18px; }

/* Der Header und Footer Bereich */
header#page_header, footer#page_footer {
	width: 90%;
	padding: 1% 5%;
	background-color: #CAEAFF;
	color: #005F9D;
}
header#page_header nav ul {
	padding: 10px 0;
	list-style: none;
	background-color: #A6DBFF;
}
#page_header nav ul li, #page_header nav ul li a,  #page_header nav ul li a:visited {
	display: inline-block;
	*display: inline;
	zoom: 1;
	padding-left: 20px;
	font-weight: bold;
	color: #00538C;
	text-decoration: none;
}

/* Der Section Bereich für die Artikel */
section.posts {
	width: 75%;
	margin: 10px 0;
	overflow: auto;
}
section#home_posts {
	background: #FFDFDF;
	color: #AD0000;
}
#home_posts header, #home_posts article {
	margin: 10px;
	padding: 10px;
	background: #FFCECE;
	overflow: auto;
}
.posts p {
	margin: 5px;
	padding: 5px;
	background-color: #FFB9B9;
}
.posts aside, .posts figure {
	width: 35%;
	margin: 5px;
	padding: 5px;
	float: right;
	background-color: #FF8A8A;
	overflow: auto;
}

/* Der Section Bereich für die Sidebar */
section#page_sidebar {
	float: right;
	margin: 10px 0;
	width: 24%;
	overflow: auto;
	background-color: #C7E2AD;
}
#page_sidebar header, #page_sidebar nav {
	margin: 10px;
	padding: 10px;
	overflow: auto;
	background-color: #9DCD72;
	color: #406121;
}
#page_sidebar h6 { font-size: 15px; margin: 0;}
#page_sidebar nav ul {
	list-style: none;
}
#page_sidebar nav ul li, #page_sidebar nav ul li a, #page_sidebar nav ul li a:visited {
	padding-left: 0;
	font-weight: bold;
	color: #406121;
	text-decoration: none;
}

/* Einheitlichkeit: Definiert die neuen Tags für alle Browser als Blog-Elemente => wird vor allem für den IE < 9 benötigt! */

header, nav, article, footer, address, section, figure, figcaption {

display: block;

}

/* Generelle Formatierung */

body{

width: 1000px;

margin: 20px auto;

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

}

p { margin: 0 0 20px; }

p, li { line-height: 18px; }

/* Der Header und Footer Bereich */

header#page_header, footer#page_footer {

width: 90%;

padding: 1% 5%;

background-color: #CAEAFF;

color: #005F9D;

}

header#page_header nav ul {

padding: 10px 0;

list-style: none;

background-color: #A6DBFF;

}

#page_header nav ul li, #page_header nav ul li a, #page_header nav ul li a:visited {

display: inline-block;

*display: inline;

zoom: 1;

padding-left: 20px;

font-weight: bold;

color: #00538C;

text-decoration: none;

}

/* Der Section Bereich für die Artikel */

section.posts {

width: 75%;

margin: 10px 0;

overflow: auto;

}

section#home_posts {

background: #FFDFDF;

color: #AD0000;

}

#home_posts header, #home_posts article {

margin: 10px;

padding: 10px;

background: #FFCECE;

overflow: auto;

}

.posts p {

margin: 5px;

padding: 5px;

background-color: #FFB9B9;

}

.posts aside, .posts figure {

width: 35%;

margin: 5px;

padding: 5px;

float: right;

background-color: #FF8A8A;

overflow: auto;

}

/* Der Section Bereich für die Sidebar */

section#page_sidebar {

float: right;

margin: 10px 0;

width: 24%;

overflow: auto;

background-color: #C7E2AD;

}

#page_sidebar header, #page_sidebar nav {

margin: 10px;

padding: 10px;

overflow: auto;

background-color: #9DCD72;

color: #406121;

}

#page_sidebar h6 { font-size: 15px; margin: 0;}

#page_sidebar nav ul {

list-style: none;

}

#page_sidebar nav ul li, #page_sidebar nav ul li a, #page_sidebar nav ul li a:visited {

padding-left: 0;

font-weight: bold;

color: #406121;

text-decoration: none;

}

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 (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 JavaScript zum Erzeugen der HTML5 Tags für den Internet Explorer -->
<!--[if lt IE 9]>
<script type="text/javascript">
		document.createElement("nav");
		document.createElement("header");
		document.createElement("footer");
		document.createElement("section");
		document.createElement("aside");
		document.createElement("article");
		document.createElement("hgroup");
		document.createElement("figure");
		document.createElement("figcaption");
		document.createElement("time");
	</script>
<![endif]-->

<!--[if lt IE 9]>

document.createElement("nav");

document.createElement("header");

document.createElement("footer");

document.createElement("section");

document.createElement("aside");

document.createElement("article");

document.createElement("hgroup");

document.createElement("figure");

document.createElement("figcaption");

document.createElement("time");

</script>

<![endif]-->

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:

/* Einheitlichkeit: Definiert die neuen Tags für alle Browser als Blog-Elemente => wird vor allem für den IE < 9 benötigt! */
header, nav, article, footer, address, section, figure, figcaption {
	display: block;
}

/* Einheitlichkeit: Definiert die neuen Tags für alle Browser als Blog-Elemente => wird vor allem für den IE < 9 benötigt! */

header, nav, article, footer, address, section, figure, figcaption {

display: block;

}

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.