(X)HTML Tags und ihre semantische Bedeutung Teil 1: Einführung

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.

« Die Metager2 Suchmaschine soll gut sein???     Webmontag.de: Kindergartenvandalismus, oder nur Taktik? »

2 Kommentare

  1. Gravatar von David Querg   David Querg
      schrieb am 27. August 2008

    Kein schlechter Beitrag! Eine nette Übersicht über semantische Elemente und Attribute vermisse ich allerdings, deshalb verweise ich mal auf meinen eigenen Beitrag. ;-)

  2. Gravatar von Moritz Gießmann   Moritz Gießmann
      schrieb am 27. August 2008

    Das war auch nicht Ziel der Blogserie. Ich will den Newbies in Sachen Webdesign eine kleine Hilfestellung geben. Danke für den Link, dein Beitrag eignet sich sehr gut zu weiterlesen für Interessierte.

Some rights reserved 2005-2017  Moritz Gießmann
Die Inhalte (Texte / Fotos) des Weblogs werden, sofern nicht anders angegeben, unter der Creative Commons Lizenz veröffentlicht.
http://www.dead-pixel.de läuft mit WordPress