XHTML

(Auszug aus "XML in a Nutshell" von Elliotte Rusty Harold & W. Scott Means)

XHTML ist eine offizielle W3C-Empfehlung (Recommendation). Es definiert eine XML-kompatible Version von HTML, oder vielmehr definiert es HTML als XML-Anwendung anstatt als SGML-Anwendung neu. Durch reines Anschauen eines XHTML-Dokuments würden Sie vielleicht nicht einmal feststellen, dass da irgendetwas anders ist. Es verwendet die gleichen Tags <p>, <li>, <table>, <h1> usw., mit denen Sie vertraut sind. Elemente und Attribute haben die gleichen vertrauten Namen wie in HTML. Die Syntax ist im Prinzip gleich.

Der Unterschied besteht nicht so sehr in dem, was erlaubt ist, sondern in dem, was nicht erlaubt ist. <p> ist ein gültiges XHTML-Tag, <P> ist dagegen nicht erlaubt. <table border="0" width="515"> ist zulässiges XHTML; <table border=0 width=515> ist es nicht. Ein Absatz, der mit <p> beginnt und mit </p> endet, ist zulässiges XHTML, ein Absatz, bei dem das schließende Tag </p> fehlt, ist es nicht. Die meisten existierenden HTML-Dokumente müssten gründlich überarbeitet werden, bevor aus ihnen wohlgeformte und gültige XHTML-Dokumente würden. Wenn sie dann aber einmal gültige XHTML-Dokumente sind, sind sie auch gültige XML-Dokumente, die mit den gleichen Editoren, Parsern und anderen Werkzeugen bearbeitet werden können, mit denen Sie auch an einem XML-Dokument arbeiten.

Von HTML zu XHTML

Die meisten der Änderungen, die erforderlich sind, um ein existierendes HTML-Dokument in ein XHTML-Dokument zu verwandeln, betreffen die Wohlgeformtheit des Dokuments. Wenn Sie beispielsweise ein altes HTML-Dokument vor sich haben, müssen Sie vermutlich wenigstens diese Veränderungen durchführen, um es in XHTML zu konvertieren:

  • Fügen Sie fehlende End-Tags hinzu, wie </p> und </li>.
  • Schreiben Sie Elemente so um, dass sie geschachtelt sind, anstatt sich zu überschneiden. Ändern Sie zum Beispiel <p><em>ein betonter Absatz</p></em> in <p><em>ein betonter Absatz</em></p>.
  • Setzen Sie einfache oder doppelte Anführungszeichen um Attributwerte. Ändern Sie zum Beispiel <p align=center> in <p align="center">.
  • Geben Sie allen verkürzten Booleschen Attributen Werte (die ihren Namen entsprechen). Ändern Sie zum Beispiel <input type="checkbox" checked> in <input type="checkbox" checked="checked">.
  • Ersetzen Sie alle auftretenden & oder < in Zeichendaten oder Attributwerten durch &amp; und &lt;. Ändern Sie zum Beispiel A&P in A&amp;P und <a href="http://www.google.com/search?client=googlet&q=Java%20XML"> in <a href="http://www.google.com/search?-client=googlet&amp;q=Java%20XML">.
  • Sorgen Sie dafür, dass das Dokument ein einziges html-Wurzelelement besitzt.
  • Ändern Sie leere Elemente wie <hr> in <hr/> oder <hr></hr>.
  • Fügen Sie Bindestriche in die Kommentare ein, so dass aus <! dies ist ein Kommentar> schließlich <!-- dies ist ein Kommentar --> wird.
  • Kodieren Sie das Dokument in UTF-8 oder UTF-16, oder fügen Sie eine XML-Deklaration hinzu, die festlegt, in welchem Zeichensatz es kodiert ist.

