Semantische Strukturelemente
Seit HTML5 gibt es semantische Elemente, die nicht nur den Inhalt anzeigen, sondern auch seine Bedeutung beschreiben. Statt überall <div> zu verwenden, nutzt man spezifische Tags, die klar machen, welche Rolle ein Bereich auf der Seite hat.
Das hat zwei Vorteile: Der Code wird lesbarer, und Suchmaschinen sowie Screenreader können die Seite besser verstehen.
Die wichtigsten Strukturelemente
| Element | Bedeutung |
|---|---|
| <header> | Kopfbereich der Seite oder eines Abschnitts — enthält oft Logo, Seitentitel oder Einleitungstext |
| <nav> | Navigationsbereich mit Links zu anderen Seiten oder Abschnitten |
| <main> | Hauptinhalt der Seite — darf nur einmal pro Seite vorkommen |
| <article> | Eigenständiger Inhalt, der auch außerhalb des Kontexts Sinn ergibt, z.B. ein Blogbeitrag |
| <section> | Thematischer Abschnitt innerhalb des Hauptinhalts |
| <aside> | Nebeninhalte, die zum Hauptinhalt gehören, aber nicht zentral sind, z.B. eine Seitenleiste |
| <footer> | Fußbereich der Seite — enthält oft Copyright, Impressum oder Kontaktdaten |
Typischer Seitenaufbau
So könnte das Grundgerüst einer strukturierten HTML-Seite aussehen:
<header> — Seitenkopf, Logo, Titel </header>
<nav> — Navigation </nav>
<main>
<article> — Hauptinhalt </article>
<aside> — Seitenleiste </aside>
</main><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine Seite</title>
</head>
<body>
<header>
<h1>Meine Webseite</h1>
</header>
<nav>
<a href="index.html">Start</a>
<a href="ueber.html">Über mich</a>
</nav>
<main>
<h2>Willkommen!</h2>
<p>Hier steht der Hauptinhalt.</p>
</main>
<footer>
<p>© 2024 Mein Name</p>
</footer>
</body>
</html>
Merke: Semantische Elemente verhalten sich wie
<div> — sie haben keinen besonderen visuellen Effekt. Ihr Vorteil liegt in der Bedeutung, die sie dem Inhalt geben.