Seitenstruktur & semantische Elemente

Nimm eine Zeitung zur Hand – irgendeine. Ohne ein einziges Wort zu lesen, erkennst du sofort: Das oben ist der Titelkopf, das hier ist ein Artikel, das am Rand eine Notizspalte, das unten das Impressum. Diese Ordnung ist kein Zufall, sondern über Jahrhunderte gereifte Struktur – und genau diese Ordnung kannst du deinen Webseiten geben. HTML bringt dafür eigene Elemente mit, die jedem Bereich deiner Seite einen Namen geben. In dieser Lektion lernst du sie alle kennen und baust damit das Grundgerüst einer kompletten Blog-Startseite.

Bisher hast du Überschriften, Absätze, Bilder und Formulare einfach untereinander geschrieben. Das funktioniert – aber einer Seite mit dreißig Elementen sieht niemand mehr an, was zusammengehört. Bereichs-Elemente wie <header> oder <main> ändern das, und zwar für drei Zielgruppen gleichzeitig:

• Menschen mit Screenreader: Die Vorlesesoftware bietet die Bereiche als Sprungziele an. „Springe zum Hauptinhalt“ – ein Befehl statt dreißig Mal die Tab-Taste drücken. Ohne Struktur gibt es schlicht nichts anzuspringen.
• Suchmaschinen: Google & Co. erkennen besser, was auf deiner Seite der eigentliche Inhalt ist und was nur Beiwerk wie Navigation oder Fußzeile – das hilft deiner Auffindbarkeit.
• Du selbst: Code mit benannten Bereichen liest sich wie ein beschriftetes Regal. Wenn du in drei Monaten etwas ändern willst, findest du dich sofort zurecht.

Das Schönste daran: Optisch ändern diese Elemente nichts. Sie verhalten sich wie unsichtbare Kisten, in die du deine Inhalte sortierst – die Bedeutung steckt allein im Namen der Kiste. Und noch eine Entwarnung vorweg: Du musst in dieser Lektion nichts grundlegend Neues schreiben lernen. Alles, was du bisher kennst – Überschriften, Absätze, Bilder, Listen –, bleibt exakt gleich. Es bekommt lediglich einen benannten Platz.

Alle sieben Bereichs-Elemente kannst du dir mit einer einzigen Eselsbrücke merken: Deine Webseite ist eine Zeitung. Die Tabelle zeigt, welches Element welchem Teil der Zeitung entspricht:

Die Reihenfolge auf einer typischen Seite ergibt sich damit fast von selbst: oben der <header> (mit der <nav> darin oder direkt danach), dann das <main> mit dem Inhalt, dazu bei Bedarf ein <aside>, ganz unten der <footer>.

Ein Wort noch zur <nav>, weil hier oft übertrieben wird: Nicht jede Handvoll Links verdient dieses Element. Gemeint sind die wesentlichen Navigationsblöcke einer Seite – das Hauptmenü, vielleicht ein Inhaltsverzeichnis. Die drei Links im Footer zu Impressum und Datenschutz dagegen sind einfach nur Links; sie brauchen keine eigene <nav>. Denk an die Zeitung: Die Ressort-Leiste gibt es genau einmal, nicht auf jeder Seite drei Stück.

Innerhalb von <main> sortierst du deine Inhalte weiter. Für den Anfang reichen dir zwei einfache Fragen:

1. „Könnte ich das ausschneiden und einzeln weitergeben – und es ergäbe noch Sinn?“ Dann ist es ein <article>. Ein Blogbeitrag, eine Nachricht, ein Rezept: Jedes davon funktioniert auch außerhalb deiner Seite – wie ein ausgeschnittener Zeitungsartikel, der am Kühlschrank hängt.
2. „Ist das ein Kapitel eines größeren Ganzen mit eigener Überschrift?“ Dann ist es eine <section> – wie das Sport-Ressort, das ohne die restliche Zeitung unvollständig wäre.

