Semantische HTML-Elemente

Semantisches HTML verwendet Elemente mit Bedeutung, um die Struktur und Verständlichkeit der Seite sowohl für Benutzer als auch für Maschinen zu verbessern.

Warum Semantik wichtig ist

Semantische Elemente wie <header>, <article>, <footer> usw. helfen nicht nur Entwicklern und Browsern, sondern auch Suchmaschinen und Hilfstechnologien.

Das <header>-Element

Das <header>-Element stellt einen einleitenden Abschnitt einer Seite oder eines Bereichs dar – typischerweise mit Titel, Logo oder Navigation.

<header>
  <h1>My Website</h1>
  <p>Tagline goes here</p>
</header>

Das <nav>-Element

Das <nav>-Element dient zur Aufnahme von Navigationslinks. Es signalisiert Browsern und Nutzern explizit, dass dieser Abschnitt zur Navigation auf der Website dient.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Das <main>-Element

Das <main>-Element steht für den Hauptinhalt der Seite. Es sollte nur einmal pro Seite verwendet werden und darf keine wiederholenden Elemente wie Navigation oder Footer enthalten.

Das <section>-Element

Das <section>-Element definiert einen logisch zusammengehörigen Inhaltsbereich. Jeder Abschnitt sollte idealerweise eine Überschrift enthalten (z. B. <h2>).

<section>
  <h2>News</h2>
  <p>Latest updates and information.</p>
</section>

Das <article>-Element

Das <article>-Element stellt einen eigenständigen Inhaltsbereich dar, wie z. B. einen Blogbeitrag oder Nachrichtenartikel. Es kann auch verschachtelt werden, etwa in Kommentaren.

<article>
  <h2>How to Learn HTML</h2>
  <p>This article explains the basics of HTML...</p>
</article>

Das <aside>-Element

Das <aside>-Element enthält Inhalte, die sich auf den Hauptinhalt beziehen, aber nicht direkt Teil davon sind – wie z. B. Links, Werbung oder Zitate.

Das <footer>-Element

Das <footer>-Element kennzeichnet den abschließenden Bereich einer Seite oder eines Abschnitts, oft mit Urheberrechtsinformationen, Links oder Kontaktdaten.

Empfehlungen zur Verwendung

Verwende semantische Tags für alle strukturellen Zwecke – nicht nur <div>s! Das verbessert die Lesbarkeit, Wartbarkeit und Suchmaschinenoptimierung (SEO).