kick-image

Nun bin ich schon mehrere Jahre in diversen HTML- und CSS- Foren unterwegs – lesend, aber auch schreibend.

Der traurige “Ist”- Zustand dort ist…:

Die wohl am meisten benutzen Einleitungssätze verschiedenster einschlägiger Postings ist: “Ich habe ein Div- Layout gemacht …”, “Ich habe ein CSS- Layout …” oder “Ich steige gerade von einem Tabellen- Layout auf ein Div- Layout um …”.

Und immer wieder tauchen Beispiel- Codes in dieser Form auf:

<div id="wrapper">
<div id="header"
<div>Die Überschrift</div>
</div>
<div id="navi">
<div><a href="">Home</a></div>
...
</div>
<div id="content">
<p>Text</p>
</div>
</div>

Das Element “div” scheint hierbei ein Allzweckmittel zur Strukturierung zu sein, quasi als ein Ersatz der bisher gewohnten Tabellen.

Nun, was ist ein “div” überhaupt?
Div ist die Abkürzung von “Division” und bedeutet soviel wie “Teilung, Abtrennung, Aufgliederung, Kategorie,…”. Dies ist auch schon die einzige Bedeutung: eine Vielzahl von Elemente aufteilen bzw. gruppieren. Im Gegensatz zu “Listen” oder “Überschriften” also ein Element ohne spezielle Funktion.

HTML ist aber – wie der Name “HyperText Markup Language” schon sagt eine “Auszeichnungssprache”, d. h. Inhalt wird mit dem zur Bedeutung passenden Element “ausgezeichnet”.
Beispiel: <h1>Die Überschrift</h1>: “h1″ bedeutet “Headline 1″ – also die Überschrift erster Ordnung.

Legt man dies nun auf obiges Beispiel um haben alle angeführten Inhalt die gleiche Bedeutung: die Überschrift ist gleich definiert wie die Navigation oder der Inhalt.

“Das ist doch egal, oder?”

Der erste optische Eindruck würde dies eventuell bestätigen, aber die so oft sträflich vernachlässigte “Barrierefreiheit” und “Maschinenlesbarkeit” fordert das Gegenteil! Korrekte semantische Auszeichnung ist da ein MUSS!
So betonen Vorlesebrowser die Inhalte je nach Auszeichnung, oder Sites wären auch mit deaktiviertem oder defektem CSS gut bedienbar – siehe “Naked Day”. Und auch in Entwickler- Teams ist Semantik ein ausgezeichneter Motor zur gemeinsamen Arbeit.

Am meisten aber leidet der wohl bekannteste, blinde Besucher unter fehlender Semantik: die Suchmaschine!
Für Google & Co. ist der Inhalt einer “Div- Soup” eine elends lange Kette von Wörtern, ohne Unterscheidung und Wertigkeit! Die Suchmaschinen haben keine Möglichkeit z.B. kurze und wichtige Zusammenfassungen, wie es Überschriften (h1 bis h6) eigentlich sein sollten, aus dem Wulst an Information herauszufiltern und dadurch Ihre Suche zu beschleunigen. Dies wirkt sich oft auf die Platzierung in der Treffer- Liste der Suchmaschinen aus – diese “weiß ja nicht was wichtig ist”.

Dabei wäre es so einfach! Tim Berners-Lee (”Wer hats erfunden? ;-)) hat es Ende der Achtziger ja so vorgesehen, als unter seiner Leitung der http- Standard veröffentlicht wurde: Inhalte nach deren Bedeutung auszeichnen!

Wieder umgelegt auf obiges Beispiel wäre dies:

<h1>Die Überschrift</h1>
<ul>
<li><a href="">Home</a></li>
...
</ul>
<div id="content">
<p>Text</p>
</div>

Die Überschrift ist als solche ausgezeichnet, eine Link- Liste (was eine Navigation ja auch ist) ist als Liste definiert, maximal der Content wird/kann (je nach Beschaffenheit) mit einem Div zusammen gefasst werden.

In diesem Kurzbeispiel mag das nicht so deutlich hervortreten, aber semantisch korrekter HTML- Code benötigt wesentlich weniger Markup – ein zusätzlicher Vorteil, u.a. auch bei Suchmaschinen.
Zur optischen Verschönerung kann jedes Element per CSS angesprochen werden, und der “Wrapper” kann in vielen Fällen durch passender Formatierung des body- Tags wegfallen.

Es ist also einfacher als man denkt, semantisch korrektes HTML zu schreiben. Diverse Online- Tutorials – allen voran “SELFHTML” sind ausgezeichnete Info- Quellen, aber auch “CSS 4 YOU” und viele mehr…

Also bitte in Zukunft: NICHT “Div- Layouts” erstellen, sondern einfach “HTML- Dokumente” ;-)

• Montag, 02.03.2009, 16:54 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, Webdesign