Ersetze deine anonymen divs durch Tags, die deiner Struktur Bedeutung geben.
Diese Lektion in Kodokon öffnenEine Seite, die komplett aus div-Elementen besteht, funktioniert, aber sie sagt nichts aus: nicht Screenreadern, nicht Suchmaschinen und nicht der Kollegin, die deinen Code in sechs Monaten übernimmt. Semantische Tags beschreiben die Rolle jedes Bereichs: header, nav, main, article, section, footer.
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header fasst den Seitenkopf zusammen (Logo, Navigation), footer die abschließenden Informationen (rechtliche Hinweise, sekundäre Links). main enthält den Hauptinhalt und muss auf der Seite einzigartig sein. nav kennzeichnet einen Navigationsbereich: die Hauptnavigation, einen Brotkrumenpfad oder ein Inhaltsverzeichnis.
Die kniffligste Unterscheidung: article gegenüber section. Faustregel: Ergibt der Block außerhalb des Kontexts Sinn (ein Blog-Beitrag, ein Kommentar, eine Produktkarte), ist es ein article. Ist es eine thematische Gruppierung innerhalb eines Inhalts mit eigener Überschrift, ist es eine section.
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>Denkaufgabe: Wie würdest du auf einer E-Commerce-Produktseite die Liste der Kundenbewertungen auszeichnen? Jede Bewertung hat einen Autor, ein Datum und einen für sich stehenden Inhalt: Jede Bewertung ist also ein article, und der „Kundenbewertungen“-Block, der sie mit seiner Überschrift zusammenfasst, ist eine section.