EMZETT.Semantisches HTML bedeutet: Du wählst Elemente nach ihrer Bedeutung, nicht nach dem Aussehen. Das hilft Screenreadern, Suchmaschinen, Tastaturnutzern und deinem zukünftigen Ich.
Gliederungselemente
Ergebnis
| Element | Bedeutung |
|---|---|
<header> | Kopfbereich einer Seite oder eines Abschnitts |
<nav> | wichtige Navigation |
<main> | der Hauptinhalt, genau einmal pro Seite |
<article> | in sich geschlossener Beitrag (Blogartikel, Kommentar, Produktkarte) |
<section> | thematischer Abschnitt, mit Überschrift |
<aside> | Randbemerkung, Seitenleiste |
<footer> | Fußbereich |
<figure>, <figcaption> | Abbildung mit Beschriftung |
<address> | Kontaktinformation |
<details>, <summary> | aufklappbarer Bereich |
<dialog> | Dialogfenster |
div und span: neutrale Container
Wenn kein passendes semantisches Element existiert, nimmst du <div> (Block) oder <span> (im Text). Sie haben keine Bedeutung und dienen als Haken für CSS und JavaScript.
Ergebnis
Faustregel: Gibt es ein Element, das die Bedeutung ausdrückt, nimm es. Erst danach div/span.
Aufklappbare Bereiche ohne JavaScript
Ergebnis
<details> ist per Tastatur bedienbar und für Screenreader verständlich: ideal für FAQ.
Dialoge
Ergebnis
showModal() verdunkelt den Hintergrund, sperrt ihn für Klicks, verwaltet den Fokus und schließt mit Esc.
Landmarks und Screenreader
Semantische Elemente erzeugen automatisch Landmarks (Orientierungspunkte). Screenreader-Nutzer springen damit direkt zu "Hauptinhalt" oder "Navigation":
| Element | Landmark |
|---|---|
<header> (oberste Ebene) | banner |
<nav> | navigation |
<main> | main |
<aside> | complementary |
<footer> (oberste Ebene) | contentinfo |
<form> mit Namen, <section> mit Namen | form, region |
Überschriften-Hierarchie
Die Überschriften bilden das Inhaltsverzeichnis der Seite. Prüfe es: Wenn du nur die Überschriften liest, sollte die Seite verständlich sein. Keine Ebene überspringen, nur eine <h1>.
Typische Fehler
- Alles aus
divs bauen ("Div-Suppe") <section>ohne Überschrift- Mehrere
<main>oder<main>im<article> <nav>für jede Linkgruppe (nur für wichtige Navigation)- Klickbare
divs statt<button>oder<a>
Merke
- Semantische Elemente:
header,nav,main,article,section,aside,footer - Genau ein
<main>;<section>braucht eine Überschrift <details>/<summary>und<dialog>bringen Funktion ohne viel JavaScriptdiv/spannur, wenn nichts Passenderes existiert- Gute Struktur hilft Screenreadern, SEO und Wartbarkeit
Aufgabe
Gestalte die Struktur einer Blogseite mit Kopf, Navigation, zwei Artikeln, Seitenleiste und Fuß. Verwende nur semantische Elemente.