💡 1. Anatomie eines HTML5-Dokuments
Jedes moderne HTML-Dokument beginnt mit dem Doctype und der Grundstruktur im Head-Bereich. Hier werden Metadaten, Zeichenkodierung und Viewport für responsive Endgeräte festgelegt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Tech-Blog | Webentwicklung</title>
</head>
<body>
<!-- Sichtbarer Seiteninhalt -->
</body>
</html>🏗️ 2. Semantische Landmark-Elemente
Früher wurden Webseiten aus unzähligen bedeutungslosen <div class="header">-Verschachtelungen gebaut (sog. Div-Suppe). HTML5 bietet aussagekräftige semantische Tags, die Suchmaschinen (SEO) und Screenreadern den genauen Zweck eines Bereichs vermitteln:
Die Haus-Architektur: <header> ist das Dach mit Hausnummer und Eingangsschild, <nav> ist der Wegweiser im Flur, <main> ist das Wohnzimmer (wo das Leben stattfindet), <aside> ist das Bücherregal an der Seite und <footer> das Fundament mit Impressum und Baujahr.
Screenreader & Google Bot: Blinde Nutzer können mit Tastatur-Shortcuts direkt von Landmark zu Landmark springen (z.B. Navigation überspringen und sofort zu <main> hüpfen). Eine bloße <div> bietet keinerlei Orientierung!
📑 3. Cheat-Sheet: HTML5 Semantik-Tags
| Element | Bedeutung & Zweck | Regel / Best Practice |
|---|---|---|
<header> |
Einleitender Bereich einer Seite oder eines Artikels | Kann mehrfach verwendet werden (z.B. Seiten-Header & Artikel-Header) |
<nav> |
Haupt-Navigationslinks | Nur für bedeutsame Navigationsblöcke, nicht für jeden Link |
<main> |
Der zentrale Hauptinhalt des Dokuments | Darf nur 1x pro Seite existieren |
<article> |
Eigenständiger, wiederverwendbarer Inhalt (Blogpost, News) | Sollte auch außerhalb der Seite eigenständig Sinn ergeben |
<section> |
Thematisch zusammenhängender Unterabschnitt | Sollte fast immer eine eigene Überschrift (<h2>..<h6>) besitzen |
<aside> |
Randnotizen, verwandte Beiträge, Autoren-Bio | Inhalt ist tangential zum Hauptartikel |
<footer> |
Fußzeile mit Metadaten, Copyright, rechtlichen Links | Schließt Dokument oder Artikel ab |
🎯 Aufgaben & Checkliste in aufgabe.html
Achte darauf, dass <main> nicht innerhalb von <header> oder <footer> verschachtelt wird. Die Navigation <nav> nutzt semantisch am besten eine ungeordnete Liste <ul> > <li> > <a>.