markieren die großen Bereiche einer Seite, etwa Hauptinhalt, Navigation, Kopf- und Fußbereich. Assistive Technologien wie Screenreader nutzen diese Landmarks, um Orientierung zu schaffen: Nutzer können direkt zum Hauptinhalt springen, Navigationen erkennen und sich strukturiert durch die Seite bewegen.
Wichtige Landmarks entstehen durch native Elemente:
<main>für den Hauptbereich,<nav>für Navigationsbereiche,<header>und<footer>,<aside>für ergänzende Inhalte.
Gut umgesetzte Landmarks sind eindeutig und sinnvoll benannt, etwa eine Navigation mit aria-label. Problematisch sind doppelte oder unbenannte Landmarks, mehrere sichtbare <main>-Elemente oder Bereiche, die per role nachgebaut werden, obwohl ein natives Element ausreichen würde.
Die Landmarks, die zählen #
HTML5-Landmarks — <header>, <nav>, <main>, <aside> und <footer> — teilen eine Seite in benannte Regionen. Screenreader-Nutzer springen direkt zwischen ihnen; Crawler und KI-Modelle nutzen dieselben Grenzen, um den eigentlichen Inhalt von Navigation und Boilerplate zu trennen. Pro Seite genau ein <main> verwenden.
Häufige Fehler #
Typische Probleme: alles in generische <div>s verpackt (gar keine Landmarks), mehrere unbeschriftete <nav>-Elemente, die nicht unterscheidbar sind, und Inhalt ausserhalb von <main>, der hineingehört. Hat eine Seite mehrere Navigationen, per aria-label benennen («Hauptnavigation», «Footer-Navigation»).