Dies ist eine alte Version des Dokuments!

Inhaltsverzeichnis

HTML – Semantische Elemente

HTML – Semantische Elemente

Semantische HTML-Elemente beschreiben die Bedeutung eines Inhalts – nicht sein Aussehen.

Sie sind essenziell für:

Barrierefreiheit (Screenreader)
Suchmaschinen (SEO)
Wartbarkeit
saubere CSS-Layouts

Grundidee

Früher wurde fast alles mit <div> umgesetzt. Moderne HTML-Struktur verwendet sprechende Elemente, die den Zweck eines Bereichs klar benennen.

Wichtige semantische Elemente

Element	Bedeutung
`<header>`	Kopfbereich einer Seite oder Sektion
`<nav>`	Navigation
`<main>`	Hauptinhalt der Seite
`<section>`	thematischer Abschnitt
`<article>`	eigenständiger Inhalt
`<aside>`	ergänzender Inhalt
`<footer>`	Fußbereich

Beispiel einer sauberen Seitenstruktur

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Beispielseite</title>
</head>
<body>

<header>
  <h1>Meine Webseite</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Start</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

<main>
  <section>
    <h2>Ein Abschnitt</h2>
    <p>Textinhalt</p>
  </section>

  <article>
    <h2>Artikel</h2>
    <p>Eigenständiger Inhalt</p>
  </article>
</main>

<aside>
  <p>Zusatzinformationen</p>
</aside>

<footer>
  <p>&copy; 2025</p>
</footer>

</body>
</html>

Unterschiede: section vs. article

Element	Verwendung
`<section>`	thematische Gruppierung
`<article>`	eigenständig nutzbarer Inhalt

Typische Fehler

<div> statt semantischer Elemente
Mehrere <main>-Elemente
Navigation außerhalb von <nav>
Semantik nur für Styling missbrauchen

Barrierefreiheit (Grundlagen)

Jedes <img> benötigt ein alt-Attribut
Überschriften müssen logisch verschachtelt sein
Semantik hilft Screenreadern beim Verständnis

Merksatz

Semantik beschreibt **was** ein Inhalt ist,
CSS beschreibt **wie** er aussieht.

**Dies ist eine alte Version des Dokuments!**