Semantischer Code - und wie einfach das HTML-Leben doch sein kann!

Semantischer (X)HTML-Code - was für eine gewichtige Aussage.
Zumindest, wenn man mal genauer betrachtet, was das bedeutet.
Als erstes sei gesagt, dass vollends semantischer XHTML-Code gar nicht möglich ist.
Denn gibt es etwa ein Tag für Autor, Datum, etc. - nein. Erst mit XML ist dies möglich.
Aber das hat auch seine Vorteile. Durch die Spezifikation der Tags vom W3C-Konsortium ergibt sich aber eine schöne Übersichtlichkeit im Code. Außerdem wird die Programmierung dadurch sehr einfach, da man sich nicht um das Aussehen kümmern muss.

Wieso wird XHTML-Code durch sematische Programmierung übersichtlich und einfach?

Beispiel für semantische MarkupsAnstatt vielen Tags für die Gestaltung, genügt ein einziger Tag, um die Überschrift zu definieren.
Die Gestaltung macht das Cascading Style Sheet (CSS).
Und das ist noch lange nicht alles.

Sauberer XHTML-Code ermöglicht es Suchmaschinen wie Google die Website besser zu erfassen - der Suchroboter wird nicht von überflüssigen Tags um die wesentlichen Inhalte gestört.
Auch in Hinblick auf Barrierefreiheit ist diese gar nicht anders zu realisieren.
Stellen wir uns nur mal vor, ein Screenreader, oder gar mit Braille-Display liest eine Website, die nicht semantisch aufgebaut ist.

Hierzu gehört sicherlich auch die lange beliebte Technik, Websites mit Tabellenstrukturen zu bauen.
Wenn ich eine Website mit einer Tabellenstruktur erstelle, macht das semantisch und logisch keinen Sinn.
Denn ich habe ja schließlich keine tabellarische Auflistung von z.B. Statistiken oder ähnlichem.
Der Screenreader bzw. das Braille-Display gibt dann jede Tabellenreihe einzeln aus - ist wird dann wirklich schwierig die Zusammenhänge richtig zu verstehen.
Ähnlich geht es den Suchmaschinen-Robotern.

Folgend wohl die drei häufigsten Markup-Optimierungen, und wie sie früher bzw. falsch umgesetzt wurden:

  • XHTML/CSS und Div-Tags, anstatt mit Seitendesign mit Tabellenaufbau
  • Navigation in einer je nach Ebene verschachtelten Liste, anstatt nur mit einfachen Links
  • Überschriften mit h1-h6 Tags, anstatt mit einer Klasse für einfach nur große Schrift etc.

Übrigens sollte es eine h1-Überschrift auch nur einmal geben, da Sie die wichtigste Überschrift ist.

Für alle anderen Fälle gibt es ein paar Fragen, die man sich stellen kann, um herauszufinden, welches das richtige Markup ist:

  • In welchem Element steckt mehr Bedeutung drin?
  • Was gibt mir bessere Möglichkeiten zur Gestaltung mit CSS?
  • Welche Markup-Variante spart mehr Code?
  • Habe ich den Inhalt mit einem HTML-Element umgedeutet, nur damit ich kein div verwenden muss?
  • Welche Variante ist für Textbrowser und Screenreader am besten?
  • Was passiert mit meiner ausgeklügelten Markup-Struktur, wenn weitere Inhalte hinzukommen?

Zusammengefasst hat semantische Programmierung folgende Vorteile:

  • Suchmaschinen indizieren meine Webseiten besser
  • Gestaltung ist getrennt von Struktur - die Struktur ist unabhängig
  • Gestaltung lässt sich schnell ändern, durch austauschen von CSS-Dateien
  • (X)HTML-Code wird um ein vielfaches übersichtlicher
  • Screenreader etc. können die Website wesentlich besser lesen
  • Ein großer Schritt zur Barrierefreiheit ist getan

Weitere Informationen gibt es in einem Artikel von Vorsprung durch Technik.

Kommentarfunktion ist deaktiviert