html-einfach.de

Semantic first

Semantisches HTML, Barrierefreiheit und SEO – verständlich erklärt.

Praxiswissen für Websites, die zugänglich, schnell und gut auffindbar sind: von der Wahl des richtigen HTML-Elements über WCAG und BFSG bis zur Sichtbarkeit in Suchmaschinen und KI-Systemen.

Mit semantischem HTML starten Zu den Themenbereichen

Die Themen im Überblick

Fünf Bereiche, ein roter Faden

Jeder Bereich hat eine eigene Übersichtsseite und bündelt darunter vertiefende Artikel.

  • Semantisches HTML

    Das Fundament: Inhalte mit den Elementen auszeichnen, die ihre Bedeutung beschreiben – von header, nav, main und footer bis zur sauberen Überschriften-Hierarchie.

  • Barrierefreie Komponenten

    Formulare, Menüs, Dialoge, Tabs: die typischen Bausteine, jeweils mit Tastatur und Screenreader bedienbar – und mit so wenig ARIA wie möglich.

  • WCAG & BFSG

    Die Regeln und das Gesetz dahinter: WCAG 2.2, die vier Prinzipien, Konformitätsstufen – und was das BFSG in der Praxis von Websites verlangt.

  • SEO & KI

    Wie dieselbe saubere Struktur, die Barrierefreiheit schafft, auch Suchmaschinen und KI-Systemen hilft, deine Inhalte zu verstehen.

  • Ressourcen

    Zum Nachschlagen und Mitnehmen: Snippets, Cheat-Sheets, ein Glossar und erprobte Tools für den Alltag.

  • Alles auf einen Blick

    Fünf Bereiche, die aufeinander aufbauen – Semantik als gemeinsame Wurzel.

Der Zusammenhang

Warum Semantik alles verbindet

Barrierefreiheit, SEO und Performance werden oft als drei getrennte Aufgaben behandelt – mit eigenen Tools, eigenen Checklisten, eigenen Zuständigkeiten. In meiner Erfahrung teilen sie sich eine gemeinsame Wurzel: eine ehrliche, semantische Struktur.

Ein korrekt ausgezeichneter <button> ist mit der Tastatur bedienbar und für einen Screenreader verständlich, für eine Suchmaschine eindeutig und kommt ohne nachgerüstetes JavaScript aus. Eine einzige gute Entscheidung zahlt auf alle Ziele gleichzeitig ein.

Wie das im Detail funktioniert: Was ist semantisches HTML? →

Hier anfangen

Gute Einstiegsartikel

Alle fünf Bereiche sind inhaltlich vollständig. Diese Artikel sind ein guter Start:

  • Was ist semantisches HTML?

    Bedeutung statt Aussehen: Was semantisches HTML ausmacht und warum es Browsern, Screenreadern und Suchmaschinen hilft, deine Inhalte zu verstehen.

  • Landmarks & Dokument-Outline

    Wie ARIA-Landmarks und die Dokument-Outline funktionieren und Screenreader-Nutzern schnelle Navigation durch deine Seite ermöglichen.

  • Die erste Regel von ARIA

    Kein ARIA ist besser als schlechtes ARIA: Warum natives HTML zuerst kommt und wann ARIA wirklich nötig ist.

  • BFSG einfach erklärt

    Das Barrierefreiheitsstärkungsgesetz verständlich: Wen es betrifft, was ab wann gilt und welche Pflichten entstehen. Keine Rechtsberatung.

  • Semantik & SEO: Wie sauberer Code rankt

    Warum semantisches HTML die Grundlage für gutes Ranking ist und wie Suchmaschinen strukturierte Inhalte besser verstehen.

  • Semantik, Barrierefreiheit, SEO & Performance

    Wie semantisches HTML, Barrierefreiheit, SEO und Performance zusammenhängen und sich gegenseitig verstärken.

Jakob Sommer

Wer dahinter steckt

Ich bin Jakob Sommer und arbeite seit rund zwei Jahrzehnten als Webdesigner und Entwickler. An Werkzeugen, Trends und Frameworks hat sich vieles geändert – dass sich sauberes, semantisches Markup auszahlt, gehört nicht dazu.

html-einfach.de ist mein Versuch, dieses Wissen so weiterzugeben, wie ich es mir selbst oft gewünscht hätte: praxisnah, ohne Dogma und immer am echten Code orientiert.

Mehr über mich und dieses Projekt →