# Semantisches HTML: Warum Struktur vor Design kommt

> Wie das CMF aus neun Blocktypen sauberes HTML5 erzeugt und warum das Suchmaschinen, Screenreadern und Maschinen hilft – mit Blick in den Quelltext.

Kanonische URL: https://cmf.brosemedien.de/news/semantisches-html

---

# Semantisches HTML: Warum Struktur vor Design kommt

Echte Überschriften, echte Listen, echte Links. Jeder Block wird zu passendem HTML – für Menschen, Suchmaschinen und Maschinen.

Viele Webseiten sehen gut aus – bis man in den Quellcode schaut. Verschachtelte `<div>`-Container, Framework-Klassen auf jedem Element, JavaScript, das die Darstellung steuert. Für den Browser kein Problem. Für Suchmaschinen, Screenreader und Maschinen ein Hindernis.

Das CMF geht einen anderen Weg: Jeder Blocktyp wird in das passende HTML-Element übersetzt, umgeben nur von einem schlichten Container. Kein CSS-Framework, keine Tricks.

## Vom Block zum HTML-Element

Jeder der 9 Blocktypen hat ein festes HTML-Muster. Außen steht ein schlichter Container (`<div>` oder `<section>`), darin das eigentliche Element:

### Text

**heading**
→ `<h1>` bis `<h6>`
Echte Überschriften, keine gestylten `<div>`s.

**text**
→ `<p>`, `<strong>`, `<em>`, `<a>` …
Gefiltertes HTML mit 17 erlaubten Tags.

**list**
→ `<ul>` / `<ol>` + `<li>`
Echte Listen, kein Pseudo-Markup.

### Bild und Layout

**image**
→ `<img>`, mit Bildunterschrift in `<figure>` + `<figcaption>`
Das `alt`-Attribut steht immer im Markup, dazu `loading` und – wenn gesetzt – `width`/`height`.

**columns**
→ CSS-Grid (`cols-2` bis `cols-5`)
Layout per CSS, nicht per JavaScript.

### Interaktion

**buttons**
→ `<a class="btn">`
Links, die wie Buttons aussehen. Kein JavaScript für Navigation.

**form**
→ `<form>` mit `<label>` je Feld
Pflichtfelder gekennzeichnet, Fehlermeldungen per `aria-describedby` am Feld, Auswahlgruppen in `<fieldset>`.

### Spezial

**html**
→ Direktausgabe
Für Tabellen, Embeds und Sonderfälle. Ungefiltert – hier bist du selbst für sauberes Markup verantwortlich.

**blog_overview**
→ `<a>`-Karten im Grid
Responsiv von fünf Spalten bis zu einer.

## Was das CMF bewusst vermeidet

### Kein …

- Kein CSS-Framework (kein Bootstrap, kein Tailwind)
- Kein JavaScript, das Inhalte erst sichtbar macht
- Keine data-Attribute für Styling
- Keine verschachtelte Klassen-Hierarchie
- Keine leeren Spacer-Elemente
- Keine Inline-Styles aus Text-Blöcken – im html-Block entscheidest du selbst
- Keine externen CDN-Einbindungen

### Stattdessen …

- CSS-Variablen für Farben, Abstände, Schriften
- base.css für Grundlayout, Navigation und Umbrüche
- theme.css, automatisch aus den Theme-Werten erzeugt
- custom.css für eigene Klassen
- Schriften vom eigenen Server
- HTML, das auch ohne CSS lesbar bleibt

## Wer davon profitiert

### Suchmaschinen

Eine saubere Überschriften-Hierarchie, beschreibende Alt-Texte und klare Links helfen Suchmaschinen, Inhalte richtig einzuordnen.

**Was das CMF liefert:**

- Sitemap mit Änderungsdatum
- Title und Meta-Description
- Open Graph und Twitter-Card
- Canonical-URLs gegen doppelte Inhalte
- robots-Angabe pro Seite
- Strukturierte Daten (JSON-LD)