Und <aside>? Dort landet alles, was nur am Rande mit dem Hauptinhalt zu tun hat: eine Liste beliebter Beiträge, ein Kasten „Über diese Seite“, ein Werbeblock. Die Faustregel: Könnte man es entfernen, ohne dass dem Hauptinhalt etwas fehlt, ist es eine Randspalte.

Ein paar schnelle Übungsfälle zum Mitdenken: Ein einzelnes Rezept auf einer Kochseite? Ergibt allein Sinn – <article>. Der Abschnitt „Häufige Fragen“ auf deiner Vereinsseite? Ein Kapitel des Ganzen mit eigener Überschrift – <section>. Der Kasten „Das Wetter am Wochenende“ neben dem Ausflugsbericht? Nettes Extra, aber verzichtbar – <aside>. Mit ein wenig Übung triffst du diese Entscheidung in Sekunden.

Zwei Elemente wirst du in fremdem Code ständig sehen, und beide bedeuten – nichts: <div> und <span> sind reine Behälter ohne jede inhaltliche Aussage. Der Unterschied liegt nur im Umfang: <div> gruppiert ganze Blöcke und beginnt auf einer neuen Zeile, <span> umschließt Stellen mitten im Text, ohne den Textfluss zu unterbrechen. Ihr Zweck ist rein technisch: ein Anker für die spätere Gestaltung mit CSS, wenn kein bedeutungstragendes Element passt.

Wichtig ist die Haltung dahinter: Ein <div> ist kein Versagen, sondern die ehrliche Wahl, wenn es schlicht keine Bedeutung zu transportieren gibt. Umgekehrt gilt aber genauso: Wo ein passendes Bereichs-Element existiert, nimm es. Eine Navigation in einem <div class="nav"> zu verstecken, obwohl es <nav> gibt, verschenkt alle Vorteile, die du oben kennengelernt hast. Wundere dich übrigens nicht, wenn du im Quelltext großer Webseiten trotzdem Hunderte <div>-Elemente findest – viele davon erzeugen komplexe Layouts. Das ist dort legitim; nur die Bereichs-Elemente sollten sie eben nicht ersetzen.

Zeit, alles zusammenzusetzen. So sieht das vollständige Grundgerüst einer Blog-Startseite aus – vom Doctype bis zum Footer, mit allen Bereichs-Elementen an ihrem Platz. Nimm dir einen Moment und ordne beim Lesen jedes Element seiner Zeitungs-Rolle zu, bevor du weiterscrollst – genau diese Zuordnung ist die eigentliche Übung dieser Lektion:

Lies das Beispiel einmal nur anhand der Bereichs-Elemente – wie ein Inhaltsverzeichnis: Kopf mit Navigation, Hauptinhalt mit zwei eigenständigen Beiträgen und einem thematischen Abschnitt, Randspalte, Fußzeile. Genau diese Übersicht „sehen“ auch Screenreader und Suchmaschinen, noch bevor sie ein einziges Wort deines Textes gelesen haben. Beachte außerdem: Die beiden Blog-Anrisse sind <article>-Elemente, obwohl sie nur Teaser sind – jeder von ihnen stünde auch allein in einem Newsletter oder Suchergebnis. Im Editor unten wartet eine verschlankte Version darauf, von dir umgebaut zu werden: Ergänze einen dritten <article>, fülle die Randspalte mit einer Linkliste oder baue in den Footer einen Impressums-Link ein.

Falls du dich fragst, wie tief dieses Thema wirklich geht: Der Fortgeschrittenen-Kurs widmet der Semantik eine eigene Lektion mit allen Feinheiten – für heute hast du das solide Fundament gelegt. In der nächsten und letzten Lektion „Validieren, Werkzeuge & dein Weg weiter“ lernst du, dein HTML professionell zu prüfen, und baust dein Abschlussprojekt.