http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Die globale Struktur eines XHTML-Dokuments

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Ein XHTML-Dokument lässt sich grob in vier Abschnitte aufteilen:

  1. Die XML-Deklaration; eine Zeile, die unter anderem die XML-Version angibt.
  2. Die Dokumenttyp-Deklaration; eine Zeile, die den XHTML-Dokumenttyp angibt.
  3. Einen Dokumentkopf head, der den Dokumenttitel (das title-Element) und zusätzliche (Meta-)Informationen enthält.
  4. Einen Dokumentrumpf body, der unter anderem den Inhalt des Dokuments enthält, der im Browser dargestellt wird.

Vor und nach jedem Abschnitt kann Leerraum vorkommen.

Leerraum (white space) ist eine in der Datenverarbeitung und Programmierung gebräuchliche allgemeine Bezeichnung für Zeichen in einem Text, die im Editor nicht sichtbar sind und dennoch Platz in Anspruch nehmen. Je nach Kontext werden verschiedene Zeichen als Leerraumzeichen angesehen, in HTML und XHTML die Zeichen Leerzeichen, Tabulator, Wagenrücklauf und Zeilenvorschub.

Zum Seitenanfang

Die XML-Deklaration

Die XML-Deklaration ist eine Erkennungszeichenfolge im Prolog eines XML-Dokuments. Sie wird durch die Zeichenfolge <?xml eingeleitet und durch ?> abgeschlossen. Dazwischen werden die Version sowie – jeweils optional – die Zeichenkodierung und die Standalone-Dokumentdeklaration notiert:

<?xml Version Zeichenkodierung Standalone-Dokumentdeklaration ?>

Eine XML-Deklaration kann beispielsweise wie folgt aussehen:

<?xml version="1.0" encoding="utf-8" ?>

Gültige Werte der Standalone-Dokumentdeklaration sind yes und no. yes bedeutet, dass das Dokument über keine Dokumenttyp-Definition (DTD) verfügt, no bedeutet, dass es über eine solche verfügt. Wird das Attribut, wie in diesem Beispiel, weggelassen, wird der Standardwert no angenommen.

Die XML-Deklaration ist in XHTML optional. Sie können sie weglassen, wenn Sie die Zeichenkodierung anderweitig, am besten serverseitig, angeben. Dazu reicht beim Apache Webserver bereits die Zeile

AddType text/html;charset=utf-8 html

in der Zugriffskontrolldatei (.htaccess), sofern Sie den Apache Webserver verwenden, XHTML-Dokumente als text/html ausliefern und die Endung html verwenden.

Zum Seitenanfang

Die Dokumenttyp-Deklaration

Die Dokumenttyp-Deklaration benennt die Dokumenttyp-Definition (DTD), die für ein Dokument verwendet wird. Sie teilt der verarbeitenden Software (zum Beispiel einem Browser) mit, um welchen Dokumenttyp, das heißt um welche XHTML-Version, es sich bei einem Dokument handelt.

Eine Dokumenttyp-Deklaration für XHTML-Dokumente ist folgendermaßen aufgebaut:

<!DOCTYPE html PUBLIC "FPI" "SI">

Der öffentliche Bezeichner (Formal Public Identifier, FPI) gibt an, welcher DTD das Dokument entspricht. Der Systembezeichner (System Identifier, SI) enthält den URI der DTD.

Für XHTML 1.0 existieren insgesamt drei Dokumenttyp-Deklarationen. Sie unterscheiden sich in den Elementen, die sie unterstützen.

Ob Sie eine Dokumenttyp-Deklaration notieren und welche Sie verwenden, hat in einigen Browsern Einfluss auf die Darstellung Ihrer Dokumente. Lesen Sie dazu das Kapitel 6.8.2 »Doctype Switching«.

XHTML 1.0 Transitional

Hierbei handelt es sich sozusagen um die »tolerante« XHTML-Version. Alle Elemente und Attribute aus HTML 4.01 Transitional wurden beibehalten. Transitional wird vor allem dann geschrieben, wenn auf die Darstellung veralteter Browser noch Wert gelegt wird und daher auch Layoutelemente und -attribute verwendet werden sollen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict

Dies ist die »strenge« Version von XHTML. Hier wurden viele missbilligte (das heißt durch neuere Konstrukte überholte) Elemente und Attribute, die nur der Darstellung, nicht mehr nur der Auszeichnung des Texts dienlich waren, gestrichen. Ich empfehle Anfängern, die Inhalte und Informationen zu deren Darstellung konsequent voneinander trennen wollen, diese XHTML-Variante zu wählen, zumindest so lange, bis es einen guten Grund gibt, davon abzuweichen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

Diese Dokumenttyp-Deklaration wird für Framesets verwendet und hier nur der Vollständigkeit halber aufgeführt. Auf Frames werde ich in dieser Einführung nur am Rande eingehen. Viele Usability-Experten raten ausdrücklich vom Einsatz von Frames ab, daher spielen sie im modernen Web nahezu keine Rolle mehr. Professionelle Websites setzen nur noch selten Frames ein, und auch im privaten Umfeld geht die Anzahl an Framesites immer weiter zurück.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Zum Seitenanfang

