Beispiele zur mißlungenen Trennung von HTML und CSS:

Wenn man sich den Quelltext einiger Seiten anschaut, die man im Netz findet, dann findet man immer noch folgende Elemente; Die Beispiele habe ich heute (07. Mai 2001) aus einer Seite herauskopiert:

Beispiel Nr. 1 (unlogisches HTML)

Am schlimmsten finde ich folgendes Beispiel, das man tausendemale im Netz findet: <p>&nbsp;</p>. Damit zeigt der "Webdesigner", daß er die Trennung von Inhalt und Styling nicht einmal in Ansätzen verstanden hat.
Warum fragt ihr Euch?
<p>&nbsp;</p> macht nichts anderes, als das der Absatz ein bißchen nach unten geschoben wird. Dieser (nicht sichtbare!) Absatz wird inhaltlich jedoch als genauso wichtig erachtet, wie der gesamte andere in Absätzen geschriebene Text, der zwischen <p> und </p> steht. Das ist unlogisch! Wieso sollte ein unsichbarer Absatz inhaltlich genauso wichtig sein, wie ein normaler und sichtbarer Textabsatz?

Im Quelltext sähe das so aus: (nicht Nachmachen!)
<p>Wenn Du jetzt willst, da&szlig; zwei Abs&auml;tze nicht direkt untereinander stehen, also in etwas so:</p>
<p>&nbsp;</p>
<p>Erst hier geht jetzt der Text weiter...</p>

Das sieht dann im Ergebnis folgendermaßen aus:

Wenn Du jetzt willst, daß zwei Absätze nicht direkt untereinander stehen, also in etwas so:

 

Erst hier geht jetzt der Text weiter...

Als saubere Lösung biete sich folgendes Vorgehen an:
<p>Wenn Du jetzt willst, da&szlig; zwei Abs&auml;tze nicht direkt untereinander stehen, also in etwas so:</p>
<p class="abstand">Erst hier geht jetzt der Text weiter...</p>

im CSS der Seite steht (u.a):
.abstand { margin-top:1.2em; }

Das sieht dann folgendermaßen aus:

Wenn Du jetzt willst, daß zwei Absätze nicht direkt untereinander stehen, also in etwas so:

Erst hier geht jetzt der Text weiter...

Vom Abstand her sieht das ziemlich identisch aus (gut, es hängt vom Browser ab), aber von der inhaltlichen Gewichtung ist es logisch! Eine Übereinstimmung von 100% läßt sich im Web sowiso nicht erreichen, denn die Browser haben Freiheiten, wie einzelne HTML Elemente dargestellt werden.

Beispiel Nr. 2 (HTML als Styling)

Man findet auch: <font face="Arial" size="1">Ein beliebiger Text</font> oder: <font face="Arial"><b><font size="2">Ein beliebiger Text</font></b></font> (So die Elemente überhaupt korrekt geschlossen werden).
Angaben von Fonts, Größe und Darstellung (Bold durch <b>) sollte man wieder über CSS lösen, denn diese HTML-<Elemente> gewichten den Text nicht nach dem Inhalt (was die Aufgabe von HTML ist), sondern geben ihm Styling.

Das sollte so gelöst werden:
<p class="ABG">Eigentlicher Text</p> ABG steht für Arial, bold, größer (welchen Namen ihr dafür vergebt, bleibt natürlich Euch überlassen). Im CSS definiert man dann:

.ABG { font-family: Arial;
       font-weight: bold;
       font-size: 90%;}

Das sieht ziemlich identisch aus und ist eine saubere Trennung von Inhalt und Style.

Eine Einführung in HTML, CSS und Webdesign von Michael Jendryschik.

Wenn ihr weitere Beispiele kennt, wo Inhalt und Layout vermischt werden, dann laßt mir diese bitte zukommen. Ich werde Sie hier aufführen, sobald ich dazu Zeit finde.

Trennung von HTML und CSS.

Überlegungen zur Einbindung von Flash und Scriptsprachen.

Web-Technik und Anleitungen.