Der Dokumentenanfang, noch vor dem nun erweiterten <html>-Tag, muss zwingend bestimmte Einträge enthalten, damit der Browser die Seite als XHTML erkennt und ältere Browser die Tags richtig interpretieren können. Diese Einträge sind bei anderen HTML-Sprachversionen nicht immer zwingend notwendig gewesen:
Die <?xml version="..." ...>-Definition enthält nun den zu verwendenden Zeichensatz - die <meta>-Angabe für den Zeichensatz (content-type) entfällt dafür. Sinn: Der User Agent (z.B. Browser) erhält bereits in der ersten Zeile die für XML wichtige Information über den verwendeten Zeichensatz, da Umlaute und andere Sonderzeichen stets nur in codierter Form vorliegen dürfen.
Anmerkung 1: Ältere Browser (z.B. IE 3.x) haben Probleme mit dieser Dokumentdeklaration, und zeigen diese Zeile (leider) am Bildschirm an. Editoren wie Frontpage 2000, die mit der Deklaration nichts anzufangen wissen, verschieben diese Deklaration in den body-Bereich.
Wird im XHTML-Dokument trotzdem eine anders lautende meta-Zeichensatzdefinition angegeben (z.B. vergessen zu entfernen), wird diese zwar von bisherigen Browsern ausgeführt, allerdings entspricht dies nicht dem XHTML-Standard.
Anmerkung 2: Wenn Sie die Dateiextension .xhtml verwenden, darf die Datei keine Fehler enthalten, da sie dann über den XML-Parser abgearbeitet wird. Mehr dazu ...
Die Datei-Definitionen sehen je nach Einsatz(zweck) wie folgt aus (Groß- und Kleinschreibung beachten):
Zeichensatz-Definition
Unicode 8 bit:
<?xml version="1.0" encoding="UTF-8"?>
Unicode 16 bit:
<?xml version="1.0" encoding="UTF-16"?>
oder West-Europäisch:
<?xml version="1.0" encoding="ISO-8859-1"?>
Die meta-Angabe für den Zeichensatz entfällt dafür vollständig.
DOCument-TYPE-Definition - Zeilenumbruch bitte beachten (!):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
strict bedeutet, dass nur noch erlaubte Tags verwendet werden.
oder:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
transitional bedeutet, dass in der Datei Scripts (CSS, JavaScript u.a.)
enthalten sind.
oder:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
frameset bedeutet, dass in der Datei ein Frameset steht.
html-Tag ist erweitert:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
Alle Beispiele wurden dem Originaldokument entnommen, bzw. hier angepasst.
Für dieses Dokument sieht das Dateigerüst wie folgt aus:
<?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">
<?xml-stylesheet href="../_s/f-sF.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<!-- title-Tag, meta-Angaben und scripts //-->
</head>
<body>
<!-- der Text //-->
</body>
</html>
Wie auch bei dem XML-Standard werden Scripts (CSS und JavaScripts), die folgende Zeichen bzw. Zeichenkombinationen enthalten nicht ausgeführt: < oder & oder ]]> oder --.
Code, der diese Zeichen enthält, muss in externe Dateien untergebracht werden (empfohlen) oder in der XHTML-Datei entsprechend »maskiert« werden. Der Schutz sieht folgendermaßen aus (fettformatierte Zeichenketten):
<script type="text/javascript"><![CDATA[ />
/* hierin steht
<tag>geschützter Text, wobei Tags nicht ausgeführt werden</tag>
bzw. das JavaScript */
<! ]]></script>.
Zeichen, die sonst Tag-Bestandteil sind, werden im Inneren dieses Bereiches nicht interpretiert (d.h. < und & sind erlaubte Zeichen). Eine Verschachtelung mehrerer CDATA-Bereiche ist nicht erlaubt. Zu beachten ist, dass die gängigen Browser noch Probleme mit dem richtigen Umgang mit dem CDATA-Bereich haben, Scripts werden teilweise nicht korrekt ausgeführt.
Eine Umgehung des Abwärtskompatibilitätsproblems sieht für Styles beispielsweise so aus und funktioniert z.Z. ohne Fehlermeldung:
<style type="text/css">
<!-- --> <![CDATA[ /> <!--
....
//--> <! ]]>
</style>
XHTML ist wie XML eine erweiterbare Seitenbeschreibungssprache. Die Document Type Definition (DTD) enthält alle Formatierungsdefinitionen, auch selbstdefinierte, wie es unter XML möglich ist. Die Erweiterungen können in der HTML-Datei selbst, aber auch in einer externen DTD-Datei ausgelagert sein.
Jeder Entwickler kann also eigene Definitionen schreiben, sofern die Standarddefinitionen nicht seinem Anspruch genügen.
Zukünftige Entwicklungen von XML sehen vor, dass die DTD durch XML-Elemente ersetzt werden. Browser müssen dann nur noch einen einzigen Internet-Standard unterstützen: XML.
Die wichtigsten Regeln zu den XHTML-Tags
Die Tag-Reihenfolge muss logisch gegliedert sein (im Original well-formed genannt), d.h. Tags dürfen sich nicht überlappen, oder anders gesagt, nicht verschachtelt sein und die hierarchischen Aspekte der Tags sind zu beachten. Also <i><b>richtig</b></i> und nicht <i><b>falsch</i></b> und die Tag-Reihenfolge verbietet das Umschließen von bestimmten Tags durch »übergeordnete« Tags, wie z.B. <span ...><p>Absatz- Text</p></span> - korrekt: <p><span ...>Absatz-Text</span></p>.
Innerhalb der Tags bzw. zwischen Attributen sind Zeilenumbrüche bzw. viele Leerzeichen zu vermeiden.
Alle Tags müssen ein End-Tag besitzen, also wieder geschlossen werden (closed), so z.B. der Absatz-Tag <p>Text</p>.
Tags mit einem optionales Endtag (nach HTML 4) müssen stets geschlossen werden. Hierzu zählen beispielsweise: <body>, <dd>, <dt>, <option>, <td>.
Tags, die kein »natürliches« End-Tag besitzen - sogenannte inhaltsleere Tags -, müssen mittels eines Slash / vor der >-Klammer terminiert werden. Um mit älteren Browsern kompatibel zu bleiben, ist vor dem Slash ein Leerzeichen einzufügen. So ergibt sich beispielsweise <br /> und <img src="xxx.gif" alt="" />. Betroffen sind folgende Tags: <area>, <base>, <br>, <col>, <frame>, <img>, <input>, <isindex>, <link>, <meta>, <param>.
Diese kurze Schreibweise ist der theoretisch denkbaren Option <br></br> usw. unbedingt vorzuziehen.
Aber: Leere Absätze bzw. Zeilenumbrüche, die nach XML <p/> bzw. <br></br> codiert werden, müssen in XHTML <p></p> bzw. <br /> geschrieben werden, da sonst mit Fehlermeldungen zu rechnen ist.
Bei Tags und Attribut-/Parameter-Namen wird zwischen Groß- und Kleinschreibung unterschieden (case-sensitiv), wobei Standardtags klein (lower case) zu schreiben sind; also <tag attribut="wert"> und nicht <TAG ATTRIBUT="WERT">, da es sich hierbei um unterschiedliche Tags handelt. Allgemeine Parameterwerte wie "center" oder "top" sollten ebenfalls kleingeschrieben werden, die Schreibweise von Pfad- und Dateinamen muss der realen Schreibweise entsprechen (da die meisten Server unter Unix laufen).
Außerdem müssen alle Attribute/Parameterwerte in Anführungsstrichen stehen (quoted), also border="0" und alt="hinweise" und target="../_top" usw.
Und: Auch in den CSS-Definitionen ist auf eine korrekte Groß- und Kleinschreibung zu achten und auch hier sind die Standardtags klein zu schreiben. Die W3C empfiehlt, die CSS-Definition in einem korrekten Parsebaum zu schreiben, der sich nach folgenden Regeln aufbaut: Tags und Classes rückwärts Alphabetisch angeordnet und für jedes Attribut eine neue Zeile. Dies gilt unabhängig davon, ob die CSS-Defintition in der XHTML-Datei steht oder in einer externen CSS-Datei.
Die CSS-Datei für dieses Dokument, hier zum Ansehen.
Die kurze Schreibweise von bestimmten Attributen (sog. Boolean-Attribute) ist nicht mehr erlaubt, so muss compact nun compact="compact" usw. geschrieben werden. Folgende Attribute sind betroffen: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, selected.
In bestimmten Tags sind nun Attribute vorgeschrieben:
Das <img>-Tag muss nun das Attribut alt="" enthalten, das <table>-Tag das Attribut summary="" - wobei der Wert auch leer (="") bleiben darf.
Style-Tags müssen mit dem Attribut type="text/css", Script-Tags beispielsweise mit type="text/javascript" versehen werden.
Tags und Parameter, die der Formatierung von Elementen dienen, sollen auf Dauer verschwinden bzw. durch CSS ersetzt werden. Die W3C bezeichnet Tags und Attribute, die nicht mehr verwendet werden sollen als missbilligt (deprecated). Ihre Verwendung ist nur im Dokumenten-Typ transitional erlaubt, der jedoch im Standard XHTML 1.1 wegfiel.
Die Sprungmarken für Links sehen nun so aus: <a id="textmarke1">; um allerdings bei XHTML 1.0 Browser-kompatibel zu bleiben, kann der Tag folgendermaßen geschrieben werden <a id="textmarke1" name="textmarke1">.
Aber: Für zukünftige XHTML-Versionen ist das name-Attribut ausgeschlossen.
Betroffen sind die Tags: <a>, <applet>, <form>, <frame>, <iframe>, <img>, und <map>.
Einige Formatierungsanweisungen in Tags müssen durch CSS (Cascade Style Sheets) ersetzt werden, wie folgende Tag-Kombination:
<hr size="2" noshade="noshade" color="770077" width="80%" align="left" />
durch
<hr style="border : 2pt solid #770077; width : 80%; text-align : left;" />,
um ein vergleichbares Anzeigeergebnis zu erhalten.
Eine Reihe von Tags wie z.B. der <center>-Tag oder der <font size="x">-Tag sind in dem Standard nicht mehr enthalten, hier gelten ausschließlich noch Style-Attribute. Der Tag <center> wird zum Attribut <... align="center"> bzw. Style <... style="text-align:center">, das font-Tag wird zum Style. Im Text bedeutet es, einzelne Worte, Zeilen oder Abschnitte nicht mehr mit <font>, sondern mit <span style="..." class="..."> in der Größe zu formatieren.
Die offizell nicht mehr unterstützten Tags lauten: <basefont>, <center>, <dir>, <font>, <listing>, <menu>, <plaintext>, <s>, <strike>, <u>, <xmp>.
Der beliebte, aber nie offizielle Tag <nobr>...</nobr> schreibt sich in CSS als Attribut style="white-space:nowrap".
Im Weiteren sind noch eine Reihe von Attributen bestehender Tags aus dem Standard genommen worden, für die nunmehr ausschließlich Style-Sheets gelten; diese sollen allerdings an dieser Stelle nicht weiter erläutert werden (Einzelheiten hierzu siehe die Dokumentation der W3C).
Bestimmte Tag-Kombinationen / -Verschachtelungen sind verboten:
<a></a> darf kein anderes <a>-Element enthalten.
<pre></pre> darf nicht enthalten: <big>, <img>, <object>, <small>, <sub> oder <sup>.
Innerhalb einer Button-Definition dürfen nicht enthalten sein: <button>, <fieldset>, <form>, <iframe>, <input>, <isindex>, <label>, <select>, oder <textarea>.
Die Verschachtelung von Label- bzw. Form-Elementen ist nicht mehr zulässig.
Offline vs. Online
Nach getaner Arbeit und Anpassung der XHTML-Seiten sollten Sie diese unbedingt online testen, bevor Sie Ihre Seiten allgemein zugänglich machen. Eine Reihe von Seiten funktionieren nämlich offline wie gewünscht, online jedoch nicht. Betroffen sind Seiten, die JavaScript enthalten. Auch sollten Sie unterschiedliche (!) Browser zum Test verwenden, da auch hier unterschiedliche Ergebnisse und Fehlermeldungen erscheinen können - verlassen Sie sich nicht auf Ihren »Lieblings-Browser«. Dabei gilt: Browser, die häufiger Fehlermeldungen ausgeben sind zuverlässiger, da sie weniger fehlertolerant sind.
Vor allem XHTML-Seiten mit JavaScript funktionieren oft nicht (vgl. Infos weiter oben). Das liegt an den strengen Beschränkungen - vor allem die nicht erlaubten Zeichenketten stellen meist ein KO-Kriterum dar. Aus diesem Grund sind auch die Seiten dieses Web-Angebotes (noch) nicht ausschließlich in XHTML geschrieben.
Falls Sie auf diesen
mit größter Sorgfalt erstellten Seiten
trotzdem Fehler finden sollten,
oder Ergänzungen vorschlagen wollen,
senden Sie mir bitte eine e-M@il
mit den entsprechenden Angaben.
Diese Seite ist seit dem 28. Februar 2000
im Netz und wird laufend erweitert.
Die Datei-Definition für XHTML-Dokumente
Kopfteil, Zeichensatzdeklaration & DOCument-TYPE,
DTD.
Logische Gliederung der Tags beachten (well-formed, properly nested),
werden Scripts (CSS und JavaScripts), die folgende Zeichen bzw. Zeichenkombinationen enthalten nicht ausgeführt: < oder & oder ]]> oder --.
/ vor der >-Klammer terminiert werden. Um mit älteren Browsern kompatibel zu bleiben, ist vor dem Slash ein Leerzeichen einzufügen. So ergibt sich beispielsweise <br /> und <img src="xxx.gif" alt="" />. Betroffen sind folgende Tags: <area>, <base>, <br>, <col>, <frame>, <img>, <input>, <isindex>, <link>, <meta>, <param>.
