Content Management Frame

Webseitenhub für Mensch, Maschine und Internet

Semantisches HTML: Struktur vor Design

Sauberes HTML5 ohne div-Suppen. Jeder Block wird zum richtigen HTML-Element – für Menschen, Maschinen und Suchmaschinen.

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

Das CMF geht einen anderen Weg: Jeder Blocktyp wird in das semantisch korrekte HTML-Element übersetzt. Keine Abstraktionsschichten, keine Überladung, keine Tricks.

Vom Block zum HTML-Element

Jeder der 8 Blocktypen wird vom Renderer in exakt ein semantisches HTML-Konstrukt übersetzt:

Struktur

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

text
→ <p>, <strong>, <em>, <a>
Sanitized HTML. Nur 15 sichere Tags erlaubt.

Medien

image
→ <figure> + <figcaption>
Mit Alt-Text und Lazy-Loading. Ohne Caption: nur <img>.

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

Interaktion

buttons
→ <a class="btn">
Links als Buttons. Kein JavaScript für Navigation.

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

Spezial

html
→ Direktausgabe
Für Embeds und Sonderfälle. Nicht sanitized – volle Kontrolle.

blog_overview
→ <a>-Karten im Grid
Responsive 5/4/3/2/1 Spalten.

Was das CMF bewusst vermeidet

Kein...

  • Keine div-Wrapper um Absätze
  • Keine data-Attribute für Styling
  • Kein JavaScript für die Darstellung
  • Kein CSS-Framework (kein Bootstrap, Tailwind)
  • Keine verschachtelte Klassen-Hierarchie
  • Keine leeren Spacer-Elemente
  • Keine Inline-Styles im gerenderten HTML
  • Keine externen CDN-Einbindungen

Stattdessen...

  • CSS-Variablen für Farben, Abstände, Schriften
  • Minimales base.css (~550 Zeilen) für das Grundlayout
  • theme.css wird aus JSON automatisch generiert
  • custom.css für eigene Klassen
  • Kein einziges CSS-Framework geladen
  • HTML das auch ohne CSS lesbar ist
  • Pagesize unter 50 KB (ohne Bilder)
  • Erster Content-Paint in unter 200ms

Wer davon profitiert

Suchmaschinen

Google versteht semantisches HTML besser als div-Suppen. Korrekte Heading-Hierarchie, beschreibende Alt-Texte und saubere Link-Strukturen verbessern das Ranking direkt.

Was das CMF liefert:

  • Automatische Sitemap mit lastmod
  • Meta-Tags (Title, Description)
  • OpenGraph + Twitter-Card-Tags
  • Canonical-URLs gegen Duplicate Content
  • robots-Meta (noindex/nofollow steuerbar)

KI-Systeme

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

Was das CMF liefert:

  • Suchindex als strukturiertes JSON (öffentlich)
  • Klare Block-Struktur auch im Quellcode
  • Keine Framework-Artefakte die das Parsing stören
  • API liefert Inhalt als reines JSON – kein HTML-Scraping nötig

Barrierefreiheit

Screenreader navigieren per Heading-Ebene, erkennen Listen als Listen und lesen Links mit Kontext vor. Semantisches HTML ist die Grundlage für Barrierefreiheit.

Was das CMF liefert:

  • aria-current auf aktiven Navigationslinks
  • aria-label auf der Suchfunktion
  • Skip-Link zum Hauptinhalt
  • Keyboard-navigierbare Navigation
  • Alt-Texte auf allen Bildern erzwungen

Das Seiten-Layout im Detail

HTML-Grundgerüst

<header>
  <nav aria-label="Hauptnavigation">
    <ul>
      <li><a href="/" aria-current="page">Start</a></li>
      <li><a href="/kontakt">Kontakt</a></li>
    </ul>
  </nav>
</header>
<main id="main-content">
  <h1>Seitentitel</h1>
  <p>Absatz</p>
  <figure>
    <img src="..." alt="..." loading="lazy">
    <figcaption>Bildtext</figcaption>
  </figure>
</main>
<footer>...</footer>

Was jedes Element bedeutet

  • <header> – Kopfbereich der Seite, enthält Navigation
  • <nav> – Navigationsbereich 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" – Bilder erst laden wenn sichtbar
  • <footer> – Fußbereich, global auf allen Seiten

Jedes Element hat eine Bedeutung, nicht nur eine Darstellung. Das ist der Unterschied zwischen semantischem HTML und div-Suppe.

Meta-Daten und Head-Bereich

Automatisch generiert

  • title-Tag: Seitentitel + Site-Name
  • meta description aus dem Meta-Objekt
  • Canonical-URL gegen Duplicate Content
  • og:title, og:description, og:image, og:url
  • twitter:card, twitter:title, twitter:image
  • robots-Meta (steuerbar pro Seite)
  • Viewport-Meta für responsive Darstellung

CSS-Architektur

Drei CSS-Dateien, geladen in dieser Reihenfolge:

  1. base.css – Grundlayout, Navigation, Responsive (~550 Zeilen)
  2. theme.css – automatisch aus styles.json generiert (Farben, Fonts, Abstände)
  3. custom.css – eigene Klassen, überschreibt alles

Kein CSS-Framework, kein Purge-Step, kein PostCSS. Zusammen unter 20 KB – vor Kompression.

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 8 Blocktypen Philosophie