Eine HTML5-Seite erstellen

Der Aufbau einer HTML5 konformen Site beginnt mit dem Eintrag eines passenden Doctypes. Das ist so wunderbar einfach (noch besser, selbst der Internet Explorer kann damit etwas anfangen — denn der Doctype ist »gültig«. Beim IE besteht immer die Gefahr, dass er sonst in den »Quirks Mode« schaltet und Unsinn darstellt):

<!DOCTYPE html>

Was gefällt—es muss nicht mehr kompliziert auf eine DTD verlinkt werden. Damit haben wir einen Verzicht auf überflüssige XML-Funktionalitäten! Noch was nettes: das DOCTYPE-Tag ist nicht case-sensitiv.

Nach Ergänzung der nötigsten Seitenelemente sieht das HTML5-Gerüst einer Website noch recht bekannt aus, also gibt es keinen Grund zur Beun­ruhigung:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <title>Title der Seite</title>
</head>

<body>
   Ganz viel Content hier …
</body>

</html>

Neue semantische Elemente

Ist es Ihnen oben aufgefallen? Das kurze Meta-Tag im ersten Beispiel zur Festlegung des Zeichensatzes UTF-8 ist valide (= gültig). Wenn schon HTML5, dann müssen auch Neuigkeiten auftauchen, oder? Sinnvoll sind neue Tags, die die Grundstruktur einer Website aufnehmen, und die leicht von der Hand gehen, weil sie sich logisch anhören. Ich baue davon 5 (header, nav, artivle, aside, footer) in den Code ein:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <title>Title der Seite</title>
</head>

<body>
   <header>Gut für einen Banner, Logo usw. also der Kopfbereich</header>
   <nav>Platz für Navigation</nav>
   <article>Platz für Content</article>
   <aside>Könnte eine Sidebar sein.</aside>
   <footer>Hier kann Footerkram hinein.</footer>
</body>

</html>

Die Verwendung der obigen Tags hat semantische Vorteile. Man versteht, um welche Inhalte es geht. Das sollten auch die Suchmaschinen, die zukünftig (= Web 3.0) auch diese Zuordnung erwarten (Stichwort: »das semantische Web«).

Erläuterung der neuen Tags

Die neuen Tags sind leicht verständlich. Früher™ war man gezwungen, Divs semantisch mit Ids zu kenn­zeichnen. Das Beispiel von oben folgt hier übersetzt in HTML 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Title der Seite</title>
</head>

<body>
   <div id="header">Gut für einen Banner, Logo usw. also der Kopfbereich</div>
   <div id="nav">Platz für Navigation</div>
   <div id="content">Platz für Content</div>
   <div id="sidebar">Könnte eine Sidebar sein.</div>
   <div id="footer">Hier kann Footerkram hinein.</div>
</body>

</html>

Heute™ kann man entsprechende HTML 5-Tags nutzen, die semantisch ausgelegt sind. Ganz aus­ge­reift finde ich noch nicht alle Tags. Wir haben oben einige benutzt, deren Definition ist etwas unklar geraten:

header
Für den Headbereich einer Seite oder nur eines Abschnitts.
nav
Ein Bereich, von dem Links zu anderen Seiten führen.
aside
Hier sollte ein Bereich zur Erläuterung dienen, sei es für die Seite (= Sidebar) oder für einen einfachen (kleinen) Artikelbereich.
article
Ein Teil der Seite für einen Blogpost oder Forumsbeitrag.
footer
Unterer Bereich einer Section, also einer Seite oder eines Abschnitts.

Nachteile der neuen Tags und Trick

Verbesserung und Weiterentwicklung haben wie immer Nachteile. Was ist, wenn die anderen nicht mit­kommen? Konkret sind damit die alten Browser gemeint und speziell die Internet Explorer, die ihre eigenen proprietären Wege gehen wollen. Generell die älteren IE-Browser können aber nicht die neuen Tags verarbeiten. Ein Hint ist es, dafür ein Javascript zu nutzen, was dem IE entsprechende Funktio­na­lität verleiht (bitte un­auf­fällig im Headbereich der Site platzieren):

<head>
<title>…</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Bei der ersten Anweisung handelt es sich um ein Conditional Comment. Conditional Comments werden ausschließlich vom Internet Explorer geparsed.

