Content Management Frame

Das CMS, das Menschen und Maschinen gleichermaßen pflegen

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.

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
  • 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.

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:

  1. base.css – Grundlayout, Navigation, Umbrüche
  2. theme.css – automatisch aus den Theme-Werten erzeugt (Farben, Schriften, Abstände)
  3. 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 9 Blocktypen Philosophie