# Semantisches HTML

Kategorie: [Technisches SEO](https://seo-geo-glossary.com/de/glossar/kategorie/technisches-seo/) › [HTML, Mobile & Barrierefreiheit](https://seo-geo-glossary.com/de/glossar/kategorie/technisches-seo/html-mobile-barrierefreiheit/) · Auch genannt: HTML-Semantik

**Semantisches HTML** bedeutet, HTML-Elemente nach ihrer Bedeutung auszuwählen und nicht nach ihrem Aussehen. Eine Navigation steckt in `<nav>`, der Hauptinhalt in `<main>`, ein eigenständiger Beitrag in `<article>`. Das Aussehen übernimmt CSS.

## Wie funktioniert semantisches HTML?

web.dev beschreibt es so, dass man Inhalte danach strukturiert, was die Elemente bedeuten. Daraus entstehen Landmarken, an denen sich Screenreader und andere Hilfsmittel orientieren. Typische Elemente:

- `<header>`, `<nav>`, `<main>`, `<footer>` für den Seitenaufbau
- `<article>`, `<section>`, `<aside>` für Inhaltsblöcke
- `<h1>` bis `<h6>` für Überschriften
- `<strong>` und `<em>` für Betonung, wo `<b>` und `<i>` nur Fettschrift und Kursivschrift bedeuten

Ein `<div>` hat dagegen keine Bedeutung. Wer alles in `<div>`-Elemente packt, muss Rollen und Struktur mit zusätzlichem Aufwand nachrüsten.

## Semantisches HTML und SEO

Der klarste Nutzen liegt bei Barrierefreiheit und Wartbarkeit. Für die Google Suche ist die Rolle bescheidener. Google schreibt im SEO-Leitfaden, dass eine semantische Reihenfolge der Überschriften sehr gut für Screenreader ist, es aus Sicht der Google Suche aber keine Rolle spielt, wenn die Reihenfolge anders aussieht. Außerdem enthalte das Web im Allgemeinen keinen gültigen HTML-Code, weshalb sich die Suche selten auf semantische Bedeutungen aus der HTML-Spezifikation verlassen könne.

Ein Ranking-Vorteil allein durch semantische Elemente ist daher nicht belegt. Abweichend davon nennt das MDN-Glossar den Einfluss auf Suchmaschinen-Rankings als Vorteil semantischer Elemente. Brauchbarer Aufbau hilft aber Nutzern mit Hilfsmitteln und allen Programmen, die eine Seite maschinell auslesen müssen.

## Beispiel

Ohne Semantik:

```html
<div class="top"><div class="menu">…
<div class="content"><div class="title">Titel…
```

Mit Semantik:

```html
<header><nav>…</nav></header>
<main>
  <article>
    <h1>Titel</h1>
    …
  </article>
</main>
```

## Häufige Fehler

- Überschriften nur wegen der Schriftgröße gewählt.
- Mehrere `<main>`-Elemente auf einer Seite.
- Klickbare Elemente als `<div>` statt `<button>` oder `<a>`.

## Verwandte Begriffe

- [HTML](https://seo-geo-glossary.com/de/glossar/html/index.md)
- [HTML-Head](https://seo-geo-glossary.com/de/glossar/html-head/index.md)
- [HTML-Validierung](https://seo-geo-glossary.com/de/glossar/html-validierung/index.md)
- [Überschriften (H1–H6)](https://seo-geo-glossary.com/de/glossar/ueberschriften/index.md)
- [Barrierefreiheit](https://seo-geo-glossary.com/de/glossar/barrierefreiheit/index.md)
- [Überschriftenhierarchie](https://seo-geo-glossary.com/de/glossar/ueberschriftenhierarchie/index.md)

## Mehr dazu im searchVIU-Blog

- [Für KI-Agenten optimieren – Häufige Fehler und wie du sie behebst](https://www.searchviu.com/de/fuer-ki-browser-optimieren/)

## Quellen

- [Semantic HTML – web.dev Learn HTML](https://web.dev/learn/html/semantic-html?hl=de)
- [SEO-Einsteigerleitfaden – Google Search Central](https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=de)
- [Semantik – MDN Glossar](https://developer.mozilla.org/de/docs/Glossary/Semantics)

---

Stand: 7. Oktober 2026
URL: https://seo-geo-glossary.com/de/glossar/semantisches-html/
