Eine Region, die wichtig genug ist, dass Nutzer direkt dorthin navigieren können sollen, sollte mit der Region <section>
gekennzeichnet werden. Ein <section>
-Element wird nur dann zu einer anspringbaren Seitenregion, wenn es mit einem aria-labelledby- oder aria-label-Attribut bezeichnet wird (genau wie das <form>
-Element).
SECTION
Das HTML <section>
-Element steht für Abschnitte des Inhalts. Sections haben i.d.R. eine Überschrift (der Validator wünscht Überschriften explizit und sagt bei fehlender Überschrift: <section>
lacks heading) und können Kapitel oder die Beschreibung eines Produkts sein. Wenn ein HTML-Objekt für CSS und Javascript gebraucht wird, ist weiterhin ein div-Tag angebracht.
Ein guter Anhaltspunkt, wo section und wo ein div-Element eingesetzt werden sollte, ist eine Zusammenfassung des Inhalts der Webseite: Wenn Inhalte in einer Liste einen eigenen Punkt haben, ist ein <section>
-Tag die bessere Wahl als ein <div>
-Tag.
Oder noch einfacher: Wenn man, wie der Validator wünscht, eine Überschrift drüber setzen kann, dann kann ein Bereich in ein <section>
-Element gesetzt werden.
Anders als <article>
ist <section>
ein Bereich, der nicht unbedingt allein stehen könnte. Der Standard hat die Grenze zwischen <article>
und <section>
nur hauchzart am »self-contained« ausgemacht: Das erklärt, warum wir mit diesen beiden Begriffen immer wieder ins Schlingern kommen. Theoretisch können <article>
-Tags innerhalb von <section>
-Tags stehen. Diese Struktur wird vom Validator ebenfalls als korrekt anerkannt.
Quelle: HTML article, section, header, nav
Mehr Info und html techniques (englisch)
ARIA Landmarks Example beim W3C