Responsive Design mit CSS Media Queries
Mobile-first Ansätze und praktische Media Queries, die deine Website auf allen Geräten zum Leben erwecken.
Zum ArtikelSemantisches HTML richtig strukturieren
Lerne, wie du deine HTML-Struktur sauberer und zugänglicher machst — mit den richtigen Elementen für jede Situation.
Warum Semantik wichtig ist
Semantisches HTML ist mehr als nur gültiger Code. Es geht darum,
deinen HTML-Strukturen eine Bedeutung zu geben, die sowohl
Browser als auch Screenreader verstehen können. Wenn du
<div> für alles nutzt, verliert deine Website
ihre Aussagekraft.
Die gute Nachricht? Es ist nicht kompliziert. Mit ein paar neuen Tags und einem besseren Verständnis dafür, wann man sie einsetzt, wird deine Website nicht nur barrierefrei, sondern auch SEO-freundlicher und wartbarer.
Die neuen HTML5 Struktur-Tags
HTML5 hat uns mehrere semantische Tags geschenkt, die speziell
für bestimmte Inhalte gedacht sind. Das Wichtigste? Sie sehen
oft genauso aus wie <div>, geben deinem Code
aber echte Bedeutung.
<header> — Für die obere Navigation und das Logo deiner Seite
<nav> — Explizit für Navigationsmenüs gedacht
<main> — Der Hauptinhalt der Seite (nur einmal pro Seite!)
<article> — Für in-sich-geschlossene Inhalte wie Blogbeiträge
<section> — Für thematisch zusammenhängende Inhalte
<aside> — Für Seitenleisten und ergänzende Informationen
<footer> — Für die Fußzeile mit Kontakt und Links
Der Unterschied zwischen <section> und
<article> verwirrt viele Anfänger. Hier die
Regel: Nutze <article> für etwas, das alleine
Sinn macht (wie dieser Beitrag hier).
<section> nutzt du für Teile einer Seite, die
thematisch zusammenhängen.
Von divs zu semantischem Code
Viele Websites sind noch voll mit
<div class="header"> und
<div class="footer">. Das funktioniert zwar,
aber es ist nicht sauber. Ein Screenreader kann
<div class="header"> nicht automatisch als
Header erkennen.
Stattdessen nutzt du einfach <header>. Das
ist nicht nur kürzer zu schreiben, sondern Assistenztechnologien
verstehen sofort, was da passiert. Und Google’s SEO-Algorithmen
mögen semantisches HTML auch lieber.
Nicht ideal:
<div class=”header”>
<div
class=”nav”></div>
</div>
Viel besser:
<header>
<nav></nav>
</header>
Die Migration ist einfach. Du brauchst kein großes Refactoring — fang einfach mit neuen Projekten an. Oder überarbeite alte Seiten Stück für Stück, wenn du gerade dran bist.
Heading-Hierarchie und Inhaltsstruktur
Semantik ist nicht nur über die großen Tags. Es geht auch darum,
deine Überschriften richtig zu strukturieren. Ein
<h1> sollte das Hauptthema der Seite sein —
nicht mehrmals vorkommen.
Viele Designer nutzen <h1> mehrmals, nur weil
die Größe passt. Das ist ein häufiger Fehler. Wenn du etwas
größer machen willst, aber es ist keine Hauptüberschrift, nutze
<h2>, <h3>, etc. und passe
die Größe mit CSS an.
h1: Eine pro Seite — das Hauptthema
h2: Hauptsektionen unter dem h1
h3: Unterabschnitte unter h2
h4-h6: Weitere Untergliederungen, nutze sie sparsam
Screenreader-Nutzer navigieren oft über Überschriften. Wenn deine Struktur chaotisch ist (h1 h3 h5), wird’s verwirrend. Eine logische Hierarchie macht deine Website für alle leichter zu verstehen.
Barrierefreiheit durch Semantik
Das Coole an semantischem HTML? Es macht deine Website automatisch zugänglicher. Menschen mit Sehbehinderungen, motorischen Einschränkungen oder kognitiven Unterschieden können deine Website besser nutzen.
Ein Screenreader kann <nav> von
<div class="nav"> unterscheiden. Nutzer
können direkt zur Navigation springen, ohne den ganzen Quellcode
zu durchsuchen. Das spart Zeit und Frust.
Außerdem ist Barrierefreiheit oft auch gut für SEO. Google bevorzugt Websites, die für alle Menschen funktionieren. Semantisches HTML ist also ein Win-Win: deine Nutzer profitieren, und deine Rankings auch.
Wenn du anfängst, semantisch zu denken, werden deine Websites einfach besser — für jeden.
Das Wichtigste zum Mitnehmen
Semantisches HTML ist kein kompliziertes Konzept. Es geht darum,
die richtigen Tags für den richtigen Inhalt zu nutzen. Statt
überall <div> zu schreiben, nutzt du
<header>, <nav>,
<article> und <footer>.
Nutze <header> und
<footer> statt
<div>-Wrappers
Setze deine Navigation in <nav>-Tags
Halte die Heading-Hierarchie logisch und nicht chaotisch
Nutze <article> für in-sich-geschlossene
Inhalte
Denk an Barrierefreiheit von Anfang an
Wenn du diese Grundlagen befolgst, wirst du schnell merken, dass dein Code sauberer wird. Und deine Websites werden zugänglicher — für Menschen und für Suchmaschinen. Das ist echtes Web-Design mit Verstand.
Verwandte Beiträge
Hinweis
Dieser Beitrag ist ein Bildungsressource für Web-Designer und Entwickler. Die gezeigten Best Practices basieren auf aktuellen HTML5-Standards und Accessibility-Richtlinien. Jede Website ist unterschiedlich — passe diese Konzepte an deine spezifischen Anforderungen an. Bei Fragen zu technischen Implementierungen konsultiere die offizielle W3C-Dokumentation oder einen erfahrenen Entwickler.