XHTML fordert nicht nur Wohlgeformtheit, sondern auch Gültigkeit. Um ein gültiges XHTML-Dokument zu erzeugen, müssen Sie außerdem folgende Änderungen vornehmen:

  • Fügen Sie dem Dokument eine DOCTYPE-Deklaration hinzu, die auf eine der drei XHTML-DTDs verweist.
  • Schreiben Sie alle Element- und Attributnamen in Kleinbuchstaben.
  • Passen Sie das Markup an, damit das Dokument gemäß der DTD gültig ist – entfernen Sie zum Beispiel Elemente, die nicht zum Standard gehören, wie etwa marquee, fügen Sie notwendige Attribute hinzu, wie das alt-Attribut von img, oder entfernen Sie Kindelemente aus dem Inneren von Elementen, in denen sie nicht erlaubt sind, wie blockquote in p.

Darüber hinaus stellt die XHTML-Spezifikation einige Anforderungen, die im Prinzip weder für die Wohlgeformtheit noch für die Gültigkeit notwendig sind. Sie erleichtern jedoch das Parsen von XHTML-Dokumenten ein wenig. Diese Anforderungen sind:

  • Das Wurzelelement des Dokuments muss html sein.
  • Es muss eine DOCTYPE-Deklaration geben, die einen PUBLIC-Identifier benutzt, um eine der drei XHTML-DTDs zu identifizieren.

Schließlich können Sie, falls Sie das wünschen, eine XML-Deklaration oder eine xmlstylesheet-Verarbeitungsanweisung in den Prolog Ihres Dokuments einfügen – Sie müssen das aber nicht tun.

Das folgende Code-Beispiel zeigt ein HTML-Dokument von der O'Reilly-Website, das viele der Gültigkeitsprobleme verdeutlicht, die Sie heutzutage im Web finden. Eigentlich ist diese Seite sogar ordentlicher als die meisten anderen. Trotzdem stehen nicht alle Attributwerte in Anführungszeichen. Das Attribut noshade des Elements HR besitzt nicht einmal einen Wert. Es gibt keine Dokumenttyp-Deklaration. Die Tags sind wahlweise in Groß- und Kleinbuchstaben geschrieben, hauptsächlich aber in Großbuchstaben. Die DD-Elemente besitzen keine End-Tags, und einige Zeichendaten in der zweiten Definition sind nicht Bestandteil eines DT oder DD.

