Semantik-Elemente von HTML5

Bisher konnten HTML-Dokumente mit Hilfe des <div> Elements in Blöcke aufgeteilt werden. Diese Div-Container nutzte man, um mit Hilfe von CSS unterschiedliche Designs zu realisieren.

HTML5 bringt nun zusätzliche Elemente mit, die das Dokument inhaltlich strukturieren können. Diese entsprechen im Prinzip den Div-Containern, haben aber eigene Namen aus denen sich der Zweck des Elements ableiten lässt. Auch hier steht die Trennung von Inhalt und Design im Vordergrund. Außerdem werden die Elemente von Suchmaschinen ausgewertet. Daher ist der Einsatz in jedem Fall sinnvoll.

Das <header> Element erzeugt einen Absatz, in dem der Navigationsbereich, der Titel und auch das Logo der Website platziert werden sollten. Wie aus der Tag-Bezeichnung hervorgeht, sollte der Header-Bereich oben auf der Website platziert sein.

Eine Seite kann mehrere <header>-Bereiche haben, die jedoch nicht ineinander verschachtelt werden dürfen. Damit kann eine inhaltliche Struktur auf einer Website erzeugt werden.

Das <footer> Element erzeugt einen Absatz, der die Elemente enthalten sollte, die in allen Seiten und Unterseiten der Website angezeigt werden sollten. Dazu gehören beispielsweise das Impressum, Kontaktdaten und eventuell auch ein Verweis auf die Hauptseite bzw. auf die Kapitelseite.

Das <main> Element enthält (wie der Name schon vermuten lässt) den Hauptinhalt des HTML-Dokuments.

Das <article> Element unterteilt den Hauptinhalt (<main>-Bereich) in abgeschlossene Abschnitte.

Das <section> Element unterteilt einzelne Abschnitte inhaltlich in weitere Unterabschnitte.

Im <nav>-Bereich stehen Navigationsleisten und Menüs.

Es bietet einen großen Vorteil, wenn man z.B. in der Druckansicht eines HTML-Dokuments die Navigationsbereiche ausblenden will, da diese auf dem Papier sowieso sinnlos sind. Außerdem kann man Navigationselemente (z.B. Hyperlinks) in diesem Bereich mit CSS gezielt formatieren.

Das <aside> Element steht für einen Abschnitt (der meistens auf der rechten Seite eines HTML-Dokuments dargestellt wird), der zusätzliche Informationen und Links zum Inhalt im <main>-Bereich des Dokuments bereitstellt.

Das <figure> Element

Das <figure> Element dient dazu, zusätzliche Informationen über den Hauptinhalt in einem gesonderten, unabhängigen Bereich (Container) darzustellen. Üblicherweise handelt es sich dabei um Bilder oder manchmal auch um Programmcode.