Springe zum Inhalt

Was bedeutet »semantisches HTML«?

Der Begriff Semantik stammt aus dem Griechischen und ist gleichbedeutend mit "Bedeutungslehre". Die Semantik ist ein Teilgebiet der Sprachwissenschaften.

Im Zusammenhang mit HTML strebt man nach "bedeutungsvollem" Quellcode. Dies soll heißen, dass die Inhalte einer Internetseite sinnvoll gegliedert werden, womit man dem Text eine Struktur gibt. Ein Text kann folgende Struktur-Elemente enthalten:

  • Titel
  • Haupt- und Unterüberschriften
  • Absätze
  • Hervorhebungen (fett, kursiv, farbig hevorgehoben)
  • Auflistungen
  • Zitate
  • Quellenangaben
  • Kopf- und Fußzeile

Setzt man die HTML-Elemente H1 bis H6, p, blockqoute, strong, ul, table etc. nach ihrer Bedeutung der Inhalte sinnvoll ein, so entsteht ein semantisch, ausgezeichneter Text (Markup). Verlinkt man dann noch die inhaltlich zusammengehörigen Texte, so spricht man von einem Hypertext. Alles zusammengenommen ergibt dann die Auszeichnungssprache HTML = Hypertext Markup Language.

Wichtig: HTML dient der strukturellen Auszeichnung der Inhalte. Das Layout, also die Darstellung der einzelnen (Text-) Elemente, sollte allein über Cascading Style Sheets (CSS) erfolgen.

Semantik = Bedeutungsvolle Texte

Ein häufiger Fehler ist, das die H2-Überschriftenebene aus optischen Gründen auf der 1. Ebene eingestzt wird. Hierdurch wird dem Text seine logische Struktur entzogen und ist für Menschen, die mit der Tastatur von Überschrift zu Überschrift navigieren oder einen Screenreader (Vorlese-Software für Sehbehinderte/Blinde) benutzen, verwirrend.

Die meisten der gängigen Analysetools zur Suchmaschinenoptimierung (SEO) prüfen unter anderem auch die Überschriften-Hierarchie.

Screenshot: Ausschnitt aus dem Ergebnis der SEO-Analyse von seorch.de der Startseite von Spiegel Online vom 13.09.2018

HTML5: Semantische Elemente zur Strukturierung einer Website
Während man bislang die einzelnen Elemtente einer Website, wie z.B. Kopf, Fuß und Hauptteil mit Hilfe von DIV-Elementen getrennt hat, stellt HTML5 spezifische Strukturierungselemente zur Verfügung. Dazu zählen:

  • footer
  • header
  • main
  • nav
  • article
  • section

 

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen