HTML5 kennt neue Tags wie header, section, article oder nav. Mit diesen ist es möglich, Website-Abschnitte für Crawler von Suchmaschinen wie Google und Co erkennbar auszuzeichnen. Bisher konnten wir diese Bereiche lediglich optisch für den User kenntlich machen. Jetzt definieren wir mit den HTML5 Tags, welcher Bereich unserer Website die entsprechende Aufgabe hat. Und so verstehen ebenfalls die Suchmaschinen diese Segmente und deren Aufgaben. Außerdem sind die HTML5 Tags ein deutlicher Fortschritt in der Barrierefreiheit. Blinde erkennen nun, wo sich eine Navigation und der eigentliche Inhalt befinden – auch ohne die Website komplett zu verstehen. Wir nutzen dazu die folgenden Tags:
<header>
Das <header>-Tag dient dazu, den Kopf sowie die Überschrift einer Seite zu definieren. Es fungiert praktisch als erster Einblick in das Thema. Das <header>-Tag umschließt den gesamten Kopfbereich (Logo, Titel, Überschrift, Navigation) einer Webseite.
<article>
In das <article>-Tag von HTML5 kommt der eigentliche, themenrelevante Inhalt einer Seite. Die Suchmaschine erkennt somit, dass hier der „wichtige“ Bereich dargestellt wird, um den sich die Webseite dreht. Blinden ermöglicht die HTML-Auszeichnung den direkten Sprung mit dem Ausgabegerät in diesen Bereich. Sie lesen so den entsprechenden Artikel – ohne den Anfang zu suchen.
<section>
Mit <section>-Tags teilen wir unseren Inhalt (article) in unterschiedliche Sektionen auf. Jede <section> erhält eine passende Überschrift zu ihrem eigenen Teilthema. Somit können Blinde sofort in den nächsten Abschnitt eines Artikels springen und erhalten direkt die gewünschten Informationen und Inhalte.
<aside>
Manche Inhalte passen thematisch zur aufgerufenen Webseite, werden jedoch als nicht ganz so wichtig angesehen. Sie stellen einen Nebenvermerk oder eine Randbemerkung zum Inhalt dar. Dafür gibt es das <aside> HTML5 Tag. Als Beispiel könnte man hier Benutzer-Kommentare oder Werbung ansehen.
<nav>
Mit einem HTML5 <nav>-Element teilen wir mit, dass sich in diesem Bereich Navigationselemente befinden. Somit erkennt die Suchmaschine, wo und wie viele Navigationen die Website enthält. Sie kann so bei Bedarf die relevanten Inhalte direkt verwerten. Blinde Menschen können sich auf einfache Weise mit weiteren, für sie interessanten, Themen beschäftigen.
<footer>
Mit dem <footer>-Tag zeichnen wir den Fußbereich in einem HTML5 Dokument aus. Wir definieren ganz klar: Hier finden User und Suchmaschine Hinweise zum Copyright sowie wichtige Links zum Impressum, Datenschutz oder Kontakt.
ältere Browser
Ältere Browser haben ein Problem mit den neuen HTML5 Tags: Sie können diese nicht korrekt interpretieren und wissen nichts damit anzufangen. Sie kennen diese Elemente schlichtweg nicht. Abhilfe dafür schafft ein JavaScript Framework, das HTML5 Support für ältere Versionen des Microsoft Internet Explorer bietet.
Zusätzlich sollte für Internet Explorer 6 und 7 beachtet werden, dass gegebenenfalls entsprechende HTML5 Elemente als „inline-Element“ dargestellt werden. Diese sollten in der Regel via CSS Befehl einmalig als Block-Element deklariert werden:
header, article, section, aside, nav, footer {
display:block;
}