Semantisches HTML und Seitenstruktur

Bisher haben Sie gelernt, wie man Elemente auf einer Webseite erstellt. Nun verbessern wir die Struktur und Verständlichkeit Ihrer Inhalte.

Was ist semantisches HTML?

Semantisches HTML bedeutet, Elemente zu verwenden, die den Zweck Ihres Inhalts eindeutig beschreiben. Anstelle generischer Container wie <div> verwenden Sie aussagekräftige Tags wie:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

Warum ist das wichtig?

• Unterstützt Browser und Entwickler beim Verständnis der Seitenstruktur;
• Verbessert die Barrierefreiheit (Screenreader sind darauf angewiesen);
• Hilft Suchmaschinen, Ihre Inhalte besser zu interpretieren.

Häufig verwendete semantische Elemente

<header>

Repräsentiert den oberen Bereich einer Seite oder eines Abschnitts (Logo, Titel, Navigation).

<header>
  <h1>My Website</h1>
</header>

<nav>

Definiert Navigationslinks.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Gruppiert zusammengehörige Inhalte.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Repräsentiert eigenständigen Inhalt (z. B. Blogbeitrag).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Definiert den unteren Bereich einer Seite.

<footer>
  <p>&copy; My Website</p>
</footer>

Wie es zusammen aussieht