<!--[if lt IE 9]>

Die anderen Browser überlesen die in Kommentar­tags versteckten Anweisungen. Man kann gezielt die verschiedenen IE-Versionen ansprechen. Die folgende Deklaration berücksichtigt Versionen »later IE 9« (lt = Kleiner-als-Operator) und damit älteren Browserversionen, die noch nichts mit den neuen HTML5-Tags anfangen können.

Mit der conditional Anweisung im Head verlinkt man auf das HTML 5 Enabling Script der Google Library. Das Javascript ist damit immer an eine aktuelle Version gekoppelt. Platzieren Sie es am besten hinter dem Stylesheet wie alle Javascripte (erst kümmern um die Seitendarstellung, dann um Funktio­na­li­täten). Sollten Sie allerdings für einen Kunden Websites produzieren, die in deren Firma aus Sicherheitsgründen Javascript deaktiviert haben und den IE benutzen (IE und Sicherheit, klingt das nicht paradox? Tja, manchmal gibt es solche Konstellationen), dann kann das obige Script nicht helfen und HTML5 sollte nicht eingesetzt werden.


Nützliche Links

Das HTML 5 Blog
Building HTML 5 Side with Dreamweaver
Lernen von der Wurzel: W3C-School

Tags:

4 comments

  1. Das einige Tags etwas unklar sind stimmt allerdings. Hab hierzu letzten eine nette Grafik gesehen, die einem ev. etwas helfen kann wenn man nicht genau weiß, was man nun benutzen soll.

    http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

    Auch die weiterführenden Artikel zu den einzelnen Elementen sind empfehlenswert.

    Zur Semantik noch kurz: Ein Blick auf ARIA schadet auch nicht. Wird glücklicherweise immer häufiger eingesetzt.

    http://www.w3.org/WAI/intro/aria

    • BigBossDesigner

      Hi, bin jetzt dazu gekommen, Ihre Tipps zu checken. Sehr erhellend ist das »Sectioning Flowchart«. Allerdings bin ich mir nicht so klar über den Unterschied von »Article« und »Section« (wollte ich später angehen).
      Zum ARIA kann ich nun rein gar nichts sagen, ist mir neu. Vielleicht können Sie das »kurz« zusammenfassen?

      • So, hab ich doch noch die Zeit kurz gefunden. 🙂

        Der Unterschied zwischen Article und Section ist, dass Article für sich alleinstehenden Inhalt aufnehmen sollte, ein Blogpost oder dergleichen. Eine Section ist….naja eine Sektion bzw. ein Teilbereich einer Seite eben. :p Ein Artikel kann mehrere Sections beinhalten genauso wie eine Section Articles enthalten kann.

        Ich gebe zu die Erklärung ist hier gerade etwas holprig und ich denke im direkten Einsatz wird man sich manchmal immer noch fragen, was nun wie richtig ist.

        Zu ARIA (Accessible Rich Internet Applications):

        Es ist dazu da um auf heutigen Seiten die oft mit Ajax / Javascript Elementen versehen sind etc. mehr Barrierefreiheit zu erlangen. Sprich, es ist für behinderte Menschen eine große Hilfe. Es gibt durch ARIA neue semantische Attribute im HTML Code. Sie helfen einerseits um Anwendungen etc. als solche zu bezeichnen (Elemente / Widgets wie slider oder dergleichen für Screenreader) oder eben auch um den Code semantisch besser gliedern zu können (Role Attribute – sieht man in WordPress oder im Boilerplate z.B. – role=“main“).

        Es lohnt sich auf jedenfall sich das mal kurz anzusehen da es eine gute Sache ist wie ich finde. Es ist noch weitaus mehr damit möglich als nur die Role Attribute zu benutzen.

        Lesenswert und besser »kurz« zusammengefasst :p :

        http://www.vorsprungdurchwebstandards.de/theory/7-gruende-wai-aria-landmarks-sofort-einzusetzen/

        • BigBossDesigner

          Vielen Dank für den Link David—die deutsche Erklärung von Aria ist schon viel besser verständlich (section und article empfinde ich immer noch etwas unklar, da muss noch was kommen).


QR Code Business Card