HTML-Semantik: So verstehen Google und Screenreader Deine Website

Hi und willkommen in der Kategorie HTML-Semantik!

Du kennst es sicherlich: Die Website sieht top aus, die Texte stehen. Und trotzdem scheint Google nicht so richtig zu verstehen, worum es auf Deiner Seite geht.

Warum?

Weil Suchmaschinen und Screenreader Deine Website nicht so sehen wie Du. Sie lesen den Code. Und wenn dort nur ein Haufen <div>- und <span>-Container steht, fehlt ihnen der Kontext.

Genau darum geht es hier: Wie Du mit den richtigen HTML-Tags die Bedeutung Deiner Inhalte mitlieferst und nicht nur ihr Aussehen.

info

In dieser Kategorie bekommst Du alles von den HTML-Grundlagen bis zur Praxis: wie semantisches HTML Deiner SEO hilft, wie es Screenreadern die Orientierung erleichtert und wie Du Deine Bilder sauber auszeichnest. Mit Code-Beispielen und an einigen Stellen mit Tipps für WordPress.

Warum ich über semantisches HTML schreibe

Nimm mal den Satz „Ich habe das Buch nicht gelesen.“

Betonst Du das „Ich“, hat vielleicht jemand anderes das Buch gelesen. Betonst Du das „nicht“, liegt der Fokus auf etwas ganz anderem.

Im Gespräch erledigen das Intonation und Emotionen. Im Web übernimmt das semantisches HTML. Setzt Du das „Ich“ in ein <em>-Tag, erkennen auch Browser und Searchbots, wo die Betonung liegt.

Das ist für mich der Kern des Themas. HTML ist das Skelett jeder Website, und jedes Tag hat seine eigene Rolle. Wählst Du das passende, profitierst Du gleich mehrfach:

• SEO: Laut John Mueller von Google hilft semantisches HTML Suchmaschinen, den Inhalt einer Seite besser zu verstehen.
• Barrierefreiheit: Screenreader erkennen zum Beispiel am <nav>-Tag, dass sie gerade eine Navigation vor sich haben.
• Wartung: Dein Code wird übersichtlicher und weniger fehleranfällig.
• Styling: Du kannst Styles direkt den Tags zuweisen und bekommst einen einheitlichen Look.

Aber keine Sorge: Du musst nicht alle Tags auswendig lernen. Ich zeige Dir die wichtigsten und die typischen Stolperfallen.

Was Dich in dieser Kategorie erwartet

Die Grundlagen

• Was ist HTML: alle Grundlagen für Anfänger: Du willst verstehen, was im Browser eigentlich passiert? Hier erfährst Du, wie aus HTML ein DOM-Baum wird, wie sich HTML seit 1991 entwickelt hat und welche Tags die Crawler von Suchmaschinen auswerten. Inklusive Grundgerüst zum Ausprobieren.
• Was ist semantisches HTML und warum solltest Du es 2024 noch nutzen?: Der Startpunkt der Kategorie. Hier lernst Du die wichtigsten semantischen Tags von <header> bis <figure> kennen und siehst, warum ein falsch eingesetztes <u> mehr schadet als nützt.

Semantik in der Praxis

• Semantisches HTML und SEO – was 90 % aller Websites übersehen: Für alle, die mehr aus ihren Rankings herausholen wollen. An Code-Beispielen siehst Du, wie <abbr>, <dfn> und <figure> Suchmaschinen zusätzlichen Kontext und Dir zusätzliche Keyword-Chancen geben. Und warum <div> trotzdem nicht verboten ist.
• Der Weg zur BFSG-Compliance 2025 durch semantisches HTML: Lies das, wenn Barrierefreiheit bei Dir auf der Agenda steht. Ich baue Schritt für Schritt ein Menü aus einem <div> mit drei Links zu einer echten Navigation um und zeige Dir im Accessibility Object Model, was ein Screenreader davon mitbekommt. Bonus: Eine klar ausgezeichnete Navigation kann Google auch für Sitelinks nutzen.
• Bilder Optimierung: Kompletter Leitfaden für Top-Ranking 2024: Der ausführlichste Artikel der Kategorie. Nimm ihn Dir vor, wenn Deine Bilder für Besucher schnell laden und in der Google-Bildersuche auftauchen sollen: Alt-Text, srcset, <figure> mit <figcaption>, strukturierte Daten, IPTC-Metadaten, Dateinamen und eine Checkliste zum Abhaken.

tipp

Mein Tipp zur Reihenfolge: Ist HTML für Dich noch Neuland, starte mit den Grundlagen. Kennst Du Dich schon aus, spring direkt in die Einführung in semantisches HTML. Danach suchst Du Dir aus, ob Dich gerade SEO, Barrierefreiheit oder Bilder mehr beschäftigen.

Dir begegnet unterwegs ein Begriff, den Du nicht kennst? Dann schau in mein SEO-Glossar.

Wo semantisches HTML an seine Grenzen stößt

Ich will Dir nichts vormachen: Semantisches HTML ist ein wichtiger Baustein, aber nicht alles.

Für SEO ist es nur ein Teil der technischen SEO. Den Rest, von der XML-Sitemap bis zur Ladezeit, findest Du in meinem Leitfaden zur technischen SEO.

Und für eine barrierefreie Website brauchst Du mehr als die richtigen Tags. Was noch dazugehört, erkläre ich Dir in meinem Leitfaden zur barrierefreien Website.

Mit sauberem Markup legst Du aber das Fundament, auf dem beides aufbaut.

Für wen diese Kategorie besonders wichtig ist

• Web- und Frontend-Entwickler, die sauberes, wartbares Markup schreiben wollen
• WordPress-Nutzer, die wissen möchten, was hinter dem Editor passiert, und ihre Bilder richtig auszeichnen wollen
• Marketing- und SEO-Verantwortliche, die verstehen wollen, warum der Code einer Seite für die Sichtbarkeit zählt
• Geschäftsführer und Projektverantwortliche, die einen Relaunch planen und ihre Website barrierefrei aufstellen wollen
• Einsteiger, die HTML von Grund auf lernen möchten

Was Du als Nächstes tun solltest

Mein Vorschlag für den Einstieg:

1. Lies die Einführung in semantisches HTML. Danach schaust Du Deinen eigenen Code mit anderen Augen an.
2. Prüfe Dein Markup. Lass Deinen HTML-Code durch den W3C-Validator laufen, wie ich es in den HTML-Grundlagen zeige, und schau, wo noch <div>-Container stehen, für die es ein passendes Tag gibt.
3. Nimm Dir Deine Bilder vor. Die Checkliste im Bilder-Leitfaden kannst Du Punkt für Punkt abhaken.

Du willst wissen, wie barrierefrei Deine Website schon ist? Dann teste sie mit dem kostenlosen BFSG-Check von Barrierenlos℠. Arbeitest Du mit Gutenberg, setzt Du die passenden Tags mit Semanticality™ um. Und falls Du bei der Umsetzung Unterstützung brauchst, buche Dir gerne eine kostenlose 1:1-Beratung bei mir.

Angrenzende Themen findest Du in den Kategorien Barrierefreiheit, SEO & SEA und Web-Dev. Alle Artikel auf einen Blick gibt’s in meinem Blog.

Am Ende wirst Du wissen, wie Du Deine Inhalte so auszeichnest, dass Menschen, Suchmaschinen und Screenreader sie gleichermaßen richtig verstehen.

Also, los geht’s!