Details im Beitrag [Gefunden werden ohne SEO-Plugin](/news/gefunden-werden-ohne-plugin).

### Maschinen

Sprachmodelle ziehen Informationen zuverlässiger aus strukturiertem Inhalt. Ein `<h2>` ist eindeutig eine Überschrift – ein `<div class="heading-xl mt-4">` ist es nicht.

**Was das CMF liefert:**

- Jede Seite als Markdown: `.md` an die Adresse hängen, etwa [dieser Beitrag](/news/semantisches-html.md)
- [llms.txt](/llms.txt) als Wegweiser zu allen Seiten
- JSON-LD mit Seitentyp, Datum und Hierarchie
- Suchindex als öffentliches JSON
- API liefert die Blöcke als JSON – kein HTML-Scraping nötig

### Barrierefreiheit

Screenreader springen von Überschrift zu Überschrift und erkennen Listen als Listen. Semantisches HTML ist die Grundlage, dazu kommen Skip-Link, `aria-current` in der Navigation und ein `alt`-Attribut an jedem Bild – als Pflichtfeld, das bei dekorativen Bildern leer bleiben darf.

Was sonst noch eingebaut ist und was an dir bleibt, steht im Beitrag [Barrierefrei ohne Aufwand](/news/barrierefrei-ohne-aufwand).

## Das Seiten-Layout im Detail

### HTML-Grundgerüst

```
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
<header>…</header>
<nav aria-label="Hauptnavigation">
  <ul class="nav-menu">
    <li class="nav-item"><a href="/" aria-current="page">Start</a></li>
    <li class="nav-item"><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>
<main id="main-content">
  <section><h1>Seitentitel</h1></section>
  <div><p>Absatz</p></div>
  <div><figure>
    <img src="…" alt="…" loading="lazy">
    <figcaption>Bildtext</figcaption>
  </figure></div>
</main>
<footer>…</footer>
```

### Was jedes Element bedeutet

- `skip-link` – erster Link der Seite, springt direkt zum Inhalt
- `<header>` – Kopfbereich mit den Inhalten aus Header/Footer
- `<nav>` – Hauptnavigation mit `aria-label`
- `aria-current="page"` – markiert die aktive Seite
- `<main>` – Hauptinhalt, Ziel des Skip-Links
- `<h1>` – Hauptüberschrift, genau eine pro Seite
- `<figure>` + `<figcaption>` – Bild mit Beschreibung
- `loading="lazy"` – Bild erst laden, wenn es in Sichtweite kommt
- `<footer>` – Fußbereich, auf allen Seiten gleich

Jedes Element hat eine **Bedeutung**, nicht nur eine Darstellung. Die schlichten Container um die Blöcke tragen keine – sie stören weder Screenreader noch Maschinen.

## Meta-Daten und Head-Bereich

### Automatisch erzeugt

- title-Tag: Seitentitel + Titel-Anhang
- meta description aus dem Meta-Objekt
- Canonical-URL gegen doppelte Inhalte
- og:title, og:description, og:image, og:url, og:locale
- twitter:card, twitter:title, twitter:image
- robots-Angabe (pro Seite steuerbar)
- JSON-LD passend zum Seitentyp
- Favicon-Links für vorhandene Icon-Dateien
- Viewport-Meta für responsive Darstellung

### CSS-Architektur

Drei CSS-Dateien, geladen in dieser Reihenfolge:

- **base.css** – Grundlayout, Navigation, Umbrüche
- **theme.css** – automatisch aus den Theme-Werten erzeugt (Farben, Schriften, Abstände)
- **custom.css** – eigene Klassen, überschreibt alles

Kein CSS-Framework, kein Build-Schritt, kein PostCSS.

Das Internet versteht keine Zauberei, sondern Struktur, Bedeutung und Relevanz. Semantisches HTML ist die Sprache, in der man mit dem Web spricht.

- [Anleitung fürs Internet](/anleitung-internet)
- [9 Blocktypen](/news/8-blocktypen)
- [Philosophie](/philosophie)