xhtml: Änderungen gegenüber HTML

Zwischen HTML 4.01 und xhtml 1.0 gibt ein paar kleine, aber sehr wichtige Unterschiede, die ich zusammengetragen habe.

Kleinschreibung

Da in xhtml zwischen Groß- und Kleinschreibung unterschieden wird, müssen alle Elemente und Attribute grundsätzlich kleingeschrieben werden.

End-Tags

Einzelne Elemente wie li oder p mussten in HTML nicht explizit geschlossen werden, dies ist nunmehr zwingend vorgeschrieben.

Auch leere Elemente müssen nun per End-Tag ( <hr></hr> ) oder in sich ( <hr> /> ) geschlossen werden.

Erweiterung des html-Tags

Der html-Tag wird nunmehr anstelle von <html> erweitert und wird wie folgt geschrieben:

  1. <html xmlns="http://www.w3.org/1999/xhtml">

Sinnvoll ist es dabei, gleich die Sprachangaben mit zu ergänzen:

  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

In xhtml 1.1 wurde das lang-Attribut durch das xml:lang-Attribut von xml ersetzt. Daher ist es sinnvoll, bei Nutzung von xhtml 1.beide Attribute anzugeben.

Sauberer Elemente-Code

In HTML durften sich die Elemente überkreuzen, dies ist nun nicht mehr gestattet und führt zu einem Validierungsfehler.

Falsch:

  1. <p>Dies ist ein <em>Beispiel</p></em>

Richtig:

  1. <p>Dies ist ein <em>Beispiel</em></p>

Attribute

Atributte müssen nun zwingend in Anführungszeichen gesetzt werden:

  1. <div class="klasse">Dies ist ein Beispiel</div>

Jedes Attribut muss einen Wert besitzen:

  1. <input type="checkbox" checked="checked" />

Die Kurzform aus HTML (<input type="checkbox" checked />) führt nun zu einem Fehler.

xhtml 1.0 strict: keine missbilligten (deprecated) Elemente

Es gibt Elemente und Attribute, die in xhtml 1.0 Strict als missbilligt (deprecated) eingestuft werden. Dazu gehören u.a <font>, <center>, align, valign.

Alternativ kann man auf XHTML 1.0 Transitional ausweichen, wie ich z.B. derzeit noch mit dieser Website verfahre, da ich ansonsten u.a. Probleme mit der Einbindung des Amazon-Werbeblocks hätte.

Style- und Script-Elemente im Dateikopf

Auch wenn es i.d.R. am sinnvollsten ist, Style- und Script-Elemente in separate Dateien auszugliedern und per

  1. <link rel="stylesheet" href="http://www.f-thies.de/base.css" type="text/css" media="screen" />
  2. <script type="text/javascript" src="script.js"></script>

einzubinden, so kann es doch vorkommen, dass man diese Inhalte auch direkt im Dateikopf einbinden. Da der Parser aber Script- und Style-Angaben in xhtml diese wie Markup liesst, müssen diese Angaben wie folgt vor dem Parsen geschützt werden:

  1. <script>
  2. <![CDATA[
  3. unescaped / ungeschützter Inhalt
  4. ]]>
  5. </script>

Buchempfehlungen

Kommentar erfassen

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.