Was bedeutet "Sinnvolle Nutzung von HTML und CSS"?

[gk]

Tabellenlayouts sind out. Positionierte DIVs sind out. Sinnvolle Nutzung von HTML und CSS ist in.

• Sven Rautenberg"

Was bedeutet "Positionierte DIVs sind out" bzw. "Sinnvolle Nutzung von HTML und CSS ist in" bezüglich des Layouts im Detail?

div-Container können im Style-Sheet positioniert werden. Ist das jetzt schön oder unschön? Ich bin verwirrt.

Sinnvolles HTML bedeutet, daß man mit HTML die logische Struktur einer Seite auszeichnet, und das (erstmal) unabhängig vom späteren Layout. Überschriften sollten mit h1 - h6 ausgezeichnet werden, Absätze mit p, Listen mit ul oder ol, Hervorhebungen im Text je nach Wichtigkeit mit em oder gar strong usw. Das ganze nennt man auch semantisches Markup.

Wer z.B. ein Tabellenlayout à la
<table>
 <tr>
  <td>
 </tr>
</table>

in eine Div-Suppe
<div class="tabelle" style="...">
 <div class="zeile">
  <div class="tabzelle" style="...">
  </div>
 </div>
</div>

überführt, hat nichts gewonnen, da keine weiteren Informationen über die Struktur der Seite hinzugefügt wurden. Abgesehen von prinzipiellen oder ästhetischen Gründen, sind semantische Informationen auch für Suchmaschinen wichtig, da diese z.B. Überschriften stärker gewichten usw. Zudem können Vorlesegeräte für Blinde gut strukturierte Seiten besser vorlesen.

Für das Aussehen der Seite sollte allein CSS verantwortlich sein. Nun ist die ganz strikte Trennung von Inhalt und Form aus verschiedenen Gründen nicht immer hundertprozentig einzuhalten (der Hauptgrund ist m.E. zur Zeit ein weitverbreitetes Stück Software, daß sich fälschlicherweise als Browser ausgibt). Man muß gelegentlich im
HTML-Quellcode mal das ein oder andere Element einfügen, meist div oder span einfügt, das zwar keine Bedeutung für die logische Struktur der Seite hat, jedoch für das Layout unabdingbar ist.

Zur Positionierung möchte ich noch folgendes anführen: was noch häufig gemacht wird, ist pixelgenaues Positionieren. Also beispielsweise: linke Navigationsleiste 250px breit, Inhalt 500px breit, Schriftgröße 14px usw. Dies hat den Nachteil, daß die Schriftgröße vom Benutzer entweder nicht geändert werden kann, oder daß bei größerer Schriftgröße die Navigationselemente nicht mehr in den 250px breit gebliebenen Navigationscontainer passen. Deshalb ist die Verwendung relativer Größenangaben meist besser: wer der Navigationsleiste eine Breite von 15em gibt, hat einen Bereich, in den immer 15 mal der Buchstabe m reinpaßt, mit der Konsequenz, daß wenn der Benutzer die Schriftgröße verdoppelt, sich auch die Breite der Navigationsleiste verdoppelt.