←  Alle Begriffe
S
Frontend & Web Development

Semantisches HTML

Semantisches HTML verwendet Elemente nach ihrer Bedeutung und verbessert Struktur, Barrierefreiheit und maschinelle Verständlichkeit.

Semantisches HTML sorgt dafür, dass die Struktur und Funktion von Inhalten direkt aus dem verwendeten Markup hervorgehen. Überschriften, Navigationen, Formulare, Listen und andere Bereiche sollten mit passenden HTML-Elementen ausgezeichnet werden, damit Browser, Suchmaschinen und assistive Technologien sie zuverlässig interpretieren können. Das verbessert Barrierefreiheit, Wartbarkeit und die technische Verständlichkeit einer Website. Eng verbunden ist der Begriff mit HTML und Barrierefreiheit.

Weiterlesen

HTML

Barrierefreiheit

ARIA

Technical SEO

FAQ

Semantisches HTML

Beeinflusst semantisches HTML das SEO?
Indirekt. Suchmaschinen werten Struktur wie Überschriften und Listen aus, um Inhalte zu verstehen; ein direkter Rankingeffekt einzelner Elemente ist nicht belegt. Der Nutzen liegt in besserer Verständlichkeit für Crawler, Screenreader und Wartung. Semantik ersetzt gute Inhalte nicht. Saubere Struktur nützt somit mehreren Zielen gleichzeitig.
Was unterscheidet semantisches HTML von div-Elementen mit Klassen?
Ein div trägt keine Bedeutung, ein button oder nav schon. Mit Klassen sieht ein div nur optisch gleich aus. Semantische Elemente bringen Tastaturbedienung, Fokus und Rolle für assistive Technologien automatisch mit; bei einem div müsste das nachgebaut werden, meist unvollständig.
Welche Elemente gehören zum Grundgerüst von semantischem HTML?
Das Grundgerüst besteht aus header, nav, main und footer für Bereiche, h1 bis h6 für Überschriften, button für Aktionen, a für Ziele und label für Formularfelder. Ein einziges main pro Seite und eine logische Überschriftenhierarchie sind besonders wirksam. Der Mehraufwand im Bau ist gering.