(X)HTML-Grundlagen 7: Unterschiede

In dem siebten Beitrag der Reihe ‘Einstieg in (X)HTML’ werden die Unterschiede zwischen XHTML und HTML aufgezeigt.

7. Unterschiede zwischen HTML und XHTML

Ich werde hier einige konkrete Unterschiede zwischen HTML 4.01 und XHTML erwähnen, aber ohne Anspruch auf Vollständigkeit.

Der erste Unterschied zu "normalen" HTML-Dokumenten ist, daß XHTML strengere Anforderungen an das Grundgerüst eines Dokumentes stellt. Hier ein Beispiel eines Grundgerüstes:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="de" xml:lang="de"> <head> <title>Titel des Dokumentes immer ganz oben im Head Bereich<title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> </head> <body> Inhalt der Seite </body> </html>

Das hier ist das (offizielle) Minimum welches an ein XHTML-Dokument gestellt wird, wogegen bei einem "normalen" HTML-Dokument durchaus z. B. der Head-Bereich weggelassen werden kann.

Als nächstes fällt einem auf, daß in einem XHTML-Dokument alle Markierungen abgeschlossen werden müssen. Und die Markierungen, die alleine stehen (z. B. <br> für Zeilenumbruch) bekommen innerhalb der eckigen Klammer ein Leerzeichen und einen Schrägstrich: <br />.

Hier einige Beispiele für HTML:

<br> Neue Zeile
<p> oder <p>Text</p> Neuer Absatz
<option>Text Auswahlliste
<img src="blubb.jpg" alt="ein Bild"> ein Bild wird eingefügt

Hier die gleichen Beispiele in XHTML:

<br /> Neue Zeile
<p>Text</p> Neuer Absatz
<option>Text</option> Auswahlliste
<img src="blubb.jpg" alt="ein Bild" /> ein Bild wird eingefügt

In HTML war es egal ob die HTML-Elemente bzw. Markierungen und die dazugehörigen Attribute klein oder groß geschrieben wurden. In XHTML werden alle Markierungen und Attribute klein geschrieben.

Beispiel:
<DIV></DIV> und <div CLASS="format"></div> sind beide in HTML richtig, aber in XHTML ist nur <div class="format"></div> richtig.

In XHTML gibt es keine leeren alleinstehenden Attribute. Den Attributen muß man einen Wert zuweisen. Als Regel hat man sich darauf verständigt als Wert einfach den Attributnamen zuzuordnen. In HTML konnte man noch folgendes schreiben:
<hr noshade>

Aber in XHTML sieht es folgendermaßen aus:
<hr noshade="noshade" />

Wobei dies ein schlechtes Beispiel ist, denn in XHTML 1.1 ist noshade unerwünscht und wird im Validator als Fehler angezeigt, da die Attribute eines HTML-Elements nicht der Struktur sondern dem Layout dienen. Daher ist es am besten das Aussehen des Elements mittels CSS zu beeinflussen.

Das target="" Attribut ist in XHTML 1.0 Transitional erlaubt, aber nicht mehr in XHTML 1.0 Strict und XHTML1.1.

Als nächster wichtiger Unterschied ist zu nennen, daß Ankerverweise nicht mehr mit name="" benannt werden dürfen, sondern mit id="".

Beispiel: nicht mehr <a name="bereich"></a> sondern <a id="name"></a>

Wobei man sagen muß, daß zumindest der Validator für XHTML 1.1 auch nicht mehr das "nackte" <a id="name"></a> erlaubt. Es muß entweder von einem <div></div> (o. ä.) Bereich umschlossen sein oder man weist dem Div-Bereich direkt die id zu:
<div id="Anker-Bereich"></div>

Ich habe es zuerst auch nicht gewußt, aber auf so einen Div-Bereich kann man wirklich linken, und zwar mit der schon bekannten Schreibweise <a href="#Anker-Bereich"></a>.

XHTML 1.0 Transitional duldet noch das name="" Attribut. Aber um evtl. Probleme auszuschließen sollte man bei der Transitional-Variante beide Schreibweisen nutzen:
<a id="Anker-Berich" name="Anker-Bereich"></a>

7.1 Ein vollständiges XHTML-Grundgerüst

Hierbei handelt es sich um ein XHTML-Grundgerüst, das alle (meiner Meinung nach) sinnvollen Angaben beinhaltet:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="de" xml:lang="de"> <head> <title>Titel der Seite</title> <meta name="Author" content="Der Name des Authors" /> <meta name="Description" content="kurze Erklärung des Webprojektes" /> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta name="language" content="de" /> <meta name="Robots" content="INDEX,FOLLOW" /> <meta name="revisit-after" content="7 days" /> <style type="text/css">  </style> </head> <body> Hier kommt der Inhalt! </body> </html>

Anmerkung: ich verzichte auf die XML-Deklaration (<?xml version="1.0" encoding="UTF-8"?>), denn soweit ich informiert bin, versetzt diese Angabe den Internet Explorer 6 in den sog. quirks-Modus. Dadurch interpretiert er das Box-Modell falsch. Es ist zwar nicht richtig auf die XML-Deklaration zu verzichten, aber es funktioniert auch ohne und der Validator meckert nicht darüber.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.