Die Unterschiede zwischen XHTML und HTML geschrieben von Beatrix Jost (2004)

Dieser Artikel wurde 2004 von Beatrix Jost verfasst und erschien ursprünglich auf der CD-ROM zum Buch Intern:

Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen. Der Beitrag wurde redaktionell leicht überarbeitet.

Für die Gestaltung barrierefreier Webauftritte ist es nicht wichtig, ob HTML 4.01 oder XHTML 1.0 eingesetzt wird. Die beiden Spezifikationen unterscheiden sich nur in Details. Das W3C empfiehlt jedoch XHTML 1.0. Warum? Diese Spezifikation ist XML-basiert und somit kompatibel mit anderen W3C-Standards.

Die folgende Liste stellt die Unterschiede zwischen HTML und XHTML jeweils mit einem Beispiel dar. Zunächst wird eine HTML-, danach eine XHTML-Schreibweise beispielhaft aufgeführt. Eine kurze Erläuterung der Unterschiede wird ebenfalls angegeben.

Dateierweiterung

HTML:

.htm und .html

XHTML:

.htm, .html oder .xhtml

Mit den Dateierweiterungen .htm und .html werden Dokumente von Browsern fehlertoleranter geparst. Neuere Browser verfügen über einen XML-Parser, mit dem .xhtml-Dokumente aufbereitet werden können. Dieser Parser ist gegenüber Code-Fehlern sehr "streng" und bricht die Aufbereitung eines Dokuments bei Auftreten von Fehlern ab.

Dokumentstruktur

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> … Inhalt des Dokuments … </html>

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> … <title>Titel des Dokuments </title> … </head> <body> … <p>Strukturierter Inhalt des Dokuments</p> … </body> </html>

In HTML genügt die Angabe des Dokumententyps sowie die Einbindung aller Inhalte im HTML-Element, um dem Sprachstandard zu entsprechen. Hingegen sind in XHTML-Dokumenten der eigenen DTD und die Angabe des XML-Namensraums im öffnenden HTML-Element erforderlich. Desweiteren sind Anforderungen an die Dokumentenstruktur etwas strenger: Das Dokument muss in einen Kopfbereich (HEAD) und einen Textkörper (BODY) geteilt werden. Im Kopfbereich muss eine Seitenüberschrift (TITLE) enthalten sein. Alle Inhalte des Textkörpers müssen außerdem in Blockelementen wie P, H1, DIV usw. enthalten sein. Die Sprachangabe des Dokuments im lang-Attribut ist nach den Sprachstandards optional ebenso wie die XML-Deklaration. Die Sprachangabe in XHTML variiert zu HTML und muss deshalb ggf. ergänzend bereitgestellt werden.

Groß-/Kleinschreibung

HTML:

<H1 ALIGN="CENTER">Überschrift</H1> <P>Weitere Inhalte</P>

XHTML:

<h1 class="zentriert">Überschrift</h1> <p>Weitere Inhalte</p>

Während in HTML die Groß-/Kleinschreibung keine Rolle spielt, müssen in XHTML sowohl Elemente als auch Attribute und Attributwerte klein geschrieben werden. Das gilt auch für Event-Handler.

Abschluss von Elementen

HTML:

<img src="bild.gif" alt="Alternativtext"> <br> <ul> <li>Listenpunkt 1 <li>Listenpunkt 2 </ul>

XHTML:

<img src="bild.gif" alt="Alternativtext" /> <br /> <ul> <li>Listenpunkt 1</li> <li>Listenpunkt 2</li> </ul>

In HTML müssen bestimmte Elemente nicht abgeschlossen werden (z.B. LI). In XHTML müssen alle Elemente abgeschlossen werden. Auch Elemente, die für sich stehen (z.B. IMG), benötigen einen Abschluss, indem am Ende des Elements ein Leerzeichen und ein Schrägstrich angefügt werden.

Attributwerte

HTML:

<hr noshade> <input type="radio" checked>

XHTML:

<hr noshade="noshade" /> <input type="radio" checked="checked" />

Wie für einzelne Elemente gibt es in HTML auch Attribute, die für sich stehen. Um der XML-Spezifikation zu genügen, wird solchen Attributen einfach das Attribut selbst als Wert zugewiesen.

Textmarken (Anker)

HTML:

<a href="#text">zum Text</a> … <a name="text"></a>

XHTML:

<a href="#text">zum Text</a> … <a id="text" name="text"></a>

Um in HTML einen Verweis innerhalb eines Dokuments zu setzen, wird an der Zielposition ein leeres Ankerelement mit einem name-Attribut eingefügt. In XHTML kann zu einem beliebigen Element mit einem passenden id-Attribut gesprungen werden. Um auch die Kompatibilität mit älteren Browsern zu gewährleisten muss jedoch in XHTML sowohl das HTML-konforme name-Attribut als auch die XML-konforme Schreibweise über die Zuweisung eines id-Attributs berücksichtigt werden.

Sprachauszeichnung

HTML:

<H1 lang="de">Willkommen!</H1>

XHTML:

<H1 xml:lang="de" lang="de">Willkommen!</H1>

Die Dokumentensprache sowie Sprachwechsel innerhalb eines Dokuments sollten in HTML mit dem Universalattribut lang gekennzeichnet werden. In XHTML sollte das XML-spezifische Attribut xml:lang ergänzend verwendet werden. Für die Barrierefreiheit, sprich: Unterstützung in Sprachausgaben, ist das lang-Attribut aber entscheidend.

JavaScript

HTML (strict):

<script type="text/javascript">  </script>

XHTML (strict):

<script type="text/javascript">  </script>

In HTML kann ein Scriptbereich an jeder Stelle eines Dokuments definiert werden. Das umgebende HTML-Kommentar ist dazu da, den JavaScript-Code vor Browsern zu verstecken, die kein JavaScript unterstützen. In XHTML sollte der Inhalt von Skripten als CDATA (Character Data) definiert werden, da der XML-Parser Zeichen wie z.B. < als den Beginn eines HTML-Elements erkennt. Dieses Problem kann aber auch gelöst werden, indem das Skript in eine externe Datei ausgelagert wird.