Wurzelelement: Der Elementtyp html

Das Elementhtml ist das Wurzelelement (root element) eines XHTML-Dokuments, also das Element, das alle anderen Elemente enthält.

Durch die Angabe des Attributs xmlns="http://www.w3.org/1999/xhtml" werden standardmäßig alle Elemente eines XHTML-Dokuments dem XHTML-Namensraum zugeordnet. Die Attribute xml:lang und lang definieren die Sprache des Dokuments.

Das Element html enthält die Elemente head und body.

<!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 und body -->
</html>
Listing 4.1: Der Elementtyp html

Namensräume

XML erlaubt die Definition eines neuen Dokumenttyps, indem man zwei oder mehr Dokumenttypen miteinander kombiniert. XHTML ist ein solcher Dokumenttyp. In diesen »gemischten« Dokumenttypen können Elemente oder Attribute doppelt auftreten. Wenn man sie kombiniert, muss man entsprechend vorsichtig sein: Ist ein Element p im aktuellen Kontext ein »Absatz« aus dem einen oder eine »Person« aus dem anderen Format? Um Namenskollisionen auszuschließen, werden Elemente und Attribute durch sogenannte Namensräume qualifiziert, die wiederum – aus Gründen der Eindeutigkeit – durch URIs identifiziert werden. Dabei spielt es keine Rolle, ob dieser URI tatsächlich abrufbar ist.

Zum Seitenanfang

Das head-Element enthält Informationen über das aktuelle Dokument, beispielsweise seinen Titel, Schlüsselwörter, die sinnvoll für Suchmaschinen sein können, und andere Daten, die nicht als Dokumentinhalt betrachtet werden.

Browser stellen Elemente, die im head stehen, im Allgemeinen nicht als Inhalt dar. Sie können jedoch Informationen aus dem Dokumentkopf über andere Mechanismen für Nutzer verfügbar machen.

Das einzige Element, das das head-Element jedes XHTML-Dokuments enthalten muss, ist das Element title. Auf weitere Elemente werden Sie im weiteren Verlauf dieser Einführung stoßen.

Dokumenttitel: Der Elementtyp title

Das title-Element dient dazu, den Inhalt eines Dokuments zu beschreiben. Jedes XHTML-Dokument muss ein title-Element im Dokumentkopf besitzen. Es darf Zeichenreferenzen enthalten, aber keine andere Auszeichnung, auch keine Kommentare.

Viele Experten bezeichnen das title-Element als das wichtigste Element einer Website (siehe unter anderem [Connolly 2006]). Es wird von Browsern in der Titelzeile des Anzeigefensters und bei Setzen von Lesezeichen (Favoriten) angezeigt. Suchmaschinen dient es als Hilfsmittel zur Indizierung, Bewertung und Anzeige einer Webseite. Daher sollte der Dokumenttitel möglichst aussagekräftig, aber nicht zu lang sein; beschränken Sie sich auf 60 bis 70 Zeichen.

<!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>
    <title>Mein erstes XHTML-Dokument</title>
  </head>

  <!-- body -->
</html>
Listing 4.2: Das Element head enthält ein title-Element


Abb. 4.1: Der Dokumenttitel wird unter anderem in der Titelzeile des Browsers und auf der Trefferseite von Suchmaschinen angezeigt

Zum Seitenanfang

Dokumentrumpf: Der Elementtyp body

Der Dokumentrumpfbody enthält den Inhalt des Dokuments. Ein Benutzerprogramm kann den Inhalt auf unterschiedlichste Art präsentieren. Für visuelle Browser zum Beispiel kann man sich den Rumpf als Leinwand vorstellen, auf der der Inhalt erscheint. Für akustische Benutzerprogramme kann derselbe Inhalt vorgelesen werden.

Block- und Inline-Elemente

Bestimmte Elemente, die im Dokumentrumpf body eines XHTML-Dokuments vorkommen, werden Blockelemente genannt, während andere Elemente Inline-Elemente sind. Diese Unterscheidung basiert vor allem auf drei Gedanken:

  • Im Allgemeinen gilt: Blockelemente können sowohl Inline-Elemente als auch andere Blockelemente enthalten; Inline-Elemente hingegen können nur Text und andere Inline-Elemente enthalten. In dieser strukturellen Entscheidung ist die Idee enthalten, dass Blockelemente größere Strukturen schaffen als Inline-Elemente. Natürlich gibt es auch hierbei Ausnahmen: Elemente vom Typ p dürfen keine anderen Blockelemente enthalten, ebenso wenig wie die Überschriftenelemente h1 bis h6. Ich habe die Erfahrung gemacht, dass Webautoren intuitiv lernen, wie Elemente ineinander verschachtelt werden dürfen. Fragen Sie zu Beginn Ihrer Arbeit regelmäßig einen Validator, der Sie auf Fehler aufmerksam machen wird. Bereits nach kurzer Zeit werden Sie ihn nicht mehr als Ratgeber einsetzen, sondern nur noch zur Qualitätssicherung.
  • Blockelemente beginnen in einer neuen Zeile, während Inline-Elemente inzeilig dargestellt werden. Oftmals wird zwischen Blockelementen standardmäßig ein Abstand dargestellt, zum Beispiel bei Absätzen oder Überschriften, um diese voneinander abzugrenzen.
  • Die Breite von Blockelementen umfasst die gesamte Zeile, während Inline-Elemente nur so breit sind, wie ihr Inhalt es erfordert.

