Semantisches HTML im Webdesign

Eine Website in semantischen HTML auszugeben ist der Idealzustand nach welchem jeder Webdesigner streben sollte. In der Praxis ist das im Webdesign jedoch meist nur annäherungsweise zu verwirklichen. Um diesem Ideal aber nahe zu kommen ist dabei eine strikte Trennung von Inhalt und Design und ein am Inhalt orientiertes, bezeichnendes HTML die Grundvoraussetzung. Die Struktur semantischen Codes ist logisch, einfach und weitestgehend selbsterklärend.

HTML-Tags, welche ausschließlich dem Design dienen haben in semantischen HTML-Code nichts zu suchen, sie gehören zwingend in die externe CSS-Datei. Das gilt für Schriftarten, Farben und Hintergründe ebenso, wie für Abstände und Stile einzelner Elemente zueinander und zeichnet gutes Webdesign aus und macht ein projekt plattformunabhängig.

Es sollten nur HTML-Tags verwendet werden die eine strukturelle Funktion haben und in ihrem Kontext die Bedeutung des Inhaltes wiedergeben, logische Hierarchien anlegen.

<h1>, <h2>, <h3>

<p>

<ul>, <ol>, <dl>

<blockquote>

Eine Überschrift muss also vom HTML-Tag bereits als Überschrift ausgezeichnet werden und nicht mit irgendeinem Font-Mischmasch mit soundso vielen Pixeln, Farbe, Schriftart und Hintergrund.

In semantischen HTML werden Tabellen nicht für Layouts missbraucht, sondern nur für die Ausgabe echter Daten verwendet. Div-Tags sparsam eingesetzt und extern formatiert. Auch mehrfache, erzwungene Zeilenumbrüche, geschützte Leerzeichen und transparente Gifs - als Abstandshalter - wie sie mancherorts immer noch verwendet werden, sind Webdesign-Unsitten der Vergangenheit und stehen unserem Ziel - semantisches HTML - für modernes Webdesign zu erzeugen entgegen. Abstände, Schriftarten und Stile, Schriftfarbe oder Schriftgröße können und sollten immer per CSS festgelegt werden und nicht im HTML-Code eingebaut.

Die Vorteile semantischen HTML-Codes

Semantischer HTML-Code bringt den Vorteil einer besseren Strukturierung und Lesbarkeit für Suchmaschinen, weil der Code schlanker ist und die HTML Elemente für sich selbst kommunizieren was sie beinhalten. Eine Überschrift Liste oder ein Zitat wird damit folglich auch als solches erkannt. Die Ladezeiten verkürzen sich durch semantisches HTML erheblich und die Seite wird zudem noch weitestgehend plattformunabhängig.

Es ist praktisch ein erster Schritt in Richtung Barrierefreiheit, denn semantisch erstellte Webseiten können auch besser auf anderen Endgeräten (z. B. Handys) ausgegeben werden. Screen-Reader können die Headlines leichter extrahieren und wiedergeben ob nun in Textform oder akustisch. Somit stehen beispielsweise für Sehbehinderte Menschen sofort wichtige Informationen bereit, sofern die Überschriften auch inhaltsbezogen und aussagekräftig sind und nicht nur die Phantasie des Betreibers schmeicheln.

Um verwandte Begriffe zu finden, die in einem Zusammenhang zum eigenen Inhalt stehen, ist die Nutzung einer Suchmaschine wie Semager auf jeden Fall besser als reine Phantasiebergriffe.