HTML-Kurs / Eine Seite mit semantischen Elementen strukturieren

Semantische HTML-Elemente beschreiben die Funktion jedes Teils einer Seite. Verwenden Sie nav für die Hauptnavigation, main für den Hauptinhalt der Seite und article für eigenständige Inhalte. Diese Rollen bleiben bedeutungsvoll, selbst wenn sich die visuelle Anordnung ändert.

Was bedeutet jedes Bereichselement?

• header führt in eine Seite oder einen Abschnitt ein. Es kann einen Site-Namen, einen Titel oder eine Navigation enthalten.
• nav gruppiert die wichtigsten Navigationslinks. Eine Gruppe benötigt nav nicht nur, weil sie Links enthält.
• main enthält den einzigartigen Hauptinhalt der Seite. Ein Dokument darf höchstens eine sichtbare main-Region.
• article eignet sich für einen eigenständigen Artikel oder eine Geschichte. section unterteilt den Inhalt nach Themen und sollte im Allgemeinen einen Titel haben, der sein Thema identifiziert.
• aside enthält ergänzende Informationen, die nur indirekt mit dem Hauptinhalt zusammenhängen. footer enthält Abschlussinformationen für eine Seite oder einen Abschnitt.

Diese Elemente allein bestimmen nicht ihre Anordnung auf dem Bildschirm. Verwenden Sie aside, weil der Inhalt ergänzend ist, nicht weil Sie eine Seitenleiste möchten; verwenden Sie CSS, um seine Position festzulegen. Ebenso garantiert alleinige semantische Auszeichnung weder Barrierefreiheit noch bessere Rankings in Suchmaschinen. Der tatsächliche Inhalt, Überschriften und die Lesereihenfolge müssen den Rollen der Elemente entsprechen.

Erstellen Sie eine vollständige Seite mit semantischen Bereichen

Das folgende Beispiel ist ein vollständiges HTML-Dokument. Die Navigationslinks der Seite verweisen auf Bereiche innerhalb derselben Datei, sodass Sie das Beispiel speichern und ausführen können, ohne eine andere Seite zu erstellen. Wählen Sie die Überschriftsebenen, nachdem Sie die Bereiche mithilfe von Überschriften und Absätzen aufgeteilt haben.

<!doctype html>

<html lang="de-DE">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Frühlingspflanzen | Kleiner Garten</title>

</head>

<body>

  <header>

    <p>Kleiner Garten</p>

    <nav aria-label="Auf dieser Seite">

      <a href="#article">Artikel lesen</a>

      <a href="#sunlight">Sonnenlichtbedarf</a>

    </nav>

  </header>



  <main>

    <article id="article">

      <h1>Pflanzen für den Frühling</h1>

      <section id="sunlight">

        <h2>Sonnenlichtbedarf</h2>

        <p>Der Lichtbedarf variiert je nach Pflanze.</p>

      </section>

    </article>

    <aside>

      <p>Überprüfen Sie das Datum des letzten Frosts in Ihrer Region, bevor Sie pflanzen.</p>

    </aside>

  </main>



  <footer>

    <p>Leitfaden von Kleiner Garten</p>

  </footer>

</body>

</html>

Speichern Sie den Code unter dem Namen index.html und öffnen Sie ihn in einem Browser. Der Name der Website, die Navigation, der Artikel, die ergänzende Notiz und die Fußzeile erscheinen ungefähr von oben nach unten. Die Auswahl von „Sonnenlichtbedarf“ ermöglicht den Wechsel zu dem Abschnitt, weil href="#sunlight" id="sunlight" entspricht. Wenn Sie möchten, dass die Notiz neben dem Artikel steht, fügen Sie ein CSS-Layout hinzu, anstatt die Bedeutung des HTML zu ändern. Das h1 im Code ist der Titel des Beispieldokuments, nicht ein anderer Titel in diesem Tutorial.

Wann sollten Sie section oder article verwenden?

Ein Blogartikel kann für sich allein stehen und ist ein guter Kandidat für article. In diesem Artikel können Themen wie „Was Sie benötigen“ und „Schritte“ jeweils ein section bilden. Ein Container, der nur für einen Rahmen oder eine Hintergrundfarbe verwendet wird, benötigt keine semantische Rolle; ein div kann angemessener sein. Sie müssen auch nicht jeden Titel und Absatz in einem section einschließen, wenn ihre Hierarchie bereits klar ist. Für einen Container, der nur dazu dient, Elemente zum Zweck des Stils zu gruppieren, verwenden Sie die Kriterien von Wann div und span verwenden.

header und footer können sowohl zu einem einzelnen article als auch zur gesamten Seite gehören. Eine Liste von Nachrichtenartikeln, die unabhängig verstanden werden können, kann pro Artikel ein article enthalten. Entscheiden Sie basierend auf der Rolle des Inhalts und nicht auf dem Namen des Elements oder seinem Standardaussehen. Siehe die HTML-Element-Referenz auf MDN für die Definitionen der Elemente.

Elemente für denselben Inhalt auswählen

Wenn eine Seite sowohl eine Website-Navigation als auch eine Navigation innerhalb eines Artikels aufweist, unterscheiden Sie die beiden Navigationsbereiche durch aussagekräftige Namen. Dieses Fragment identifiziert ihre unterschiedlichen Zwecke.

<nav aria-label="Website-Navigation">
  <a href="index.html">Startseite</a>
  <a href="about.html">Vorstellung</a>
</nav>
<nav aria-label="Abschnitte dieses Artikels">
  <a href="#sunlight">Licht</a>
  <a href="#watering">Bewässerung</a>
</nav>

Ordnen Sie Dateinamen und Fragmentkennungen den tatsächlichen Zielen zu. aria-label liefert einen zugänglichen Namen für den Navigationsbereich; es erstellt nicht automatisch eine sichtbare Menüüberschrift.

Die WAI-Richtlinien des W3C zur Kennzeichnung von Regionen erklären, wie Namen Regionen mit ähnlichen Rollen unterscheiden.

Überprüfen Sie die Dokumentstruktur

Lesen Sie die Überschriften, das Menü und den Hauptinhalt in der Reihenfolge des Dokuments, auch wenn ihre Position auf dem Bildschirm korrekt zu sein scheint. Vermeiden Sie mehrere sichtbare main, section-Container ohne Titel und ohne wirklichen Inhalt sowie aside, die nur verwendet werden, um eine seitliche Position zu erzwingen. Eine sinnvolle Struktur muss immer nachvollziehbar sein, bevor CSS hinzugefügt wird.