Unter semantische Tags versteht man HTML-Elemente, die nicht nur die Struktur eines Dokuments definieren, sondern auch die Bedeutung und den Zweck des Inhalts vermitteln. Diese Tags helfen Suchmaschinen, Bildschirmlesegeräten und anderen Technologien, den Inhalt einer Webseite besser zu verstehen und zu interpretieren. Im Gegensatz zu generischen Tags wie <div> oder <span>, die keine spezifische Bedeutung haben, tragen semantische Tags dazu bei den Kontext des Inhalts klarer zu machen da bereits durch ihre Namensgebung bekannt ist welchem Zweck sie dienen.
Beispiele für semantische HTML-Tags sind:
<header>für den klassischen Kopfbereich einer Seite<nav>für Navigationslinks<main>für den Hauptinhalt der Seite<article>für einen eigenständigen Inhalt<section>für Abschnitte innerhalb eines Artikels<aside>für sekundären Inhalt wie Sidebar-Inhalte<footer>für den Fußbereich einer Seite oder eines Artikels
Die Verwendung semantischer Tags verbessert die Zugänglichkeit und Suchmaschinenoptimierung (SEO) einer Webseite, da sie den Inhalt klarer strukturieren und dessen Bedeutung hervorheben. Dies trägt dazu bei, dass Webseiten für alle Benutzer besser nutzbar sind, unabhängig davon, welche Technologien sie verwenden. Ferner wird eine Seite dadurch barrierefrei und besser für Suchmaschinen optimiert.