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

`

` | Kopfbereich einer Seite oder Sektion |

`<nav>`

Navigation

`<main>`

Hauptinhalt der Seite

`

` | thematischer Abschnitt |

`

` | eigenständiger Inhalt |

`

` | ergänzender Inhalt |

`

` | 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