Artikelreihe HTML 5: Die neuen strukturellen Tags

Um Inhalte und Abschnitte für den Browser oder die Suchmaschinen identifizierbar zu machen gibt es die in HTML die Tags. Mit HTML 5 kommen einige neue Tags zur gezielteren Auszeichnung hinzu. Vor allem für Blogs und Websites mit berichtendem Charakter bringen diese neuen Tags Möglichkeiten die Inhalte besser auszuzeichnen.

4 Kommentare

Raphael Steinmann

6.12.2011

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:
Google Chrome Browser Icon 

5.0

Apple Safari Browser Icon 

4.0

Mozilla Firefox Browser Icon 

3.6

Opera Browser Icon 

10

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

5.0

Apple Safari Browser Icon 

4.0

Mozilla Firefox Browser Icon 

3.6

Opera Browser Icon 

10

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

5.0

Apple Safari Browser Icon 

4.0

Mozilla Firefox Browser Icon 

3.6

Opera Browser Icon 

10

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

5.0

Apple Safari Browser Icon 

4.0

Mozilla Firefox Browser Icon 

3.6

Opera Browser Icon 

10

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

5.0

Apple Safari Browser Icon 

4.0

Mozilla Firefox Browser Icon 

3.6

Opera Browser Icon 

10

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

5.0

Apple Safari Browser Icon 

4.0

Mozilla Firefox Browser Icon 

3.6

Opera Browser Icon 

10

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

Ja

Mozilla Firefox Browser Icon 

Ja

Opera Browser Icon 

Ja

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

Ja

Mozilla Firefox Browser Icon 

Ja

Opera Browser Icon 

Ja

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

Ja

Mozilla Firefox Browser Icon 

Ja

Opera Browser Icon 

Ja

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Nein

Apple Safari Browser Icon 

Nein

Mozilla Firefox Browser Icon 

Nein

Opera Browser Icon 

Nein

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

Nein

Mozilla Firefox Browser Icon 

Nein

Opera Browser Icon 

Nein

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

Nein

Mozilla Firefox Browser Icon 

Nein

Opera Browser Icon 

Nein

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

Ja

Mozilla Firefox Browser Icon 

Ja

Opera Browser Icon 

Nein

Microsoft Internet Explorer Browser Icon 

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:
Google Chrome Browser Icon 

Ja

Apple Safari Browser Icon 

ja

Mozilla Firefox Browser Icon 

Ja

Opera Browser Icon 

Ja

Microsoft Internet Explorer Browser Icon 

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