<HTML>
  <HEAD>
    <TITLE>O'Reilly Shipping Information</TITLE>
  </HEAD>
  <BODY BGCOLOR="#ffffff" VLINK="#0000CC" LINK="#990000" TEXT="#000000">
    <table border=0 width=515>
      <tr>
        <td>
          <IMG SRC="/www/graphics_new/generic_ora_header_wide.gif" BORDER=0>
          <H2>U.S. Shipping Information </H2>
          <HR size="1" align=left noshade>
          <DL>
            <DT><B>UPS Ground Service (Continental US only -- 5-7 business days):</B></DT>
            <DD>
              <PRE>
              $  5.95 - $ 49.99 ......................... $ 4.50
              $ 50.00 - $ 99.99 ......................... $ 6.50
              $100.00 - $149.99 ......................... $ 8.50
              $150.00 - $199.99 ......................... $10.50
              $200.00 - $249.99 ......................... $12.50
              $250.00 - $299.99 ......................... $14.50
              </PRE>
            <DT><B>Federal Express:</B></DT>
            (Shipping within 24 hours of receipt of order by O'Reilly)
            <DD>
              <PRE>
                <EM>1 or 2 books</EM>:
                Economy 2-day ............................. $ 8.75
                Overnight Standard (Afternoon Delivery) ... $12.75
                Overnight Priority (Morning Delivery) ..... $16.50
              </PRE>
          </DL>
          <b>Alaska and Hawaii:</b> add $10 to Federal Express rates.
          <P>
            <A HREF="int-ship.html"><b>International Shipping Information</b></A>
          <P>
          <CENTER>
            <HR SIZE="1" NOSHADE>
            <FONT SIZE="1" FACE="Verdana, Arial, Helvetica">
              <A HREF="http://www.oreilly.com/"><B>O'Reilly Home</B></A> <B> | </B><A HREF="http://www.oreilly.com/sales/bookstores"><B>O'Reilly Bookstores</B></A> <B> | </B><A HREF="http://www.oreilly.com/order_new/"><B>How to Order</B></A> <B> | </B><A HREF="http://www.oreilly.com/oreilly/contact.html"><B>O'Reilly Contacts<BR></B></A><A HREF="http://www.oreilly.com/international/"><B>International</B></A> <B> | </B><A HREF="http://www.oreilly.com/oreilly/about.html"><B>About O'Reilly</B></A> <B> | </B><A HREF="http://www.oreilly.com/affiliates.html"><B>Affiliated Companies</B></A><p>
              <EM>&amp;copy; 2000, O'Reilly Media, Inc.</EM>
            </FONT>
          </CENTER>
        </td>
      </tr>
    </table>
  </BODY>
</HTML>

Code-Beispiel: Ein typisches HTML-Dokument

Das nächste Beispiel zeigt dieses Dokument, nachdem es nach XHTML konvertiert wurde. Alle zuvor angegebenen sowie einige weitere Probleme wurden behoben. Eine Reihe von unzulässigen Präsentationsattributen, wie z.B. die Attribute size und noshade von hr, musste durch CSS-Styles ersetzt werden. Wir haben außerdem die notwendigen Deklarationen für den Dokumenttyp und den Namensraum hinzugefügt. Dieses Dokument kann nun sowohl von HTML-Browsern wie auch von XML-Browsern und -Parsern gelesen werden.

<!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">
  <head>
    <meta name="generator" content="HTML Tidy, see www.w3.org" />
    <style type="text/css">
      body      {backgroundColor: #FFFFFF; color: #000000}
      a:visited {color: #0000CC}
      a:link    {color: #990000}
    </style>
    <title>O'Reilly Shipping Information</title>
  </head>
  <body>
    <table border="0" width="515">
      <tr>
        <td><img src="/www/graphics_new/generic_ora_header_wide.gif" style="border-width: 0" alt="O'Reilly"/>
          <h2>U.S. Shipping Information</h2>
          <hr style="height: 1; text-align: left"/>
          <dl>
            <dt><b>UPS Ground Service (Continental US only -- 5-7 business days):</b></dt>
            <dd>
              <pre>
              $  5.95 - $ 49.99 ......................... $ 4.50
              $ 50.00 - $ 99.99 ......................... $ 6.50
              $100.00 - $149.99 ......................... $ 8.50
              $150.00 - $199.99 ......................... $10.50
              $200.00 - $249.99 ......................... $12.50
              $250.00 - $299.99 ......................... $14.50
              </pre>
            </dd>
            <dt><b>Federal Express:</b></dt>
            <dd>(Shipping within 24 hours of receipt of order by O'Reilly)</dd>
            <dd>
              <pre>
                <em>1 or 2 books</em>:
                Economy 2-day ............................. $ 8.75
                Overnight Standard (Afternoon Delivery) ... $12.75
                Overnight Priority (Morning Delivery) ..... $16.50
              </pre>
            </dd>
          </dl>
          <b>Alaska and Hawaii:</b> add $10 to Federal Express rates.
          <p><a href="int-ship.html"><b>International Shipping Information</b></a></p>
          <div style="font-size: 1; font-face: Verdana, Arial, Helvetica; text-align: center">
            <hr style="height: 1"/>
            <a href="http://www.oreilly.com/"><b>O'Reilly Home</b></a> <b>|</b> <a href="http://www.oreilly.com/sales/bookstores"><b>O'Reilly Bookstores</b></a> <b>|</b> <a href="http://www.oreilly.com/order_new/"><b>How to Order</b></a><b>|</b> <a href="http://www.oreilly.com/oreilly/contact.html"><b>O'Reilly Contacts<br /></b></a> <a href="http://www.oreilly.com/international/"><b>International</b></a> <b>|</b> <a href="http://www.oreilly.com/oreilly/about.html"><b>About O'Reilly</b></a> <b>|</b> <a href="http://www.oreilly.com/affiliates.html"><b>Affiliated Companies</b></a>
          </div>
            <p style="font-size: 1; font-family: Verdana, Arial, Helvetica"><em>&amp;copy; 2000, O'Reilly Media, Inc.</em></p>
        </td>
      </tr>
    </table>
  </body>
</html>

Code-Beispiel: Ein gültiges XHTML-Dokument

Anmerkung: Es kann nerven, bei großen Dokumenten oder gar Sammlungen mit vielen Dokumenten diese Änderungen vorzunehmen. Glücklicherweise gibt es ein Open Source-Werkzeug, das Ihnen den größten Teil der Arbeit abnimmt. Dave Raggets Tidy ist ein C-Programm, das auf die meisten wichtigen Betriebssysteme portiert wurde und in der Lage ist, ziemlich hässliches HTML in gültiges XHTML zu konvertieren. Um zum Beispiel die Datei bad.html in die Datei good.xml umzuwandeln, müssten Sie Folgendes eingeben:

 % tidy --output-xhtml yes bad.html good.xml 

Tidy verbessert, so viel es kann, und meldet Ihnen dann, was es nicht verbessern konnte, so dass Sie das Dokument von Hand weiterbearbeiten können. Es teilt Ihnen beispielsweise mit, wenn ein erforderliches alt-Attribut in einem img-Element fehlt.

Drei DTDs für XHTML

XHTML gibt es in drei Arten, je nachdem, für welche DTD Sie sich entscheiden:

Strict

Das ist die vom W3C empfohlene Form von XHTML. Sie enthält alle grundlegenden Elemente und Attribute, wie p und class. Es sind jedoch keine der nicht empfohlenen Elemente und Attribute enthalten, wie applet und center. Außerdem verbietet sie den Einsatz von Präsentationsattributen, wie die im body-Element auftretenden Attribute bgcolor, vlink, link und text. Diese Funktionen werden stattdessen von CSS bereitgestellt. Strict XHTML wird durch diese DOCTYPE-Deklaration gekennzeichnet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" >

Das Code-Beispiel Ein gültiges XHTML-Dokument verwendet diese DTD.

Transitional

Das ist eine lockerere Form von XHTML, die Sie einsetzen können, wenn es Ihnen nicht ohne weiteres möglich ist, auf die nicht empfohlenen Elemente und Attribute wie applet und bgcolor zu verzichten. Sie wird durch diese DOCTYPE-Deklaration gekennzeichnet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
Frameset

Diese Form ist mit der Transitional DTD identisch, nur dass auch Frame-Elemente wie frameset und iframe erlaubt sind. Sie wird durch folgende DOCTYPE-Deklaration gekennzeichnet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd" >

Alle drei DTDs benutzen den gleichen -Namensraum. Sie sollten sich für den Einsatz der Strict DTD entscheiden, es sei denn, Sie haben einen triftigen Grund, eine andere DTD zu verwenden.

Browser-Unterstützung für XHTML

Viele Webbrowser, insbesondere Internet Explorer 5.0 und älteren Versionen sowie Netscape 4.79 und früher, behandeln XHTML inkonsistent. Natürlich verlangen sie es nicht, da sie ja auch eine Menge schlecht geformtes, ungültiges und durch und durch fehlerhaftes HTML akzeptieren. Allerdings haben sie darüber hinaus Probleme, wenn sie auf bestimmte gebräuchliche XHTML-Konstrukte stoßen

Die XML-Deklaration und Verarbeitungsanweisungen

Manche Browser zeigen Verarbeitungsanweisungen und die XML-Deklaration auf der Seite (inline) an. Diese Browser sollten nach Möglichkeit gemieden werden.

Nur wenige Browser erkennen oder respektieren die Encoding-Deklaration der XML-Deklaration. Viele Browser sind darüber hinaus nicht in der Lage, automatisch UTF-8- oder UCS-2-Unicode-Text zu erkennen. Falls Sie einen Nicht-ASCII-Zeichensatz benutzen, sollten Sie ein meta-Element in den Header einfügen, das den Zeichensatz identifiziert:

<meta http-equiv="Content-type" content='text/html; charset="ISO-8859-1"'></meta>

Leere Elemente

Browser behandeln beide Formen der Syntax für leere Elemente sehr unterschiedlich. Manche Browser verstehen <hr/>, aber nicht <hr></hr> (üblicherweise zeichnen sie dann zwei horizontale Linien statt nur einer), während andere <hr></hr> erkennen, aber nicht <hr/> (hier wird die horizontale Linie typischerweise ganz weggelassen). Das brauchbarste Ergebnis scheint dadurch erreicht zu werden, dass man ein Leeres-Element-Tag mit einem optionalen Attribut benutzt, etwa class oder id, z.B. <hr class="empty" />. Es gibt eigentlich keinen triftigen Grund für das class-Attribut an dieser Stelle bis auf die Tatsache, dass sein Vorhandensein die Browser davon abhält, das /> zu übersehen. Jedes andere Attribut, das die DTD erlaubt, würde sich genauso gut eignen.

Wenn andererseits eine bestimmte Instanz eines Elements leer ist, aber nicht alle Instanzen dieses Elements leer sein müssen – wie zum Beispiel bei einem p, das keinen Text enthält –, sollten Sie zwei Tags wie <p></p> benutzen, nicht das einzelne Tag für leere Elemente, <p/>.

Entity-Referenzen

Eingebettete Skripten enthalten oft reservierte Zeichen wie & oder <, so dass das Dokument, in dem sie stehen, nicht wohlgeformt ist. Die meisten JavaScript- und VBScript-Interpreter würden jedoch &amp; oder &lt; anstelle der Operatoren, die sie repräsentieren, nicht erkennen. Falls das Skript nicht ohne diese Operatoren umgeschrieben werden kann (zum Beispiel, indem aus einem Kleiner-als-Vergleich ein Größer-als- oder Ist-gleich-Vergleich mit vertauschten Argumenten wird), sollten Sie auf externe Skripten umsteigen, anstatt eingebettete zu benutzen.

Darüber hinaus erkennen die meisten nicht-XML-fähigen Browser die vordefinierte Entity-Referenz &apos; nicht. Falls möglich, sollten Sie diese Referenz vermeiden und stattdessen einfach das literale Zeichen ' verwenden. Die einzige Stelle, an der das zu einem Problem werden könnte, ist innerhalb von Attributwerten, die in einfache Anführungszeichen eingeschlossen sind, weil sie doppelte Anführungszeichen enthalten. Die meisten Browser erkennen jedoch die Entity-Referenz &quot; für das Zeichen ", so dass Sie den Attributwert in doppelte Anführungszeichen einschließen und die doppelten Anführungszeichen, die Bestandteil des Attributwerts sind, mit &quot; schützen können.

Weitere nicht-unterstützte Funktionen und Properties

Es gibt weitere feine Unterschiede darin, wie Browser mit XHTML umgehen und wie andererseits XHTML behandelt werden sollte. Zum Beispiel erlaubt XHTML Zeichenreferenzen und CDATA-Abschnitte, obwohl fast keiner der aktuellen Browser diese Konstrukte versteht. Allerdings dürfte es unwahrscheinlich sein, dass so etwas auftaucht, wenn Sie von HTML auf XHTML umsteigen. Und wenn Sie gleich in XHTML arbeiten, können Sie solche Konstrukte im Allgemeinen vermeiden.

Mozilla, Opera 5.0 und neuere Versionen sowie Netscape 6.0 und neuere Versionen können gültiges XHTML ohne Schwierigkeiten, und ohne dass die Autoren sich mit den genannten Problemen herumschlagen müssen, parsen und anzeigen. Safari sowie Internet Explorer 5.5 und können es in der Regel anzeigen, solange die Seiten fälschlich als text/html gekennzeichnet sind. Beise werden jedoch verwirrt, wenn die Seiten mit dem richtigen MIME-Typ, application/xhtml+xml, gekennzeichnet sind. Da jedoch viele Benutzer ihre Browser noch nicht bis zu dem Grad aktualisiert haben, den XHTML erfordert, werden benutzerfreundliche Webdesigner diese Hinweise auch noch in der Zukunft beachten müssen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema XML bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

  


Copyright © 2005 O'Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "XML in a Nutshell" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstraße 81, 50670 Köln, kommentar(at)oreilly.de