Die neuen HTML 5 Tags bringen mehr Übersicht

Bisher wurden vor allem Div- und Listen-Elemente verwendet, um einzelne Bereiche einer Website auszuzeichnen. Dabei entstanden häufig Konstrukte zahlreicher in sich geschachtelter Div-Container, die Aufgaben wie die Auszeichnung, Positionierung und Formatierung übernahmen. Dies ist wenig einheitlich und für Webdesigner wie auch Suchmaschinen-Crawler fast unmöglich eindeutig zu identifizieren.

Deshalb wurden bereits vor vielen Jahren neue Möglichkeiten vorgeschlagen, wie man die Inhalte und Bereiche einer Website besser beschreiben könnte. Mit HTML 5  finden diese Vorschläge nun auch endgültig Ihren Platz in der Spezifikation.

Die neuen strukturellen Tags

In diesem Artikel werde ich mich nur auf die neuen HTML 5 Tags konzentrieren, die lediglich Aufgaben zur Strukturierung eines Dokuments übernehmen.

Dabei habe ich folgende Liste Erstellt, die die jeweiligen Eigenschaften und Anwendungsgebiete beschreibt. Auch die Browserkompatibilität ist angegeben, sofern ich Informationen dazu finden konnte.

<header> … </header>

Browserkompatibilität:
5.0	4.0	3.6	10	8.0

Der <header> Tag definiert den Kopfbereich eines Webseiten-Dokuments oder eines Text-Abschnitts.

Mit diesem Tag kann man den Kopf einer Seite beschreiben. Er sollte entsprechend also Logo, Seiten-Überschriften, Navigations-Elemente und eventuell noch Versionsinformationen enthalten.

Den Tag darf man nicht innerhalb von <footer>, <adress> oder anderen <header> Elementen einsetzen.

<nav> … </nav>

Browserkompatibilität:
5.0	4.0	3.6	10	8.0

Der <nav> Tag kennzeichnet einen Navigationsbereich einer Website oder eines Abschnitts.

Die darin enthaltenen Elemente werden somit als Navigationselemente gekennzeichnet und definieren Menüs oder interne Verlinkungsstrukturen der Seite. Es sollte jedoch nicht jeder einzelne Link in ein <nav> Tag verpackt werden, sondern lediglich Navigationshilfen, wie Menüs und Linkblöcke.

Spezielle Browser, wie zum Beispiel Screenreader, die vor allem für blinde Menschen das Web zugänglich machen, können über dieses Element auf ein Menü hingewiesen werden, um sich auf der Website besser zurechtzufinden.

<section> … </section>

Browserkompatibilität:
5.0	4.0	3.6	10	8.0

Mit dem <section> Tag können logische Abschnitte einer Website oder einer Gruppe von Inhalten definiert werden.

So kann zum Beispiel der Inhaltsteil vom Sidebar-Teil eines Blog unterschieden werden. Der <section> Tag ist somit auf der gleichen Ebene, wie <header> oder <footer> Tags.

<footer> … </footer>

Browserkompatibilität:
5.0	4.0	3.6	10	8.0

Der <footer> Tag ist quasi das Pendant zum <header>. Er kennzeichnet die Fußzeile eines Website-Dokuments oder auch Abschnitts.

Er wird häufig dazu verwendet, um Informationen zu Autor, Copyright-Informationen, Kontakt-Informationen etc. am Ende eines Dokuments gebündelt darzustellen.

<article> … </article>

Browserkompatibilität:
5.0	4.0	3.6	10	8.0

Der <article> Tag definiert ein in sich geschlossenes Inhaltselement.

Er kann vor allem für Artikel in Blogs, Web-Zeitschriften , Forum-Posts oder auch Benutzer-Kommentaren verwendet werden.

<aside> … </aside>

Browserkompatibilität:
5.0	4.0	3.6	10	8.0

Der <aside> Tag definiert sekundäre oder ähnliche Inhalte, innerhalb eines Textes.

Er kann zum Beispiel dazu verwendet werden, um Texten eine Fußnote oder Quellen-Verweise hinzuzufügen.

<hgroup> … </hgroup>

Browserkompatibilität:
Ja	Ja	Ja	Ja	Ja

Der <hgroup> Tag ermöglicht es Überschriften von <h1> bis <h6> als Gruppe zusammenzufassen.

Somit ist es möglich eine Überschrift und eine Unter-Überschrift (Headline + Subheadline) als eine Einheit zusammenzufügen.

<figure> … </figure>

Browserkompatibilität:
Ja	Ja	Ja	Ja	Ja

Mit dem <figure> Tag kann man Inhalte kennzeichnen, die mit dem Thema zu tun haben, aber dessen Entfernung die Lesbarkeit des Dokuments nicht beeinträchtigt.

Diese Inhalten können Bilder, Diagramme Illustrationen, Tabellen und Listen sein.

<figcaption> … </figcaption>

Browserkompatibilität:
Ja	Ja	Ja	Ja	Ja

Mit dem <figcaption> Tag können einer <figure> eine Bezeichnung bzw. Kurzbeschreibung verliehen werden.

Es sollte entsprechend innerhalb des <figure> Elements stehen, das es definiert.

<time> … </time>

Browserkompatibilität:
Nein	Nein	Nein	Nein	Nein

Der <time> Tag definiert  Datums oder Zeitangaben zu einem Dokument,  Artikel oder anderen Elements.

Der Tag erlaubt es ein präziseres Datumsformat anzugeben, als das was man in den Text selbst schreibt. So kann für Crawler zum Beispiel eine genaue Zeit angegeben werden, die im Text jedoch vereinfacht dargestellt ist.

<details> … </details>

Browserkompatibilität:
Ja	Nein	Nein	Nein	Nein

Der <details> Tag erlaubt es nähere Informationen zu einem anderen Element (Text, Bild, etc.) hinzuzufügen.

Man könnte den Tag zum Beispiel anwenden, um optionale Detailinformationen in einer Art Widget verpackt  unterzubringen. So könnte man per Klick diese Informationen einblenden bzw. auch wieder ausblenden.

<summary> … </summary>

Browserkompatibilität:
Ja	Nein	Nein	Nein	Nein

Der <summary> Tag stellt die Überschrift innerhalb eines <details> Tags dar.

Dieser Abschnitt kann angeklickt werden, um die Detailinformationen ein- bzw. auszublenden.

<wbr> … </wbr>

Browserkompatibilität:
Ja	Ja	Ja	Nein	Nein

Der <wbr> Tag kennzeichnet Stellen eines Wortes, an denen ein Zeilenumbruch möglich sein soll.

Dieser Tag sollte vor allem in der Anwendungsentwicklung einen Nutzen haben, um lange Wörter oder Zeichenketten manuell umbrechen zu lassen.

<mark> … </mark>

Browserkompatibilität:
Ja	ja	Ja	Ja	Ja

Dieser Tag ermöglicht es Textpassagen gelb zu markieren, um sie besonders hervorzuheben.

Als Anwendungsszenario könnte ich mir die Markierung einzelner Treffer einer Suche innerhalb eines Textes vorstellen.

Stand der Liste: 06.12.2011