Semantisches HTML

In dieser Lektion geht es um semantische HTML-Elemente. Sie beschreiben die Bedeutung von Inhalten – nicht deren Aussehen.

1. Was bedeutet „semantisch“?

Semantisches HTML verwendet Elemente, deren Name und Zweck die Bedeutung des Inhalts klar beschreiben.

Ein Browser, eine Suchmaschine oder ein Screenreader kann dadurch besser verstehen, was ein Inhalt ist.

Semantik ist unabhängig von CSS. Sie beschreibt Struktur und Bedeutung, nicht Design.

2. Warum ist semantisches HTML wichtig?

3. Strukturierende Hauptelemente

HTML5 definiert spezielle Elemente für typische Seitenbereiche.

4. <header>

Der <header> enthält einleitende Inhalte wie Überschriften, Logos oder Metainformationen. 
<header>
  <h1>Meine Website</h1>
  <p>Ein kurzer Untertitel</p>
</header>

5. <nav>

<nav> enthält Haupt-Navigationslinks. 
<nav>
  <a href="index.html">Start</a>
  <a href="kontakt.html">Kontakt</a>
</nav>
Nicht jede Linkliste ist eine Navigation.

6. <main>

<main> enthält den einzigartigen Hauptinhalt der Seite.

7. <section> vs. <article>

Beide strukturieren Inhalte, aber mit unterschiedlicher Bedeutung. 
<article>
  <h2>Blogpost</h2>
  <p>Text des Artikels...</p>
</article>

8. <footer>

Der <footer> enthält ergänzende Informationen wie Copyright, Autor, Links oder Metadaten. 
<footer>
  <p>© 2026</p>
</footer>

9. Komplettes Strukturbeispiel

<body>
  <header>...</header>
  <nav>...</nav>

  <main>
    <section>
      <article>...</article>
    </section>
  </main>

  <footer>...</footer>
</body>

10. Zusammenfassung