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
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
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
Das <main>
Element enthält (wie der Name schon vermuten lässt) den Hauptinhalt des HTML-Dokuments.
Das <article> Element
Das <article>
Element unterteilt den Hauptinhalt (<main>
-Bereich) in abgeschlossene Abschnitte.
Das <section> Element
Das <section>
Element unterteilt einzelne Abschnitte inhaltlich in weitere Unterabschnitte.
Das <nav> Element
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
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.