Lädt...
HTML Semantische Elemente
Nach div und class/id benennen semantische Elemente Regionen nach Bedeutung.
Bedeutung vor Boxen
CSS stylt jedes Tag; Semantik dokumentiert Absicht. Hauptnavigation → nav. Einzigartiger Inhalt → main.
Direkte Antwort
Landmarks nutzen wenn die Bedeutung passt. Ein main. Nicht die ganze Site in ein article packen.
📊 Core landmarks
| Element | Typical meaning |
|---|---|
| header | Introductory or banner content for a page or section |
| nav | Major navigation links |
| main | Dominant unique content of this page |
| article | Independent composition (post, story, card that could stand alone) |
| section | Thematic grouping, usually with a heading |
| aside | Side note related to the surrounding content |
| footer | Closing content for a page or section |
Einfaches Seitengerüst
Banner und Links, main für einzigartigen Inhalt, footer zum Abschluss.
Simple semantic skeleton
html
HTML Code
<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>Gerüst lesen
- header oft mit nav
- ein main
- footer schließt ab
article, section und aside
In main: eigenständiger Beitrag, thematische Abschnitte, Randnotiz.
Article section and aside
html
HTML Code
<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>Zweites Beispiel lesen
- article kann allein stehen
- section mit Überschrift
- aside ist kein zweites main
Landmark vs div
Standardrolle? Landmark. Nur Layout-Wrapper? div.
Übung
- header/nav/main/footer
- Inhalt nur in main
- ein article
- genau ein main prüfen
Typische Fehler
- mehrere main
- section ohne Thema
- zufällige Landmark-Flut
Kurzfassung
- Semantik benennt Bedeutung
- ein main
- Landmark wenn Rolle passt
🧠 Testen Sie Ihr Wissen
Bereit zum Start
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
6
Fragen
70%
Zum Bestehen
∞
Zeit
∞
Versuche
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt