Wie teilt man den Inhalt einer Seite semantisch auf?

Die semantische Trennung von Inhalten wird durch die Verwendung entsprechender HTML5-Tags erreicht.

Wichtige semantische Tags:

• <header>: Einleitung oder Gruppe von Navigations- oder Einleitungselementen. Enthält oft den Titel der Website, Navigation, Logo.
• <nav>: Block von Navigationslinks.
• <main>: Hauptinhalt des Dokuments. Sollte auf der Seite einzigartig sein (nicht dupliziert im Footer, Header, Sidebar).
• <article>: Selbstständiges, unabhängiges Inhaltsfragment (Artikel, Blog-Beitrag, Kommentar).
• <section>: Separater Abschnitt des Dokuments (Kapitel, Absatz, Inhaltsblock auf der Startseite). Sollte eine Überschrift (<h1>-<h6>) haben.
• <aside>: Teil des Inhalts, der indirekt mit dem Hauptinhalt verbunden ist (Sidebar, Zitat, Werbung).
• <footer>: Fußzeile des Abschnitts oder Dokuments. Enthält in der Regel Informationen über den Autor, Urheberrechte, Links zu verwandten Dokumenten.
• <figure>: Eigenständiger Inhalt (Bild, Diagramm, Tabelle), der ohne Verlust der Bedeutung aus dem Hauptfluss des Dokuments verschoben werden kann. Wird häufig mit <figcaption> verwendet.
• <figcaption>: Beschriftung für das <figure>-Element.
• <mark>: Hebt Text hervor (markiert), der im Kontext des umgebenden Textes eine besondere Bedeutung oder Interesse hat.
• <time>: Repräsentiert eine konkrete Zeit oder einen Zeitraum.

Der Einsatz semantischer Tags verbessert die Zugänglichkeit, SEO und die Wartbarkeit des Codes. Suchmaschinen und assistive Technologien (Screenreader) verstehen die Struktur der Seite besser.