Semantisches HTML

header, main, footer, section, article, aside und nav sinnvoll einsetzen. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• semantische Layout-Elemente von generischen Containern unterscheiden
• SEO- und Accessibility-Vorteile von Semantik erklären
• schlechte Div-Strukturen in verständliches HTML überführen

Erklärung

Semantisches HTML beschreibt Bedeutung. Ein header ist ein Einleitungsbereich, main enthält den Hauptinhalt, nav Navigation, article eigenständige Inhalte und aside ergänzende Informationen.

Screenreader, Suchmaschinen und Wartende profitieren von klarer Struktur. Semantik ersetzt kein gutes Design, aber sie schafft eine robuste Grundlage.

Beispiele

<div class="top"><div class="menu">...</div></div>
<div class="content"><div class="post">...</div></div>

Diese Struktur funktioniert optisch, sagt aber wenig über die Bedeutung.

<header>
  <nav aria-label="Hauptnavigation">...</nav>
</header>
<main>
  <article>
    <h1>Semantisches HTML</h1>
    <p>...</p>
  </article>
</main>

Hier können Browser und Hilfstechnologien die Bereiche besser einordnen.

Typische Fehler

• Jeden Abschnitt automatisch als section schreiben, auch ohne Überschrift.
• article für jede beliebige Box verwenden.
• Mehrere main-Elemente sichtbar auf einer Seite einsetzen.

Best Practices

• Verwende main einmal für den Hauptinhalt.
• Gib section-Elementen in der Regel eine Überschrift.
• Nutze div, wenn kein semantisches Element passt.

Kleine Übung

Nimm eine Seite mit vielen div-Elementen und ersetze passende Bereiche durch header, nav, main, section, article, aside und footer.

Zusammenfassung

JavaScript ergänzt Webseiten um Verhalten. Robuster Code arbeitet mit klaren Daten, kleinen Funktionen, sicheren DOM-Operationen, guter Fehlerbehandlung und nachvollziehbarer Struktur.

Weiterführende Seiten

• Vorherige Seite: HTML Formulare
• Nächste Seite: HTML Best Practices
• Zur Übersicht
• JavaScript DOM Grundlagen
• Accessibility