Semantische Tags: header, nav, main, article, footer

Semantisches HTML verwendet Elemente, die die Bedeutung von Inhalten beschreiben, nicht nur deren Erscheinungsbild. <article> sagt: „Das ist ein eigenständiger Inhaltsbereich.“ Ein allgemeines <div> sagt nichts aus.

Frühe Webentwickler erstellten Layouts vollständig aus <div>- und <span>-Elementen. Bildschirmleseprogramme konnten Navigation, Inhalte und Werbung nicht unterscheiden. Suchmaschinen mussten die Struktur der Seite erraten.

Das <header>-Element enthält einleitende Inhalte für die Seite oder einen Abschnitt: typischerweise das Logo, den Namen der Website und die Navigation. Eine Seite kann mehrere header enthalten – einen für die Website und je einen pro Artikel.

Verwenden Sie <nav>, um Gruppen von Navigationslinks zu umschließen: das Hauptmenü, eine Breadcrumb-Navigation oder ein Inhaltsverzeichnis. Bildschirmleseprogramme kündigen Nav-Landmarks an, damit Benutzer direkt zu ihnen springen oder sie überspringen können.

Pro Seite sollte es genau ein <main>-Element geben. Es enthält den wesentlichen, für diese Seite einzigartigen Inhalt – keine wiederholten Elemente wie Navigation oder Footer. Hilfstechnologien ermöglichen Benutzern, direkt zum main-Element zu springen.

<article> umschließt Inhalte, die für sich allein sinnvoll sind und weiterverbreitet werden könnten: einen Blogbeitrag, eine Nachricht, einen Benutzerkommentar oder eine Produktkarte. Fragen Sie sich: „Würde dieser Inhalt Sinn ergeben, wenn ich ihn auf eine andere Website kopierte?“

<section> gruppiert zusammengehörige Inhalte – Kapitel, Tabs oder Themenbereiche. Jeder Abschnitt hat normalerweise eine Überschrift. Wenn der Inhalt für sich allein bestehen könnte, verwenden Sie article.

<aside> enthält Inhalte, die einen indirekten Bezug zum umgebenden Inhalt haben: Seitenleisten, hervorgehobene Zitate, Werbung oder verwandte Links. Bildschirmleseprogramme stellen ihn als ergänzenden Landmark bereit.

<footer> enthält Informationen über das Element, in dem er sich befindet: Urheberrechtshinweise, Kontaktlinks und verwandte Dokumente. Wie bei header kann eine Seite mehrere footer enthalten.

Verwenden Sie Überschriften, um eine logische Dokumentstruktur zu erstellen. Pro Seite sollte es nur ein <h1> geben. Unterüberschriften verwenden h2, Unter-Unterüberschriften h3 und so weiter. Überspringen Sie keine Ebenen und verwenden Sie Überschriften nicht nur wegen ihrer visuellen Größe.

Suchmaschinen verwenden die semantische Struktur, um Seiteninhalte zu verstehen – eine Seite mit korrekten Landmarks und einer geeigneten Überschriftenhierarchie erzielt oft ein besseres Ranking. Benutzer von Bildschirmleseprogrammen navigieren anhand von Landmarks und Überschriften, weshalb Semantik unmittelbar mit Barrierefreiheit zusammenhängt.

Welches Element sollte den einzigartigen Hauptinhalt einer Seite umschließen (genau einmal vorhanden)?

Verwenden Sie <header>, <nav>, <main>, <article>, <section>, <aside> und <footer>, um Ihrem Dokument eine Struktur zu geben, die Browser, Suchmaschinen und Bildschirmleseprogramme verstehen.