Man spricht dabei von Blockboxen oder Inlineboxen, die von Block- beziehungsweise Inline-Elementen generiert werden. Listen- und Tabellenelemente erzeugen spezielle Arten von Boxen. Später im CSS-Kapitel werden Sie lernen, die Darstellung beliebiger Elemente zu spezifizieren, und dabei unter anderem, ob ein Element als Block oder inzeilig angezeigt werden soll.

Zum Seitenanfang

Hallo-Welt-Beispiel

Alle Beispiele in diesem Buch basieren auf demselben Grundgerüst. Wir setzen XHTML 1.0 Strict ein, um uns schon direkt zu Beginn eine maximale Trennung von Struktur und Darstellung anzugewöhnen. Das XHTML-Grundgerüst sieht wie folgt aus:

<!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>
    <title>XHTML-Grundgerüst</title>
  </head>
  
  <body>
    <p>Hallo Welt!</p>
  </body>
</html>
Listing 4.3: XHTML-Grundgerüst

Öffnen Sie ein leeres Editorfenster und kopieren Sie das obige Quelltextbeispiel hinein. Speichern Sie die Datei als index.html ab. Wenn Sie diese Datei in einem Browser öffnen, sehen Sie eine Darstellung wie in Abbildung 4.2. Zu lesen ist der Text »Hallo Welt!« in einem Fenster mit dem Titel »XHTML-Grundgerüst« in der Titelzeile.


Abb. 4.2: XHTML-Grundgerüst

Formatierungskonventionen

Vielleicht ist Ihnen bereits jetzt aufgefallen, dass es für die Darstellung Ihres Quelltexts im Browser (bis auf wenige Ausnahmen) irrelevant ist, an welchen Stellen Sie Leerzeilen oder Leerzeichen einfügen. Beliebig viel Leerraum hintereinander wird als ein einziges Leerzeichen interpretiert. Probieren Sie es aus! Das Layout Ihres Quelltexts hat im Allgemeinen keinen Einfluss auf die Darstellung des Dokuments. Dies hat den Vorteil, dass Sie Ihren Quelltext so, wie Sie es wünschen, strukturieren können, ohne die Darstellung im Browser zu beeinflussen.

Sie sollten sich angewöhnen, Ihren Quelltext stets sauber und vor allem einheitlich zu formatieren. Folgende Regeln können Ihnen dabei helfen:

  • Schreiben Sie Blockelemente stets in eine neue Zeile. Schließen Sie sie in derselben Zeile wieder, wenn sie keine weiteren Blockelemente beinhalten. Schreiben Sie nicht <div><p>Absatz</p></div>, sondern: 
    <div>
  <p>Absatz</p>
</div>
  • Rücken Sie verschachtelte Blockelemente ein. Einrücken können Sie im Allgemeinen mittels der Tabulatortaste, entweder einzelne Zeilen oder ganze Blöcke, wenn Sie alle Zeilen zusammen markieren. Entfernen können Sie Einrückungen zumeist mittels Umschalt+Tab. Editoren rücken unterschiedlich ein, das heißt, sie fügen verschiedene Leerraumzeichen ein. Es ist wichtig, dass Sie alle Editoren, die Sie verwenden, so konfigurieren, dass sie sich einheitlich verhalten. Ich empfehle eine Einrückung mittels zweier Leerzeichen. Abbildung 4.3 zeigt, wie Sie diese Einstellung in UltraEdit vornehmen.
  • Trennen Sie Bereiche mit einer Leerzeile voneinander ab. Im Grundgerüst sind die Dokumenttyp-Deklaration vom html-Element und das head- vom body-Element getrennt. Verwenden Sie Leerzeilen bewusst, aber sparsam. Mehrere Leerzeilen hintereinander sollten Sie vermeiden, ebenso zu viele Leerzeilen, da der Quelltext sonst optisch auseinanderfällt und die Lesbarkeit darunter leidet. Denken Sie in Strukturbereichen! Nehmen Sie sich die Listings in diesem Buch als Beispiel. Irgendwann werden Sie selbst ein Gefühl dafür entwickeln.
  • Text sollte stets direkt von Tags umschlossen sein. Schreiben Sie nicht <strong> stark betont </strong>, sondern <strong>stark betont</strong>.
  • Verwenden Sie doppelte Anführungszeichen. Schreiben Sie nicht <a href='http://example.org/'>Link</a>, sondern <a href="http://example.org/">Link</a>.


Abb. 4.3: Konfiguration der Einrückung in UltraEdit