Was bedeutet "semantische Struktur"?

Semantik bedeutet: ein HTML-Element hat eine Bedeutung – also nicht nur, wie etwas aussieht, sondern was es repräsentiert.

HTML5 hat viele neue Elemente eingeführt, um Seiten logisch zu strukturieren – das hilft Browsern, Suchmaschinen und Screenreadern, Inhalte besser zu verstehen.

<header> – Kopfbereich

Zweck: Enthält einleitende Inhalte oder Navigationselemente (z. B. Logo, Überschrift, Menü).

<header>
  <h1>Seitentitel</h1>
  <nav>...</nav>
</header>

Beispielausgabe:

<nav> – Navigationsbereich

Zweck: Definiert eine Gruppe von Navigationslinks (z. B. Hauptmenü oder Footer-Links).

<nav>
  <ul>
    <li><a href="index.html">Start</a></li>
    <li><a href="about.html">Über mich</a></li>
    <li><a href="contact.html">Kontakt</a></li>
  </ul>
</nav>

Beispielausgabe:

<main> – Hauptinhalt

Zweck: Enthält den einzigartigen Hauptinhalt einer Seite. Sollte nur einmal pro Seite vorkommen.

<main>
  <h2>Willkommen!</h2>
  <p>Hier steht der Hauptinhalt der Seite.</p>
</main>

Beispielausgabe:

<section> – Thematischer Abschnitt

Zweck: Gruppiert inhaltlich zusammengehörende Bereiche innerhalb von <main>.

<section>
  <h2>Unsere Leistungen</h2>
  <p>Wir bieten Webentwicklung und E-Commerce-Beratung.</p>
</section>

Beispielausgabe:

<article> – Eigenständiger Inhalt

Zweck: Für eigenständige, in sich geschlossene Inhalte (z. B. Blogpost, Newsbeitrag).

<article>
  <h2>Neuigkeiten</h2>
  <p>Heute starten wir unsere neue Website!</p>
</article>

Beispielausgabe:

<aside> – Zusatzinformationen

Zweck: Für Randinhalte, z. B. Werbung, Zusatzinfos, verwandte Links.

<aside>
  <h3>Verwandte Themen</h3>
  <ul>
    <li><a href="#">HTML5 Grundlagen</a></li>
    <li><a href="#">CSS Einführung</a></li>
  </ul>
</aside>

Beispielausgabe:

<footer> – Fußbereich

Zweck: Enthält Abschlussinformationen: Copyright, Links, Kontakt, rechtliche Hinweise.

<footer>
  <p>© 2026 Meine Website</p>
</footer>

Beispielausgabe:

🧩 Gesamtstruktur einer modernen HTML5-Seite

<header>...</header>
<nav>...</nav>
<main>
  <section>
    <article>...</article>
  </section>
  <aside>...</aside>
</main>
<footer>...</footer>

Merke: Diese Struktur macht deinen Code lesbarer, suchmaschinenfreundlicher und barrierefrei 💡