Semantische HTML-Struktur

Was wir prüfen

Wir prüfen, ob die Startseite diese fünf Strukturelemente verwendet:

Element	Bedeutung
<header>	Kopfbereich mit Logo und meist dem Menü
<nav>	Navigation
<main>	der eigentliche Inhalt der Seite
<article> oder <section>	in sich geschlossene Abschnitte
<footer>	Fussbereich mit Kontakt, Impressum, Links

Sind höchstens zwei vorhanden, gibt es eine Warnung, fehlen einzelne, einen Hinweis. Diese Prüfung zählt wenig, höchstens 5 von 100 Punkten im Bereich.

Warum das wichtig ist

Für Menschen ist auf einen Blick klar, wo das Menü ist und wo der Inhalt beginnt. Maschinen sehen nur Code. Ist die ganze Seite aus neutralen <div>-Elementen gebaut, müssen sie raten, was Navigation, was Werbung, was Fusszeile und was Inhalt ist.

Mit semantischen Elementen ist das eindeutig:

• KI-Assistenten und Suchmaschinen konzentrieren sich auf den Inhalt in <main> und lassen wiederkehrende Menüs und Fusszeilen beiseite. Die Zusammenfassung der Seite wird genauer.
• Vorlesesoftware bietet Sprungmarken an: Blinde Menschen springen mit einem Tastendruck zum Hauptinhalt, statt sich durch das ganze Menü vorlesen zu lassen.
• Lesemodi in Browsern und Apps erkennen den Hauptinhalt zuverlässiger.

So behebst Du es

Ersetze die äusseren Container durch die passenden Elemente:

<header>
  <a href="/">Logo</a>
  <nav>…Menü…</nav>
</header>
<main>
  <h1>Schreinerei in Chur</h1>
  <section>…Leistungen…</section>
  <section>…Über uns…</section>
</main>
<footer>…Kontakt, Impressum…</footer>

WordPress

Aktuelle Themes verwenden diese Elemente bereits. Block-Themes legen sie im Site-Editor über die Vorlagenteile «Header» und «Footer» an. Bei Gruppen-Blöcken kannst Du unter «Erweitert › HTML-Element» zwischen <div>, <main>, <section>, <header> und <footer> wählen. Bei Page-Buildern wie Elementor findest Du die Einstellung «HTML-Tag» in den Layout-Optionen eines Containers.

Website-Baukästen

Wix, Squarespace und Jimdo verwenden eine feste Grundstruktur, die Du kaum beeinflussen kannst. Wird hier etwas gemeldet, liegt es meist am Baukasten.

Ältere Websites

Fehlen fast alle Elemente, ist die Website technisch oft älter. Beim nächsten Relaunch sollte die Agentur auf eine semantische Struktur achten.

So prüfst Du es selbst

Browser-Erweiterungen wie «Landmarks» oder «HeadingsMap» zeigen die Strukturelemente einer Seite. In den Entwicklertools siehst Du unter «Elemente» direkt, ob <header>, <main> und <footer> vorkommen.

Häufige Fragen

Sieht die Seite danach anders aus?

Nein. Die Elemente ändern nichts an der Darstellung, nur an der Bedeutung im Code. Gestaltet wird weiterhin mit CSS.

Wie viele main-Elemente darf eine Seite haben?

Genau ein sichtbares. header, nav, section und footer dürfen mehrfach vorkommen, etwa eine nav im Kopf und eine in der Fusszeile.