Semantisches HTML: 10 häufige Fehler und die richtigen Tags

Eine HTML-Seite kann perfekt aussehen und trotzdem schlecht geschrieben sein. Überall div, Fettschrift mit b, Überschriften nach Schriftgröße gewählt: Der Browser zeigt alles klaglos an, aber Screenreader, Suchmaschinen und deine Kollegen verlieren die Information, die die Tags eigentlich tragen sollten. Genau das ist semantisches HTML: das Tag verwenden, das sagt, was der Inhalt ist, und nicht nur, wie er aussehen soll. Hier sind die zehn häufigsten Fehler und ihre Korrektur.

Warum Semantik zählt

• Barrierefreiheit. Ein Screenreader bietet an, direkt zur Navigation, zum Hauptinhalt oder zum Fußbereich zu springen. Das gelingt ihm nur, wenn nav, main und footer existieren. Mit div hört der Nutzer eine flache Seite.
• SEO. Suchmaschinen stützen sich auf die Struktur, um Hauptinhalt, Überschriften und die Beziehungen zwischen Abschnitten zu erkennen. Eine saubere Hierarchie wird sofort verstanden, ein Wust aus div muss erraten werden.
• Wartbarkeit. <nav> liest sich ohne Kommentar, <div class="nv2"> zwingt dich, das CSS zu öffnen. Semantischer Code ist auch in sechs Monaten noch lesbar.
• Verhalten geschenkt. Ein button löst per Tastatur aus, ein a öffnet sich per Mittelklick in einem neuen Tab, ein label vergrößert die Klickfläche einer Checkbox. Alles Dinge, die du von Hand nachbauen musst, wenn du mit div trickst.

Fehler 1: div statt header, nav, main und footer

Der Aufbau einer Seite hat eigene Tags. Eine div mit der ID header ist für den Browser keiner.

Mach das nicht:

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Mach das:

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Jedes dieser Tags trägt eine implizite Rolle (banner, navigation, main, contentinfo), die assistive Technologien erkennen. main darf auf der Seite nur einmal vorkommen; header und footer dürfen sich innerhalb eines article wiederholen.

Fehler 2: eine Bildunterschrift in einem Absatz

Ein Bild und seine Bildunterschrift bilden eine Einheit. Das Tag figure verbindet beide, figcaption trägt die Unterschrift.

Mach das nicht:

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Mach das:

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure passt genauso zu einem Codeblock, einem Diagramm oder einem Zitat mit Bildunterschrift.

Fehler 3: b und i zur Betonung

b und i beschreiben ein Aussehen. strong und em beschreiben eine Absicht: hohe Wichtigkeit, Betonung eines Wortes. Ein Screenreader kann die Stimme bei em heben, bei i nie.

Mach das nicht:

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Mach das:

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b und i sind nicht verboten: Sie haben einen genauen Einsatzzweck, ein hervorgehobenes Stichwort ohne besondere Wichtigkeit bei b, ein fremdsprachiger Begriff oder ein Schiffsname bei i. Wenn du nur dekoratives Fett willst, ist das CSS: font-weight: 700.

Fehler 4: eine kaputte Überschriften-Hierarchie

Die Tags h1 bis h6 bilden die Gliederung des Dokuments. Ein h4 zu wählen, weil es „die richtige Größe“ hat, zerbricht diese Gliederung: Screenreader springen von Überschrift zu Überschrift, Suchmaschinen leiten daraus die Struktur ab.

Mach das nicht:

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Mach das:

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Nur ein h1 pro Seite, keine übersprungene Ebene, und die Größe regelt das CSS. Wenn eine Überschrift optisch klein sein soll, ist das h2 { font-size: 1.1rem }, nicht h5.

Fehler 5: section und article verwechselt oder für alles benutzt

article bezeichnet einen eigenständigen Inhalt, der außerhalb der Seite seinen Sinn behält: ein Blogbeitrag, ein Kommentar, eine Produktkarte. section fasst einen thematischen Inhalt innerhalb eines Ganzen zusammen und sollte immer eine Überschrift haben. Eine div bleibt die richtige Wahl für eine reine Layout-Gruppierung.

Mach das nicht:

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Mach das:

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Fehler 6: ein Link als Button und umgekehrt

Ein Link (a) führt irgendwohin. Ein Button (button) löst eine Aktion aus: absenden, ein Menü öffnen, ein Fenster anzeigen. Ein a href="#" mit Click-Handler ist weder das eine noch das andere, und eine klickbare div ist weder über die Tastatur noch für Screenreader erreichbar.

Mach das nicht:

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Mach das:

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="https://www.gekkode.com/de/tarifs/">Voir les tarifs</a>

Der native button reagiert auf Enter und Leertaste, bekommt den Tastaturfokus und meldet seine Rolle. All das geht mit einer div verloren.

Fehler 7: Links, die „hier klicken“ heißen

Ein Linktext muss sein Ziel allein ankündigen: Screenreader bieten die Liste aller Links einer Seite ohne Kontext an, und Suchmaschinen nutzen den Ankertext, um die Zielseite einzuordnen.

Mach das nicht:

Pour nos tarifs, <a href="https://www.gekkode.com/de/tarifs/">cliquez ici</a>.

Mach das:

Consultez <a href="https://www.gekkode.com/de/tarifs/">nos tarifs 2026</a>.

Fehler 8: Bilder ohne alt

Das Attribut alt beschreibt das Bild für alle, die es nicht sehen: Screenreader, nicht geladenes Bild, Suchmaschine. Es ist Pflicht. Ein rein dekoratives Bild bekommt ein leeres alt, kein fehlendes.

Mach das nicht:

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Mach das:

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

Der Dateiname ist nie eine Beschreibung. Beschreibe, was das Bild zur Aussage beiträgt.

Fehler 9: Formularfelder ohne label

Ein Text neben einem Feld ist nicht mit ihm verbunden. Das Tag label, über for und id zugeordnet, kündigt das Feld im Screenreader an und macht den Text klickbar, um den Fokus zu setzen.

Mach das nicht:

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Mach das:

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

Der placeholder ersetzt das label nicht: Er verschwindet bei der Eingabe und sein Kontrast ist oft zu schwach. Weitere Best Practices für HTML-Formulare ergänzen diese hier.

Fehler 10: Inline-Styles und nachgebaute Listen

Zwei schlechte Gewohnheiten, die Struktur und Darstellung vermischen. Der Inline-Style verhindert, dass sich das Aussehen ohne Eingriff ins HTML weiterentwickeln lässt; die mit Bindestrichen und br nachgebaute Liste ist für den Browser keine Liste, er kann sie weder ankündigen noch zählen.

Mach das nicht:

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Mach das:

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Das eigene HTML prüfen

Drei schnelle Kontrollen, der Reihe nach:

1. Der Validator des W3C meldet falsch geschlossene Tags, unbekannte Attribute und fehlende alt.
2. Der Tab Barrierefreiheit in den Entwicklerwerkzeugen (Chrome, Firefox) zeigt den Baum so, wie ein Screenreader ihn wahrnimmt: Erscheinen deine header, nav und main dort als Regionen, stimmt die Struktur.
3. Die Tastaturnavigation: Tabbe durch die Seite. Alles Klickbare muss den Fokus bekommen, in einer nachvollziehbaren Reihenfolge. Eine klickbare div fällt hier durch.

Die vollständige Liste der Struktur- und Inhalts-Tags findest du in 20 HTML5-Tags, die man kennen sollte. Und sobald die Seite strukturiert ist, übernimmt das CSS, zum Beispiel um Elemente zu zentrieren, ohne das HTML anzufassen.