DeadPixel - Design - Musik - Weblog

Heute beginne ich meine erste Blogserie. Da auf meinem Blog sehr viele (X)HTML Anfänger unterwegs sind werde ich hier einige (X)HTML (extensible Hyper Text Markup Language) Elemente und ihre semantische Bedeutung vorstellen. Mit semantischer Bedeutung ist quasi die Grammatik von HTML gemeint.

Teile der Serie:

1. Einführung
2. Neutrale Elemente <div> und <span>

So wie es in der deutschen Grammatik Verben und Nomen gibt, so hat auch HTML Elemente, die für bestimmte Bereiche benutzt werden. In dieser Serie geht es mir hauptsächlich um die Auszeichnungen von Text, da man beim Einbinden eines Bildes, oder Videos semantisch gesehen nicht viel falsch machen kann. Da man ja heutzutage jedes HTML Element per CSS formatieren kann, darf auch das browserspezifische Aussehen eines Elements (fett, groß, klein) nicht mehr Grund für den Einsatz eben dieses Elements sein, sondern nur dessen Bedeutung im Kontext des Inhalts der Seite.

Beispiele zum Verständnis

Um zu verdeutlichen, was Semantik bei HTML überhaupt bedeutet hier ein Beispiel:

Auszeichnung einer Überschrift (böse)

<div class="ersteueberschrift">Überschrift</div>

Auszeichnung einer Überschrift (gut)

<h1>Überschrift</h1>

Warum Semantik?

Manch einer wird sagen, wir brauchen uns doch nicht zu kümmern, mit welchem Element ich meinen Inhalt auszeichne, hauptsache es sieht im Browser richtig aus. Falsch!
Semantisch korrekter Code hat viele Vorteile. Hier mal eine (vielleicht unvollständige) Liste:

1. Lesbarkeit / Wartbarkeit des Codes
   Man kann auf den ersten Blick sehen, welches Element wofür steht und so den Code bei einer Änderung schneller durchschauen und ggf. ändern.
2. Barrierearmut
   Semantisch korrekter Code wird bspw. in einem Screenreader wesentlich verständlicher wiedergegeben als z.B. ein Tabellellayout
3. Suchmaschinenoptimierung / Maschinenlesbarkeit
   Dadurch, dass der Code durch die korrekte Semantik maschinenlesbar wird, sind auch die Ergebnisse der Suchmaschinen besser. Durch die semantische Struktur wird auch die Struktur des Inhalts für die Suchmaschine erkennbar und kann somit die Relevanz aller Teile des Inhalts bestimmen (eine Überschrift wird stärker gewertet als ein Absatz.
4. Wiederverwendbarkeit des Codes
   Der Code kann, da man mittlerweile alleine durch CSS das Design ändern kann, bei einem Redesign leicht wieder benutzt werden.

Mehr Semantik für alle!

Richtige Semantik verbietet Layouttabellen und das font-Tag! Für Webdesigner der „alten Schule“ ist ab sofort Umdenken angesagt, denn semantisch korrekter Code hat nur Vorteile und ist auch leichter zu schreiben, lesen und warten. In den folgenden Teilen der Serie werde ich nun einige HTML Elemente und ihren richtigen Platz zeigen, wo man sie einsetzen sollte und wo lieber nicht.