XHTML

XML (extensible hyper text markup language) ist eine Sprache zur Beschreibung der Strukturierung von Daten, HTML eine Sprache zur Beschreibung des Aussehens von Daten. XHTML ist eine Kombination von beiden. XHTML 1 ist eine saubere Weiterentwicklung von HTML 4.01.

Das Grundgerüst für eine Seite sollte so aussehen, alle Elemente müssen auftreten:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="de" lang="de">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>.......</title>
      .......
      .......
   </head>

   <body>
      .......
      .......
      .......
   </body>
</html>

Die erste Zeile enthält die xml-Deklaration, das ist die Information, in welchem Format die folgenden Zeichen vorliegen. Die Unicode-Definition "UTF-8" (1 bis 4 Byte pro Zeichen) ist der Defaultwert, "ISO-8859-1" ist für westeuropäische Sprachen und Amerika möglich (Latin-1, 1 Byte pro Zeichen), "UTF-16" (2 oder 4 Byte pro Zeichen) ist in modernen Browsern ebenfalls möglich.

Die <!DOCTYPE> Deklaration beschreibt den Dokumenttyp und die verwendete Sprachversion. Theoretisch wäre es möglich, dass der Browser hier eine aktive Internetverbindung verlangt, um die xhtml1-strict.dtd Datei zu laden. Um das mit Sicherheit zu verhindern kann man diese Datei auf seinen Server abspeichern und dann "http://www.w3.org/..." durch "lokaleKopie_xhtml1-strict.dtd" ersetzen.

Daran schließt sich der <html> Block, der aus <head> und <body> besteht, xmlns legt den Namensraum des Dokuments fest. lang="de" ist eigentlich überflüssig, hilft aber älteren Browsern.
Im <meta> Tag wird der zu verwendende Zeichensatz angegeben.

War HTML noch eine sehr fehlertolerante Sprache, müssen XHTML-Dokumente wohlgeformt sein. Häufig tolerieren die aktuellen Browser kleine Fehler, doch sollte man sich nicht darauf verlassen. Außerdem können daraus Anzeigefehler folgen.

Worauf muss man achten:

Tags und Attribute werden klein geschrieben, Werte müssen in Anführungszeichen stehen. Also <table width="100%"> und nicht <TABLE Width=100%>
Attributminimierung ist verboten. Also <input disabled="disabled"> anstatt <input disabled>, da jedes Attribut einen Wert besitzen muss. Jeder Wert muss in Anführungszeichen stehen, innerhalb des Wertes sind Leerzeichen erlaubt, aber keine Zeilenumbrüche. <p title="Eine langer Text"> sollte also in einer einzigen Zeile stehen.
Das <lang>-Attribut kann fremdsprachige Objekte kennzeichnen:
<div lang="it" xml:lang="it">Buon Giorno!</div>
Alle Elemente müssen geschlossen sein, also muss es zu jedem <p> ein </p> geben, zu jedem <li> ein </li>.. Elemente ohne Inhalt werden nach einem Leerzeichen beendet. <br /> oder <img href="...." />.
Achtung - ältere Browser interpretieren einen leeren Absatz <p /> genauso wie <p>!
Alle Elemente müssen korrekt verschachtelt sein. <b><i>Wort</i></b> ist korrekt, <b><i>Wort</b></i>ist falsch.
p kann keine Blocklevel-Elemente enthalten, also kein table, list, div,...
nur div kann alles enthalten
Das name-Attribut ist verschwunden und wird komplett durch id="..." ersetzt, nur ein id pro Element ist erlaubt.
HTML: <a href="#anker">Verweis</a> .... <a name="anker">Text</a>
XHTML: <a href="#anker">Verweis</a> .... <a id="anker">Text</a>
Älteren Browsern kann man helfen, wenn man sowohl id als auch name angibt.

Beachte

Stößt der Browser auf ein ihm unbekanntes Element (möglicherweise ein Tippfehler im Tag) gibt er den Inhalt des Elements wieder, alle Attribute muss er ignorieren. Genauso sind unbekannte Attribute zu ignorieren.
Als Leerzeichen werden interpretiert: Leerzeichen, Tabulator, Carriage Return, Line Feed, Page Feed.
Nur bei preformatted Text werden alle Leerzeichen erhalten, sonst werden Leerzeichen am Anfang und Ende eines Blockelements entfernt und im Inneren auf ein einzelnes kollabiert.
Script- undf Styleelemente sind in XHTML als #PCDATA deklariert. Folglich sind < und & zu maskieren, wenn sie nicht den Beginn eines Markup darstellen.
Will man dies etwa in einem Skript-Abschnitt vermeiden, muss der Abschnitt als CDATA beschrieben werden. Die Deklaration wird hier als Javascript-Kommentar getarnt, da Javascript ihn nicht verstehen kann.
     <script type="text/javascript" >
          /* <![CDATA[ */
          ........
          /* ]]> */
     </script>
Beste Alternative: externe Dateien erstellen und diese einbinden.
wichtige Elementverbote:
a kann keine weiteren a enthalten
pre kann img, object, big, small, sub, sup nicht enthalten
form kann kein weiteres form enthlaten, label kein label.
Das &-Zeichen in Attributen (etwa bei links mit cgi-Parametern) ist mit & zu maskieren.

Wichtige Elemente

	XHTML	HTML 4, jetzt verboten
Top level Elemente	html head body	frameset
Head Elemente	link meta script style title	isindex
Block Level Elemente	address blockquote del div h1 ... h6 hr ins p pre	center
Listen	dl dt dd li ol ul	dir menu
Tabellen	table caption colgroup col thead tfoot tbody tr td th
Formulare	form button fieldset legend input label select optgroup option textarea
Spezielle Inline Elemente	a br img map area object param q script span sub sup	applet font iframe
Phrasenelemente	abbr acronym cite code del dfn em ins kbd samp strong var
Schriftstilelemente	b big i small tt	s strike u
Frames	---	frameset frame noframes

Ein äußerst hilfreichs Werkzeug zum 'Säubern' und Formatieren von XHTML-Code, sowie zur Umwandlung von HTML nach XHTML ist das freie Programm Tidy. Für Windows heißt es TidyGUI.

Fertige Seiten können beim W3C 'validiert' werden, dabei werden online alle Syntax-Fehler aufgezeigt.

Beachte: Der Internet-Explorer kann erst ab Version 7 halbwegs korrekt mit XHTML umgehen. Die übrigen Browser (Opera, Safari, Firefox, Konqueror,...) machen keine Probleme.

	Prof. Urban Materialien zur Informatik

Prof. Urban Materialien zur Informatik

XHTML

Wichtige Elemente

Prof. Urban
Materialien zur Informatik