Im Folgenden der Text aus der aktuellen Ausgabe des Technikwürze-Podcast. Die nächste Ausgabe des casted-Podcasts gibt es eventuell am Mittwoch.

Hallo. Mein Name ist Eric Eggert und ich bin der Verfasser des casted-Webstandardspodcasts.

In dieser Ausgabe geht es um die Unterschiede zwischen HTML und XHTML anhand eines praktischen Beispiels.

Neben den bekannten Unterschieden wie Kleinschreibung der Tags, Attributwerte in Anführungszeichen und Wohlgeformtheit gibt es auch Differenzen, die sich nicht so einfach ausmachen lassen.

Am Beispiel einer verschachtelten Tabelle lässt sich solch ein Fall ganz gut aufzeigen.

Die eine Tabelle hat zwei Zeilen und zwei Spalten, das heißt also, dass wir innerhalb des Tabellenelementes zwei tr-Elemente haben, die ihrerseits je zwei td-Elemente enthalten.

Eine dieser Zellen enthält eine weitere Tabelle, deren Gestalt für uns nicht erheblich ist.

Wenn wir nur die äußere Tabelle per CSS ansprechen wollen bietet sich eine Konstruktion per Childselektoren, also dem Größer-Symbol, an:

body > table > tr > td { background-color: #eee; }

Wenden wir diese CSS-Angabe nun auf ein HTML-Dokument an bemerkt man, dass nichts passiert. Die Angabe findet lediglich dann Anwendung, wenn man eine XHTML-Datei auch als XHTML parst.

Dazu muss das Dokument mit dem Content-Type application/xml application/xhtml+xml vom Webserver gesendet werden. Ein Vorgehen, welches der Internet Explorer allerdings nicht versteht.

Weshalb wird die Angabe aber in XHTML interpretiert und in HTML nicht.

Die Ursache ist eine Besonderheit in der HTML-Spezifikation nach der bei manchen Elementen sowohl Anfangs- als auch Endtags im Quelltext weggelassen werden können.

Eines dieser Elemente ist das tbody-Element: Die Spezifikation fordert mindestens ein tbody-Element im table-Element. Dessen Anfangs- und Endtags dürfen allerdings weggelassen werden.

Das bedeutet, dass nach der Verarbeitung durch den Parser ein tbody-Element existiert, das dann durch die CSS-Anweisung nicht angesprochen wird. Schließlich spricht der Child-Selektor nur direkte Kindelemente an.

Eine Anweisung wie body > table > tbody > tr > td greift also.

Und warum verhält sich (korrekt geparstes) XHTML denn anders, ist doch XHTML 1 eine einfache transformation von HTML 4 nach XML?

Bei der Transformation wurden die Sonderfälle zum Weglassen von Tags in Regelfälle umgewandelt. Meist bedeutet das, dass beide Tags vorgeschrieben werden.

Nicht so beim tbody-Element: Innerhalb der Tabelle wurden auch direkt tr-Elemente erlaubt um nicht ein zweites Schachtelelement bei einfachen Tabellen zu erzwingen.

Dies ist auch der Grund weshalb unsere Ausgangsanweisung in XHTML funktioniert, dort wird der “Quelltext” nämlich nicht angetastet.

Solchen “Quelltextmanipulationen” kann man mit dem Firefox-Plugin View formatted Content Source auf die Spur kommen.

Hörer, die tiefer in die Materie eintauchen möchten sind herzlich unter casted.yatil.de willkommen.