Semantisches HTML5: Semantik statt div-Suppe
Ersetzen Sie bedeutungslose Wrapper-divs durch semantische Elemente und verstehen Sie den Algorithmus für die Dokumentstruktur sowie die Hierarchie von Überschriften.
Semantisches HTML5: Semantik statt div-Suppe ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Div-Suppe — das Problem
Div-Suppe bezeichnet eine Seite, die vollständig aus <div>- und <span>-Elementen besteht. Sie benötigt Klassennamen, um die Struktur zu vermitteln, kann ohne diese Klassen von Screenreadern nicht verstanden werden und übermittelt Suchmaschinen keine Bedeutung.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>Die semantische Alternative
Ersetzen Sie bedeutungslose divs durch semantische Elemente, die ihren Zweck vermitteln. Die Struktur ist nun selbsterklärend und auch ohne CSS verständlich.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>Der Algorithmus für die Dokumentstruktur
Überschrift-Elemente (h1–h6) erstellen eine Dokumentstruktur. Screenreader-Nutzer navigieren über Überschriften. Unterstützende Technologien geben die Strukturebene bekannt. Halten Sie die Hierarchie logisch: h1 für den Seitentitel, h2 für wichtige Abschnitte und h3 für Unterabschnitte.
<time> — Maschinenlesbare Datumsangaben
Das Element <time> zeichnet Datums- und Zeitangaben mit einem maschinenlesbaren datetime-Attribut aus. Suchmaschinen verstehen Veranstaltungsdaten; Screenreader können formatierte Datumsangaben vorlesen.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
Das Element <address> umfasst die Kontaktinformationen des nächstgelegenen Artikels oder des Dokuments. Es muss sich nicht um eine Postadresse handeln – E-Mail-Adresse, Telefonnummer und Social-Media-Namen zählen ebenfalls.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> und <figcaption>
<figure> umfasst eigenständige Inhalte wie Bilder, Diagramme, Codebeispiele oder Videos. <figcaption> stellt eine Beschriftung bereit, die semantisch mit der figure verknüpft ist.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> und <cite>
<blockquote> kennzeichnet ein längeres Zitat. Verwenden Sie das cite-Attribut für die Quell-URL. Das Element <cite> kennzeichnet den Titel eines kreativen Werks (Buch, Artikel, Film).
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> und <summary>
Die Kombination aus <details> und <summary> erstellt ohne JavaScript ein natives Akkordeon- bzw. Disclosure-Widget. Der Browser übernimmt das Öffnen und Schließen, die Tastaturinteraktion und die Barrierefreiheit automatisch.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — Hervorgehobener Text
<mark> repräsentiert Text, der zur Orientierung hervorgehoben ist – etwa einen Treffer in einem Suchergebnis. Semantisch unterscheidet sich dies davon, Text mit CSS gelb zu gestalten.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — Abkürzungen
Umschließen Sie Abkürzungen und Akronyme mit <abbr> und geben Sie den vollständigen Begriff im title-Attribut an. Screenreader und Browser stellen Nutzern die ausgeschriebene Form beim Überfahren mit dem Mauszeiger bereit.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>Wann Sie <div> und <span> verwenden
Beide sind weiterhin nützlich. <div> ist die richtige Wahl für einen generischen Block-Wrapper ohne semantische Bedeutung – etwa Layout-Container oder Komponentenwurzeln in React. Verwenden Sie <span> für Inline-Styling-Hooks ohne semantische Bedeutung.
Schnelltest
Welches HTML-Element erstellt ohne JavaScript ein natives auf- und zuklappbares Disclosure-Widget?
Zusammenfassung: Semantisches HTML5
Ersetzen Sie Div-Suppe durch semantische Elemente: header, nav, main, article, section, aside, footer. Verwenden Sie time für Datumsangaben, figure/figcaption für Medien, details/summary für Akkordeons und mark für Hervorhebungen. Reservieren Sie div und span für Layout-Container ohne semantische Bedeutung.
Häufig gestellte Fragen
Ist die Lektion „Semantisches HTML5: Semantik statt div-Suppe“ kostenlos?
Ja — der vollständige Text von „Semantisches HTML5: Semantik statt div-Suppe“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Semantisches HTML5: Semantik statt div-Suppe“?
Ersetzen Sie bedeutungslose Wrapper-divs durch semantische Elemente und verstehen Sie den Algorithmus für die Dokumentstruktur sowie die Hierarchie von Überschriften. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Semantisches HTML5: Semantik statt div-Suppe“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Formularsteuerelemente: input-Typen, select, textarea
- ARIA und Barrierefreiheit: label, role, aria-*
- Semantisches HTML5: Semantik statt div-Suppe
- Attribute zur Formularvalidierung