HTML und Semantik
Mit HTML strukturiert ihr ein Dokument und gebt den Inhalten eine Bedeutung. Diese sog. Semantik ist sehr wichtig für Suchmaschinenoptimierung und Barrierefreiheit.
Fast jedes HTML-Element hat eine festgelegte Bedeutung, mit der Inhalte auf einer Webseite ausgezeichnet und strukturiert werden können. Wenn für die verschiedenen Inhalte der Website das jeweils passendste HTML-Element verwendet wurde, spricht man von semantisch wertvollem Code. Da eine professionelle Website immer semantisch korrekt aufgebaut sein muss, erklären wir in diesem Beitrag den Begriff »Semantik« und die Bedeutung der verschiedenen HTML-Elemente.
Die Bedeutung von Semantik
Semantik heißt übersetzt »Bedeutungslehre«. Damit ist die »Beziehung zwischen den Zeichen und deren Bedeutungen« (Wikipedia) gemeint. In Bezug auf HTML heißt dies, dass Text der als Überschrift (<h1>-<h6>
) ausgezeichnet wurde von der Bedeutung her zu einer Überschrift wird und somit wichtiger ist als Text, der keine Überschrift darstellt. Texte die als ungeordnete Listen (<ul>
) ausgezeichnet wurden, stellen eine Aufzählung dar, bei der die Reihenfolge unwichtig ist. Anders als bei Texten, die in Form einer geordneten Liste (<ol>
) ausgezeichnet wurden. Hier ist die Reihenfolge wichtig. Nach diesem Prinzip werden alle Textinhalte einer Website mit dem HTML-Element umschlossen, dass für die jeweilige Bedeutung am passendsten ist.
Semantik sieht man nicht
Bei der semantischen Auszeichnung mittels HTML stellt sich nicht die Frage nach dem Aussehen sondern ausschließlich nach der Bedeutung der einzelnen Inhalte. Es ist also ganz schlechter Stil, wenn man beispielsweise eine Überschrift der Gattung 3 (<h3>
) verwendet, nur weil man möchte, dass die Überschrift eine bestimmte Farbe oder Größe bekommt. Eine technisch gut entwickelte Website trennt Gestaltung und Semantik vollständig (siehe standardkonformes Webdesign).
Die Semantik geriet in einigen Epochen des Internet allerdings ein wenig in Vergessenheit. Manch einer erinnert sich vielleicht noch an die Zeit der sog. Tabellendesigns. Damals wurde das HTML-Element <table>
nicht gemäß seiner eigentlichen Bedeutung eingesetzt, sondern die Tabelle wurden als Hilfsmittels zur Strukturierung und Gestaltung des Layouts missbraucht. Für Suchmaschinen und sehbehinderte Menschen ist so etwas höchst unerfreulich.
Warum Semantik in HTML wichtig ist
Nun könnte man denken, dass der korrekte Einsatz von HTML-Elementen gemäß ihrer Bedeutung überflüssig ist, da die Bedeutungsebene von den Besuchern der Website nicht gesehen wird.
Wichtig ist die semantische Auszeichnung unter anderem, da Suchmaschinen den Quellcode lesen und anhand der verwendeten HTML-Elemente die Wichtigkeit von Inhalten ableiten. Das hat starke Auswirkungen auf das Ranking einer Website. Daher empfiehlt es sich zum Beispiel, relevante Suchbegriffe (Keywords) in semantisch gewichtigeren HTML-Elementen wie dem Seitentitel (<title>
) oder der Überschrift 1 (<h1>)
unterzubringen.
Barrierefreiheit und Semantik
Darüber hinaus spielt semantisch korrekter HTML-Code eine große Rolle für die Barrierefreiheit von Webseiten, da auch Screenreader den Quellcode auslesen und sehbehinderten Menschen vorlesen. Wenn der HTML-Code falsch ausgezeichnet ist oder HTML-Elemente gar absichtlich für die Geschaltung missbraucht wurden, wird der Zugang zur Website für behinderte Menschen unnötig erschwert.
Der Gebrauch der Semantik für die barrierefreie Benutzung von Webseiten ist trotz der Entwicklung von HTML5 eingeschränkt. HTML-Elemente können aber mithilfe von WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) und Microformaten mit zusätzlichen Attributen versehen werden. Zum Beispiel werden mit dem role
-Attribut den HTML-Elementen zusätzliche Informationen mitgegeben, die das Navigieren auf Webseiten für Menschen mit Behinderung verbessern.
Die semantische Bedeutung von HTML-Elementen
Es gibt über 100 verschiedene HTML-Elemente, mit denen ihr Inhalte semantisch auszeichnen könnt. Die Kunst besteht darin mit möglichst wenig Code ein HTML-Dokument mit möglichst viel Aussagekraft zu erzeugen. Eine Übersicht über die wichtigsten HTML-Elemente und ihre Bedeutung haben wir in unserem Artikel »Die wichtigsten HTML-Elemente« zusammengefasst.
Hallo Jonas,
Vielen Dank für die ausführliche Darstellung. Ich finde es trotzdem nach wie vor bei einigen Dingen schwierig, die passende Auszeichnung zu finden. Ich habe auf meiner Seite einen Bereich mit 6 Kacheln; sie haben jeweils ein Hintergrundbild, davor steht Text und ein Button. Gilt dafür auch figure und figcaption? Oder gilt dies nur, wenn Text UNTER einem Bild steht?
Vielen Dank und viele Grüße, Michael
Wenn es eher opulent gestaltete Links sind und keine inhaltlichen Abbildungen, dann ist die Auszeichnung mit figure und figcaption überflüssig.
ich danke Dir!
Vielen Dank für den ausführlichen und gut verständlichen Bericht zur Semantik – jetzt sehe ich einige Dinge etwas klarer :)