Das HTML-Grundgerüst & semantische Tags
Jedes HTML-Dokument hat denselben Rahmen: einen <head> für unsichtbare Metadaten und einen <body> für den sichtbaren Inhalt. Und der Inhalt selbst wird mit bedeutungstragenden Tags strukturiert — nicht mit endlosen divs.
Das Grundgerüst
HTMLjede Seite startet so
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine Seite</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- sichtbarer Inhalt kommt hierhin -->
<h1>Hallo Welt</h1>
</body>
</html>- <!doctype html>
- Schaltet den Browser in den modernen Standard-Modus. Muss ganz oben stehen.
- <html lang="de">
- Wurzel-Element. lang hilft Screenreadern und Übersetzern.
- <meta charset="utf-8">
- Zeichensatz. Ohne das werden Umlaute schnell zu „ä".
- <meta name="viewport" …>
- Die eine Zeile, ohne die nichts mobil-tauglich ist. Mehr dazu in „Responsive".
- <head>
- Unsichtbar: Titel, CSS-Verweise, Metadaten.
- <body>
- Alles, was man auf der Seite sieht.
Semantische Tags statt div-Suppe
HTML5 brachte Tags, die sagen, was ein Bereich ist. Sie sehen ohne CSS aus wie ein div — aber Suchmaschinen, Screenreader und du selbst beim Lesen wisst sofort, worum es geht.
HTMLlesbar & maschinenfreundlich
<body>
<header> <!-- Logo, Seitentitel -->
<nav>...</nav> <!-- Hauptnavigation -->
</header>
<main> <!-- der eine Hauptinhalt der Seite -->
<article> <!-- in sich abgeschlossen, z.B. ein Blogpost -->
<h1>Titel</h1>
<section>...</section>
<section>...</section>
</article>
<aside>...</aside> <!-- Randnotiz, verwandte Links -->
</main>
<footer>...</footer> <!-- Impressum, Copyright -->
</body>✅ Semantisch
HTML
<header>
<nav>
<a href="/">Start</a>
</nav>
</header>⚠️ div-Suppe (gleiche Optik, keine Bedeutung)
HTML
<div class="header">
<div class="nav">
<div class="nav-item">Start</div>
</div>
</div>
<div class="content">
<div class="post">
<div class="title">Titel</div>
</div>
</div>Die Tags, die 90 % ausmachen
📐 Struktur
header · nav · main · section · article · aside · footer · div
✍️ Text
h1–h6 · p · ul / ol / li · blockquote · strong · em · span
🔗 Interaktiv & Medien
a · button · img · input · label · form · table
Warum eigentlich? — Warum sind semantische Tags wichtiger als ihre Optik?
Weil zwei Gruppen die Bedeutung lesen, nicht die Pixel. Screenreader springen per „Hauptinhalt" direkt zum <main> und lesen Überschriften als Inhaltsverzeichnis. Suchmaschinen gewichten einen <h1> anders als einen fettgedruckten <div>. Mit reiner div-Suppe sind beide blind — die Seite sieht gut aus und ist trotzdem kaputt für ein Drittel deiner Nutzer.
Häufiger Denkfehler — Überschriften nach Größe wählen
<h1> bis <h6> sind eine Gliederungs-Hierarchie, keine Schriftgrößen. „Ich nehm ein h3, weil h2 zu groß ist" ist der Klassiker — und zerstört die Dokumentstruktur. Richtig: die Ebene nach Bedeutung wählen (genau ein h1 pro Seite, darunter h2 für Abschnitte) und die Größe per CSS anpassen.
Tiefer rein — Block vs. inline, Void-Elemente, Attribute
- Block-Elemente (div, p, h1, section) beginnen auf neuer Zeile und nehmen die volle Breite.
- Inline-Elemente (span, a, strong) fließen im Text mit, nur so breit wie ihr Inhalt.
- Void-Elemente (img, br, input, meta) haben keinen Inhalt und kein schließendes Tag.
- Attribute stehen im Start-Tag: <a href="…" class="…">. Sie konfigurieren das Element.