Warum semantischer Code wichtig ist

Auf vielen Webseiten sieht man immer wieder „valides (X)HTML“ und viele Diskussionen bringen immer wieder das Argument das valider (X)HTML-Code auch guter Code sei. Dies ist aber nicht richtig! Auf Tabellenlayouts basierende Webseiten können ebenso fehlerfrei und damit valide sein.

Barrierefreies Webdesign

Bei der Validierung bezieht sich die Überprüfung einzig und allein darauf ob bei der Umsetzung des Codes Fehler erzeugt wurden oder nicht. Es wird aber nicht geprüft ob beispielsweise der Content auch seiner Bedeutung entsprechend ausgezeichnet ist. Damit kann man gleich das nächste Argument aushebeln, valider Code ist nicht barrierefrei! Valider Code kann viele Barrieren für Internetnutzer besitzen. Welche Art von validem Code als der „richtige Weg“ ist, möchte ich euch näher bringen.

Warum überhaupt Barrierefrei?

Habt ihr euch schon einmal Gedanken darüber gemacht wie Google Seiten in den Index aufnimmt? Oder wie Screenreader blinden Menschen die Webseite präsentieren? Beides funktioniert im Prinzip gleich. Somit könnte man auch sagen Google ist blind. Die Struktur der Webseite ist von sehr großer Bedeutung, sowohl beim Ranking in Suchmaschinen sowie für Menschen, die leider mit Behinderungen Webseiten besuchen.

Deshalb sollte eine Webseite auch strukturell einwandfrei aufgebaut sein, das heißt die Semantik muss passen. Der Inhalt sollte auch als Inhalt gekennzeichnet sein. Tabellen sind dazu da um Statistiken und Daten zu präsentieren, Überschriften zeichnen Abschnitte, wie etwa in einem Buch, aus. Fettgeschriebene Wörter sind wichtiger als normale, ungeordnete Listen stellen sozusagen das Inhaltverzeichnis, also die Navigation der Webseite dar. Bilder ohne Alternativtext und Bildunterschrift sind sozusagen nutzlos und sollten somit nur fürs Layout Verwendung finden.

Ein Aspekt der bei der Umsetzung von Webseiten immer noch häufig vernachlässigt wird und warum sich auch unter neuen Webseiten immer noch recht viele Webseiten wiederfinden, die durchaus einer sogenannten Div-Suppe zugeordnet werden können, ist sich bereits beim Anlegen der Layouts Gedanken über die Bedeutung des zu verwendeten Inhaltes zu machen, um dann auf die der Bedeutung des Contents entsprechenden (X)HTML-Tags zurückzugreifen. Dies nennt man „Semantischer Code„.

Die Umsetzung des richten Codes

Valider Code allein bedeutet nicht viel, außer dass dieser fehlerfrei ist. Anbei hab ich 3 Codebeispiele gepostet, die relativ einfach umzusetzen sind. Diese Beispiele sollen aufzeigen das es mit jeder Technik möglich ist validen Code zu erstellen, allerdings noch lange nicht empfehlenswert sind. Denn wie bereits angesprochen erkennt eine Screenreader-Anwendung beispielsweise zwar in allen 3 Varianten die Texte, allerdings nur im letzten  auch die Bedeutung der Inhalte, genauso wie Google auch.

Valides Tabellenlayout

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tabellenlayout</title>
</head>
<body>
    <table>
        <tr>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
        </tr>
    </table>
</body>
</html>

Valides Div-Konstrukt

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Div Konstrukt</title>
</head>
<body>
    <div>
        Lorem Ipsum
    </div>
    <div>
        Lorem ipsum dolor sit amet
    </div>
</body>
</html>

Valider Semantischer Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sematischer Code</title>
</head>
<body>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet
    </p>
</body>
</html>

Ein weiterer wichtiger Aspekt des sematischen Codes, ist die bessere Übersicht und Struktur des Quellcodes. Ein Grund der beispielsweise auch dazu führt, dass der ein oder andere Webentwickler nicht auf CSS-Frameworks zurückgreift, da hier oftmals ein nicht unerheblicher Ballast an Code mitgeschleppt wird, um so viele potentielle Fehlerquellen wie möglich, beispielsweise später via CSS ausschließen zu können.

Fazit

Wer Wert auf fehlerfreien, guten Code legt der kommt nicht darum den Weg des semantischen Codes zu nehmen. Zum einen hilft man dadurch sich selbst, da Suchmaschinen den Inhalt viel besser interpretieren können und man somit auch evtl. besser platziert wird und zum anderen hilft es ungemein der Barrierefreiheit! Selbstverständlich ist es einfach nicht möglich komplett barrierefreie Webseiten zu erstellen, aber man kann vieles tun um es annähernd zu schaffen.