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.

Geschrieben von:

Anna Zietek

Benutzerbild

Anna macht eine Umschulung zur Mediengestalterin mit dem Schwerpunkt Webdesign und absolviert ihr Praktikum bei uns. Sie spezialisiert sich auf die Gestaltung barrierefreier und nachhaltiger Websites und möglichst einfache, aber unterhaltsame Kommunikationslösungen.

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. Michael
    schrieb am 29.11.2019 um 08:46 Uhr:

    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

    Antworten
    • Jonas Hellwig
      schrieb am 03.12.2019 um 13:19 Uhr:

      Wenn es eher opulent gestaltete Links sind und keine inhaltlichen Abbildungen, dann ist die Auszeichnung mit figure und figcaption überflüssig.

      Antworten
      • Michael
        schrieb am 05.12.2019 um 14:05 Uhr:

        ich danke Dir!

  2. Christian
    schrieb am 22.09.2017 um 18:25 Uhr:

    Vielen Dank für den ausführlichen und gut verständlichen Bericht zur Semantik – jetzt sehe ich einige Dinge etwas klarer :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Barrierefreie Projekte mit kulturbanause

Wir setzen regelmäßig digitale Produkte barrierefrei um und kennen die Anforderungen im konzeptinellen, gestalterischen, redaktionellen und technischen Bereich.

Leistungsangebot Barrierefreiheit →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung