Semantische Seitenstruktur

Die meisten Seiten haben ungefähr dieselbe Form: einen Kopfbereich, ein Menü, den Hauptinhalt und eine Fußzeile. HTML hat für jeden Teil ein Element, und Screenreader lassen Nutzer direkt dorthin springen.

Von der div-Suppe zu Landmarks

Jahrelang wurden Seiten aus <div>-Elementen mit Klassennamen wie header oder menu gebaut. Ein <div> ist ein allgemeiner Kasten ohne jede Bedeutung. Der Klassenname war also der einzige Hinweis, und den sahen nur Menschen, die den Code lasen. Heute hat HTML Elemente, die sagen, was jeder Bereich ist. Browser, Suchmaschinen und assistive Technik verstehen sie, und Screenreader-Nutzer können eine Liste dieser Bereiche öffnen, der sogenannten Landmarks, und zum gewünschten springen, so wie sehende Nutzer einen Blick auf das Layout werfen.

Die Hauptbereiche

• <header>: einleitender Inhalt, meist der Name oder das Logo der Website und oft das Hauptmenü. Auch ein Artikel kann einen eigenen header haben.
• <nav>: ein Block wichtiger Navigationslinks, etwa das Website-Menü oder ein Inhaltsverzeichnis. Nicht jede Gruppe von Links braucht eins.
• <main>: der Inhalt, der nur auf dieser Seite steht. Verwende pro Seite genau ein sichtbares <main> und setz es nicht in header, nav, aside oder footer.
• <article>: ein in sich geschlossenes Stück, das auch für sich allein Sinn ergäbe, etwa ein Blogbeitrag, eine Nachricht oder eine Produktkarte.
• <section>: ein thematischer Teil einer Seite oder eines Artikels, normalerweise mit eigener Überschrift.
• <aside>: Inhalt, der mit dem Hauptinhalt zusammenhängt, aber davon getrennt ist, etwa eine Seitenleiste, ein Glossarkasten oder verwandte Links.
• <footer>: abschließende Angaben wie Autor, Urheberrecht und Kontaktlinks.

Diese Elemente beschreiben Bedeutung, nicht Position. Ein <nav> muss nicht oben stehen, und ein <aside> muss nicht rechts sein. Auf dem Handy landet aside meist unter dem Hauptinhalt. Die Positionen kommen aus CSS. Wähle das Element, indem du fragst, was der Inhalt ist, so wie du Überschriftenebenen nach der Struktur statt nach der Größe gewählt hast.

article oder section?

Die entscheidende Frage ist, ob das Stück auch woanders für sich allein Sinn ergäbe, zum Beispiel in einem Newsreader oder als geteilter Link. Wenn ja, ist es ein <article>. Ergibt es nur als Teil von etwas Größerem Sinn, wie die Zutaten eines Rezepts, ist es eine <section>. Beide sollten normalerweise mit einer Überschrift beginnen. Artikel können Abschnitte enthalten, und ein Abschnitt kann Artikel enthalten, etwa ein Abschnitt „Neueste Beiträge“ mit mehreren Beitragskarten.

div und span haben weiterhin ihren Platz

Wenn kein Element passt, verwende <div> für einen Block und <span> für ein paar Wörter innerhalb einer Zeile. Sie sind nützlich als Anknüpfungspunkte für CSS, zum Beispiel ein <div class="cards">, das Karten in einem Raster anordnet. Die Regel lautet: Greif zuerst zu einem Element mit Bedeutung und weich nur dann auf ein allgemeines aus, wenn nichts den Inhalt beschreibt. Eine Seite nur aus divs funktioniert, verbirgt ihre Struktur aber vor allen, die nicht in den Code schauen.

Ein schneller Test: Öffne deine Seite mit ausgeschaltetem CSS oder lies die Gliederung aus Überschriften und Landmarks, die dir eine Browsererweiterung anzeigt. Liest sich die Seite dann immer noch in einer sinnvollen Reihenfolge, mit klarem Kopfbereich, Menü, Hauptinhalt und Fußzeile, erfüllt die Struktur ihren Zweck.

Native Elemente vor ARIA

Vielleicht begegnet dir das Attribut role, Teil eines W3C-Standards namens WAI-ARIA, geschrieben als <div role="navigation">. Es gibt einem allgemeinen Element eine Bedeutung für assistive Technik. Die Hinweise des W3C zum Einsatz von ARIA beginnen mit einer einfachen Regel: Wenn ein natives HTML-Element schon die Bedeutung hat, die du brauchst, verwende stattdessen dieses. <nav> ist kürzer, funktioniert überall und kann nicht an einer Stelle vergessen und an einer anderen bedacht werden. Dasselbe gilt für Schaltflächen: Ein echtes <button> lässt sich ohne Zusatzaufwand mit Tab fokussieren und mit Eingabe- oder Leertaste drücken, während ein anklickbares <div> dafür zusätzlichen Code braucht.