Semantische Blockelemente / HTML5

h1, h2, h3, h4, h5, h6, section, nav, article, aside, header, footer, address

Bis auf die Überschriften sind die hier aufgeführten Elemente in HTML5 neu hinzugekommen. Sie bestimmen die größeren Breiche einer HTML Seite (z.B: header, nav, main, footer). Früher wurden stattdessen div Elemente genutzt und diese mit id- und role- Attributen versehen, um genauer zu bestimmen, um welchen Bereich es sich handelt. Diese role Attribute nennt man auch Aria Landmark Roles, welche von Screenreadern unterstützt werden, um die Seite übersichtlich und navigierbar zu machen. Durch den Einsatz dieser "neuen" HTML5- Elemente sind die role Attribute überflüssig geworden.

Die Aufteilung der HTML Elemente in die Bereiche Block- und Inline-Elemente wurde HTML4.01 und früheren Versionen verwendet.
In HTML5 gibt es einen anderen Ansatz, um die semantische Struktur einer Seite zu definieren . Dazu gehört unter anderem der Sectioning Content und die Outline Struktur.
siehe auch HTML5 Handbuch von Stefan Münz

Sectioning Content

article, aside, nav, section

Die Elemente article, aside, nav, section des Content Models Sectioning können mit den Elementen header und footer strukturiert werden. Diese 4 Elemente bilden eine Art Unterdokument, in denen eine eigene Outline Strukur durch die Überschriftenelemente (h2-h6) gebildet werden können

siehe auch Sectioning Content siehe auch mediaevent

Semantische Blockelemente
Element	Erklärung
section	Das HTML- <section>Element stellt einen eigenständigen Abschnitt dar – der kein spezifischeres semantisches Element hat, um ihn darzustellen – der in einem HTML-Dokument enthalten ist.	sectioning
article	Das HTML- <article> Element stellt eine in sich geschlossene Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Site dar, die unabhängig vertreibbar oder wiederverwendbar sein soll Beispiele sind: ein Forenbeitrag, ein Zeitschriften- oder Zeitungsartikel oder ein Blogeintrag.
aside	Das HTML- <aside>Element stellt einen Teil eines Dokuments dar, dessen Inhalt nur indirekt mit dem Hauptinhalt des Dokuments zusammenhängt.
nav	Das HTML- <nav>Element stellt einen Abschnitt einer Seite dar, dessen Zweck darin besteht, Navigationslinks entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten bereitzustellen. Häufige Beispiele für Navigationsabschnitte sind Menüs, Inhaltsverzeichnisse und Indizes.
h1 - h6	Die HTML <h1>– <h6>Elemente repräsentieren sechs Ebenen von Abschnittsüberschriften. <h1>ist die höchste Abschnittsebene und <h6>ist die niedrigste.	heading
hgroup	Das hgroup Element umschließt eine Überschrift und einen Subtitel. Dieser Subtitel kann eine untergeordnete Überschrift sein oder auch p Element. Wenn man mit der darunterliegenden Überschrift jedoch ein Unterthema einleitet, sollte das hgroup Element nicht verwendet werden. Siehe auch whatwg <hgroup> <h1>Gaja</h1> <p>Die Erde das große Lebewesen</p> </hgroup>	heading
header	Das HTML- <header>Element stellt einführenden Inhalt dar, typischerweise eine Gruppe von einführenden Informationen oder Navigationshilfen. Es kann einige Überschriftenelemente enthalten, aber auch ein Logo, ein Suchformular, einen Autorennamen und andere Elemente.
footer	Das HTML- <footer>Element stellt eine Fußzeile für den nächsten Abschnittsinhalt oder das Abschnittsstammelement und die gesamte Seite dar. Eine Fußzeile enthält typischerweise Informationen über den Autor des Abschnitts, Copyright-Daten oder Links zu verwandten Dokumenten.
address	Das HTML- <address>Element gibt an, dass der eingeschlossene HTML-Code Kontaktinformationen für eine Person oder Personen oder für eine Organisation bereitstellt.

Aria Landmark Roles

In älteren HTML Versionen wurden für Lesegeräte bestimmte Attribute eingesetzt, um den Inhalt barrierefrei zu machen. Es waren die Aria Landmark Roles. Anhand dieser Attribute wurde die Seite für Screenreader navigierbar. Diese Attribute werden nun nicht mehr gebraucht, da man statt der role-Attribute die HTML5 Blockelemente einsetzt. Folgendermaßen wurden früher die Inhalte definiert, beispielsweise für eine Navigation.

Steinzeit HTML:
<div role="Navigation">....Navigationsinhalt ....</div>

HTML5:
<nav> ....Navigationsinhalt.... </nav>

Folgende role-Attribute wurden durch folgende HTML Elemente ersetzt.

role	HTML
Banner	HEADER-Element
Complementary	ASIDE-Element
contentinfo	FOOTER-Element
Form	FORM-Element
Main	MAIN-Element
Navigation	NAV-Element
region	SECTION-Element
Search	keine HTML-Entsprechung;