Dialogfeld

XHTML: Inhalt mit Struktur

von Charles Wyke-Smith

Beim Styling mit CSS geht es um Design und Erstellung von Webseiten, die professionell und ansprechend aussehen, die dem Benutzer eine intuitive Bedienung ermöglichen, die auf einer breiten Palette von Ausgabegeräten angezeigt werden können (Browser, Handhelds, Mobiltelefone usw.) und deren Inhalt sich problemlos aktualisieren und für andere Verwendungszwecke weitergeben lässt.

Wie bei jeder künstlerischen Gestaltung hängt das Erreichen des kreativen Ziels von den handwerklichen Fähigkeiten ab. Dieser Lehrgang soll keine langwierige Abhandlung über die technischen Details geben, die dem Internet zu Grunde liegen, aber ich weise darauf hin, dass sich das anvisierte Webdesign ohne ein gewisses Maß an technischem Fachwissen nicht erreichen lässt. Dieser Lehrgang soll Ihnen das technische Basiswissen vermitteln, das Sie zur Verwirklichung Ihrer kreativen Vision benötigen, und Sie ermutigen, mit fortschreitender Expertise tiefer in die Thematik einzutauchen. Doch das Hauptaugenmerk liegt auf dem Design, nicht nur unter ästhetischen Gesichtspunkten (Erscheinungsbild), sondern auch unter ergonomischen (logischer Aufbau) und funktionellen (sinnvolle Bedienelemente).

Die in diesem Lehrgang beschriebenen Konzepte beruhen auf Webstandards, also den vom W3C (World Wide Web Consortium) empfohlenen Regeln für das Browserverhalten. Alle führenden Entwickler von Webbrowsern haben sich bereit erklärt, diesen Empfehlungen zu folgen. Wie sich zeigen wird, erfüllen Browser auf Basis der Gecko-Engine (mit den aktuellen Versionen Mozilla/Firefox und Netscape) und der Konquerer-Engine (zu dem der hervorragende Safari for Mac gehört) die Standardanforderungen wesentlich besser als der einst marktbeherrschende Microsoft® Internet Explorer, bei dem sich viele CSS-Spezifikationen nicht umsetzen lassen.

BEDAURE, FANIMIE

Viele sind geneigt, den Internet Explorer auf Grund seiner momentanen Dominanz für den besten Browser zu halten, aber das ist leider ein Trugschluss. In diesem Lehrgang werde ich des Öfteren eine CSS-Funktion erwähnen, bei der ich hinzufügen muss: „FANIMIE: Funktioniert Aber Nicht In Microsoft Internet Explorer“. Internet Explorer ist in seiner Entwicklung in der Vergangenheit steckengeblieben und erfüllt nicht die gängigen Normen, sodass der Marktanteil dieses Tools rapide abnimmt. Einige der Defizite des Internet Explorers lassen sich mit so genannten „Hacks“ wettmachen, also mit dem von der Norm abweichenden Einsatz von CSS, das erwähnte Browser dazu bringt, bestimmte Formate zu erkennen oder zu ignorieren. Aber das Erstellen von Hacks ist mühsam und zeitraubend. Internet Explorer muss sich der Entwicklung anpassen oder es wird gegenüber seinen Browserkollegen, die die einschlägigen Standards erfüllen, weiter an Boden verlieren.

Für uns Webdesigner und die Benutzer, die unsere Webseiten besuchen, bedeuten Webstandards vor allem eins: in Aussehen und Verhalten einheitliche Webseiten, unabhängig von Browser und Plattform. Ganz so weit ist es noch nicht, aber nahezu vorbei sind die Tage, da jeder Browser ein anderes Funktionsset unterstützte und die damit einhergehenden technischen Unterschiede die browser- und plattformübergreifende Webentwicklung langsam und nervenaufreibend machten.

Entsprechend den Regeln der Webstandards lernen Sie in diesem Lehrgang die Veröffentlichung von Inhalten, indem Sie die Struktur mit XHTML definieren und das Erscheinungsbild mit CSS festlegen.

1. „Inhalt“ dient als Sammelbezeichnung für alle Texte, Bilder, Videos, Sounds, Animationen und Dateien (z. B. PDF-Dokumente), die Sie den Benutzern Ihrer Webseiten zugänglich machen möchten.

2. Mit Hilfe von XHTML (eXtensible HyperText Markup Language) legen Sie fest, welche Funktion ein jedes Inhaltselement erfüllt. Handelt es sich um eine Überschrift oder einen Absatz? Bezeichnet es eine Aufzählung, einen Hyperlink oder eine Grafik? Dies lässt sich durch entsprechendes XHTML-Markup festlegen. Das Markup umfasst Tags (der Name des Tags steht in <spitzen Klammern>), über die jedes Inhaltselement definiert wird. Sie können ein XHTML-Element (im Folgenden nur „Element“ genannt) auf zweierlei Weise erstellen. Entweder Sie schließen ein Element in ein Anfangs- und ein End-Tag ein:

<p>Dieser Text wird durch die Tags als Absatz definiert.</p>

Oder Sie verwenden ein einzelnes Tag, falls es sich bei dem Element nicht um Text handelt (im folgenden Beispiel handelt es sich um ein Bild):

<img src=“images/fido.gif” alt=“ein Bild von meinem Hund” />

Der Schwerpunkt dieses Lehrgangs liegt auf XHTML und seiner Verwendung, somit muss einer der wichtigsten Punkte bereits jetzt festgehalten werden:

XHTML definiert die Struktur eines Dokuments.

3. Über CSS (Cascading Style Sheets) können Sie festlegen, wie die vom Markup bestimmten Inhaltselemente auf der Seite dargestellt werden. Ist die Schriftart des Absatzes Helvetica oder Times, ist die Schrift fett oder kursiv? Ist der Text eingerückt oder im Blocksatz? Über CSS werden das Format und die Position jedes einzelnen Inhaltselements gesteuert. Eine Anweisung zur Formatierung eines Textes in einem Absatz könnte beispielsweise lauten:

p {font-size: 12px;}

Dadurch legen Sie die Schriftgröße auf 12 Pixel fest. Nahezu der gesamte Lehrgang beschäftigt sich mit CSS, aber ein wichtiger Punkt ist bereits jetzt festzuhalten:

CSS definiert die Darstellung eines Dokuments.

Hauptziel bei der Entwicklung von Webstandards war die Möglichkeit, die Struktur eines Dokuments von seiner Darstellung zu trennen. Dieses Kriterium ist entscheidend bei der Entwicklung von Inhalten, die sowohl auf verschiedenen Geräten ausgegeben werden sollen als auch zukunftsfähig sind.

DIE ZEITEN ÄNDERN SICH

Um einen Eindruck davon zu bekommen, wie weit die meisten heutigen Websites von der Erfüllung der Standards entfernt sind, werfen wir einen kurzen Blick auf die Entwicklung von HTML und untersuchen, zu welchen Problemen es heute bei den meisten Websites kommt.

Noch heute umfasst das Markup einer typischen Website enorme Mengen an Präsentationsanweisungen, die speziell auf den Browser zugeschnitten sind, für den die Website geschrieben wurde (z. B. für Internet Explorer 5 für Windows oder für den hoffnungslos veralteten Netscape 4.0). In unserer modernen Zeit wird die Ausgabe von Inhalten nicht nur auf standardkonformen Browsern, sondern auch auf Mobiltelefonen, PDAs oder sogar auf Kühlschranktüren erwartet. In Anbetracht dessen ist es eine unliebsame Überraschung, wenn der Inhalt einer Website fest in kilometerlangem, altem Präsentationscode eingebunden ist.

Eine lange Tradition von Hacks

HTML diente ursprünglich dem Layout von Seiten mit Text, die Verknüpfungen zu anderen Seiten mit Text enthielten. Die Sprache wurde nicht mit dem Ziel entwickelt, das komplexe Layout von Hochglanzbroschüren zu kodieren. Doch genau das wollten Designer damit erreichen, als das Internet zum Allgemeingut wurde. Damit begann dann auch die Blütezeit der Hacks.

Wenn z. B. ein Foto zu nahe am Rand einer Seite platziert war, verwendete der Designer möglicherweise eine transparente GIF-Grafik von 1 x 1 Pixel und wies ihr eine überdimensionale Breite zu, sodass dieses unsichtbare Objekt die Fotografie weiter zur Mitte der Seite verschob.

Auch Tabellen wurden in kreativer Weise eingesetzt. Tabellen sind ein HTML-Element zur Erstellung eines Datengitters (wie bei einer Excel-Tabelle). Wenn jedoch eine Seite in einen Kopf, einen Navigations- und einen Inhaltsbereich unterteilt werden soll, dann lässt sich eine Seite auch mit Hilfe einer Tabelle aufteilen, wobei die unterschiedlichen Inhaltselemente einfach in den verschiedenen Zellen abgelegt werden. Es kam schließlich so weit, dass tabellenbasiertes Design beinahe zu einem eigenen Standard avancierte und in unzähligen Fachbüchern als empfohlene Vorgehensweise gelehrt wurde.

Ich weiß, wovon ich rede: Wie alle anderen Webentwickler habe auch ich HTML viele Jahre auf diese Weise gebraucht (missbraucht?) – es gab schlichtweg keine andere Möglichkeit.

Auch wenn der Zweck die Mittel heiligt, gab es hier eine unvorhergesehene oder schlichtweg ignorierte Konsequenz, die heute fast jede Website betrifft: die Inhalte verbergen sich in einem Kodierungsdschungel, der nur dazu dient, die gewünschte Präsentation auf einer kleinen Anzahl ohnehin bald veralteter Browser zu erzielen. Der Informationsgehalt ist dabei gleich Null. Man kann davon ausgehen, dass die meisten Webseiten zu über 60 % aus Präsentationscode bestehen. Als Folge davon ist es nahezu unmöglich, den eigentlichen Inhalt für andere Verwendungszwecke zu extrahieren.

Und wo wir gerade bei diesem traurigen Thema sind...

Ein gezielter Blick hinter die Kulissen

Hier ein kurzer Codeabschnitt von der Microsoft-Startseite vom 1. Juli 2004:

<table cellpadding=“0” cellspacing=“0” width=“100%” height=“19” border=“0” ID=“Table5”>
  <tr>
      <td nowrap=“true” id=“homePageLink”><></td>       <td><span class=“ltsep”>|</span></td>
      <td class=“lt0” nowrap=“true” onmouseenter=“mhHover('localToolbar', 0*2+2, 'lt1')“ onmouseleave=“mhHover('localToolbar', 0*2+2, 'lt0')“><a href=“http://go.microsoft.com/?LinkID=508110“>MSN Home</a></td>
      <td><span class=“ltsep”>|</span></td>
      <td class=“lt0” nowrap=“true” onmouseenter=“mhHover('localToolbar', 1*2+2, 'lt1')” onmouseleave=“mhHover('localToolbar', 1*2+2, 'lt0')“><a href=“http://go.microsoft.com/?linkid=317769”>Subscribe</a></td>
      <td><span class=“ltsep”>|</span></td>
      <td class=“lt0” nowrap=“true” onmouseenter=“mhHover('localToolbar', 2*2+2, 'lt1')” onmouseleave=“mhHover('localToolbar', 2*2+2, 'lt0')“><a href=“http://go.microsoft.com/?linkid=317027”>Manage Your Profile</a></td>
      <td width=“100%”></td>
  </tr>
</table>

All diese Code-Zeilen definieren lediglich eine einzelne Reihe von Schaltflächen (Abbildung 1):

Abb. 1: Der gesamte, oben gezeigte Code definiert lediglich die drei Schaltflächen, die hier unter dem Microsoft-Logo zu sehen sind.

Lediglich 247 der 956 Zeichen des aufgeführten Codes bestimmen den Inhalt, das entspricht 26 %. Die verbleibenden 74 % sind lediglich schmückendes Beiwerk. Abgesehen von den <href>-Attributen sind alle Passagen innerhalb der Tags Präsentationscode, der bequem gelöscht und über ein globales Style Sheet definiert werden könnte. Die Tabelle wird nicht zur Darstellung von Daten verwendet, sondern dient lediglich dazu, alles in eine Zeile zu zwingen. Der übrige Code gewährleistet in erster Linie, dass Rollovers funktionieren. Jede einzelne Verknüpfung erfordert eine Klasse, damit sie von JavaScript erkannt wird, ein <nowrap>-Attribut, um die Wörter in der Verknüpfung einzeilig zu halten, sowie zwei JavaScript-Funktionsaufrufe. (Am Rande bemerkt: Rollovers lassen sich mit CSS problemlos erstellen – sie erfordern lediglich zwei einfache CSS-Stile.) Beachten Sie auch, dass für jede der dünnen vertikalen Linien zwischen den einzelnen Verknüpfungen eine Tabellenzelle mit einem verschachtelten <span>-Tag und einer Klasse erforderlich ist.

Nur damit Sie nicht denken, ich hätte es auf Microsoft abgesehen: Nahezu jede zufällig herausgegriffene Seite ist ähnlich komplex.

Zunehmend richten sich Browser und viele andere Ausgabegeräte nach HTML- und CSS-Standards. Aus diesem Grunde kann der Inhalt nichtkonformer Websites auf diesen neueren Geräten und Browsern nicht richtig angezeigt werden. Haben Sie Ihre eigene Homepage in letzter Zeit mal auf einem Handheld aufgerufen?

Die Zukunft ist nahe

Lassen wir also die Vergangenheit mit ihren überladenen Codes und verschachtelten Tabellen weit hinter uns zurück und wenden wir uns der Zukunft zu. Möglicherweise bedarf es einiger Anstrengung, Ihre aktuelle Website ins moderne Zeitalter zu überführen, aber das Gute daran ist: Wenn Sie die neuen Webstandards einhalten, dann machen Sie diese Arbeit nur einmal und Sie machen sie richtig. Wenn Sie jetzt eine neue Website erstellen, können Sie von Anfang an alles richtig machen.

Sie lernen in diesem Lehrgang, wie Sie Ihre Website zukunftssicher gestalten, indem Sie den Inhalt von der Darstellung trennen. Dafür erstellen Sie Seiten mit XHTML-Code, der nur den Inhalt definiert, und verknüpfen diese Seiten dann über eine einzige Codezeile mit einem so genannten Style Sheet in einer separaten Datei. Diese enthält die Darstellungsregeln, die bestimmen, auf welche Weise der XHTML-Code angezeigt wird.

Der Vorteil dieser Trennung liegt auf der Hand: Es können unterschiedliche Style Sheets für Browser, PDAs, Mobiltelefone, Drucker oder Bildschirmleser für Sehbehinderte verwendet werden. Dabei sorgt jedes Style Sheet dafür, dass der Inhalt auf die für das jeweilige Gerät am besten geeignete Weise dargestellt wird. Bei alledem brauchen Sie aber nur eine Version des XHTML-kodierten Inhalts. Wie Sie noch sehen werden, kann eine XHTML-Seite automatisch das korrekte Style Sheet für die jeweils aktuelle Umgebung auswählen. So wird der einmal verfasste und vielfältig einsetzbare Inhalt wirklich mobil, flexibel und geeignet für alle künftigen Darstellungsanforderungen. Wie aber bei allen großen Zukunftsvisionen müssen zunächst die sehr realen Probleme der Gegenwart aus dem Weg geräumt werden.

XHTML UND WIE MAN ES SCHREIBT

Da CSS dem Styling von XHTML dient, kann man CSS erst anwenden, wenn man solide Grundkenntnisse von XHTML hat. Aber was genau ist eigentlich XHTML? XHTML ist eine Kombination aus HTML und XML. Einfach ausgedrückt: XHTML basiert auf der formlosen Struktur von XML, wo Tags vollständige Bezeichnungen erhalten können, damit sie den Inhalt, den sie umschließen, beschreiben, also z. B. <prominente>Cher</prominente>. Wenn Sie daher diese leistungsstarke XML-Funktion nutzen und Ihre eigenen, benutzerdefinierten Tags für den XML-Inhalt definieren möchten, müssen Sie ein zweites Dokument erstellen, die so genannte DTD (Document Type Definition) oder ein ähnlich formatiertes XML-Schema. Mit diesem zweiten Dokument wird dem Ausgabegerät mitgeteilt, wie es die XML-Tags zu interpretieren und zu behandeln hat.

XML wurde in der Branche nahezu flächendeckend übernommen, und die Tatsache, dass das X jetzt in XHTML steckt (hier steht es für „eXtensible“ = erweiterbar), belegt den unaufhaltsamen Trend zur Trennung von Darstellung und Inhalt.

Im weiteren Verlauf widmet sich dieser Lehrgang also der aktuellen, flexiblen und komplett modernisierten Form des HTML – dem XHTML.

Regeln für XHTML-Markup

Die beste Gewähr, dass Ihre Webseiten auch in Zukunft auf einer breiten Palette an Ausgabegeräten einwandfrei angezeigt werden, gibt Ihnen korrekt geschriebenes XHTML. Mit dem klaren, flexiblen und leicht zu schreibenden XHTML erstellen Sie Codes, die schnell zu laden und bei der Bearbeitung leicht zu verstehen sind. XHTML bereitet Inhalte auf die Verwendung in einer Vielzahl von Anwendungen vor.

Es lässt sich leicht feststellen, ob eine Website die Webstandards erfüllt: Wenn Sie gut strukturiertes und gültiges XHTML einsetzen und das Style Sheet aus gültigem CSS-Code besteht, dann sind die Standards erfüllt. (Ob es gut strukturiert ist oder nicht, ist zugegebenermaßen recht subjektiv, aber wir kommen im weiteren Verlauf noch dazu.)

„Gut strukturiert“ bedeutet, dass das HTML-Markup entsprechend den in diesem Lehrgang beschriebenen Regeln aufgebaut ist. „Gültig“ bedeutet, dass es nur aus XHTML besteht und keine bedeutungslosen, nicht ordentlich abgeschlossene oder nicht mehr gebräuchliche (aber noch funktionierende) HTML-Tags enthält. Sie können prüfen, ob eine Seite diese Kriterien erfüllt, indem Sie die Seite auf einen Server laden, die Website http://validator.w3.org aufrufen und die URL der zu prüfenden Seite eingeben. Klicken Sie auf die Schaltfläche „Submit“ (Senden) und nach wenigen Sekunden erhalten Sie eine Auflistung der Fehler auf der Seite oder die beruhigende Nachricht, dass die Seite ausschließlich gültiges XHTML enthält. CSS kann auf die gleiche Weise unter http://jigsaw.w3.org/css-validator geprüft werden.

Abb. 2: Wenn Ihre Seite die Webstandards erfüllt, gibt das Prüfprogramm des W3C eine entsprechende Meldung aus.

Hier folgt die gesamte, aber kurze Liste der Kodierungsanforderungen, die zur Einhaltung des XHTML-Standards erfüllt sein müssen:

1. Angabe eines DOCTYPEDie so genannte DOCTYPE-Deklaration vor dem einleitenden <html>-Tag ganz oben auf der Seite teilt dem Browser mit, ob die Seite HTML, XHTML oder einen Mix aus beiden Komponenten enthält. Auf diese Weise kann das Markup korrekt interpretiert werden. Es gibt drei wichtige DOCTYPEs, durch die der Browser das vorliegende Markup erkennt:

Strict: Das gesamte Markup ist XHTML-konform.

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

Transitional: Beim Markup handelt es sich um einen Mix aus XHTML und veraltetem HTML. Viele Seiten verwenden gegenwärtig diesen Typ, damit der HTML-Code ebenso funktioniert wie das neu hinzugefügte XHTML.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

Frameset: Dieser Typ ist im Grunde mit „Transitional“ identisch, aber in diesem Fall können auch Frames, die unter XHTML als unerwünscht gelten, verwendet werden.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

Die Angabe eines DOCTYPE ist wichtig. Browser, die keine DOCTYPE-Deklaration im Markup finden können, gehen davon aus, dass die Webseite für alte, lange vor Einführung der Webstandards entwickelte Browser kodiert wurde.

Ohne DOCTYPE-Deklaration wechseln viele Browser in den so genannten „Quirks-Modus“, eine abwärtskompatible Emulation, die von Mozilla, Internet Explorer 6 für Windows und Internet Explorer 5 für Macintosh unterstützt wird. Im Quirks-Modus ignoriert der Browser das moderne Document Object Model (DOM) und berücksichtigt auch keine Webstandards. Durch das Umschalten zwischen den verschiedenen Modi je nach DOCTYPE (oder fehlendem DOCTYPE) kann der Browser den Code standardkonformer und nichtkonformer Websites auf bestmögliche Weise interpretieren.

Beachten Sie, dass das DOCTYPE-Tag nicht mit einem Backslash abgeschlossen werden muss und dass DOCTYPE selbst immer in Großbuchstaben geschrieben wird. Das steht in krassem Widerspruch zu den XHTML-Regeln 4 und 7 (s. weiter unten).

2. Angabe eines XML-NamespaceDie Zeile mit der entsprechenden Angabe bildet ein neues HTML-Tag. Beispiel:

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>

Bei der Verarbeitung einer XHTML-Seite gibt der XML-Namespace dem Broswer an, wo sich die DTD mit der Auflistung und Definition aller gültigen XHTML-Tags befindet. Im obigen Beispiel liegt die DTD auf einem Server des W3C.

Kurz gesagt, stellen DOCTYPE und Namespace sicher, dass der Browser den XHTML-Code in der beabsichtigten Weise interpretiert.

3. Angabe des Inhaltstyps (Content Type)Die Deklaration des Inhaltstyps befindet sich zusammen mit etwaigen anderen Meta-Tags im Dokumentenkopf. Die gängigste Angabe lautet:

<meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />

Hierdurch wird lediglich angegeben, welcher Zeichensatz für das Dokument verwendet wurde. ISO-8859-1 gibt den lateinischen Zeichensatz an, auf den alle Varianten des Englischen zurückgreifen. Wenn Sie also Webseiten für eine Sprache erstellen, die das lateinische Alphabet verwendet und keine Schriftzeichen wie chinesische oder arabische, dann ist dies der benötigte Zeichensatz. Wenn Sie doch einmal die kyrillische oder hebräische Schrift verwenden müssen, dann finden Sie die entsprechenden Inhaltstypen auf der Microsoft-Website unter http://msdn.microsoft.com/workshop/author/dhtml/reference/charsets/charset4.asp.

4. Alle Tags - einschließend oder nicht – müssen abgeschlossen werden.

Bei einschließenden Tags steht der Inhalt zwischen einem Anfangs- und einem End-Tag:

<p>Dieser Textabsatz steht zwischen zwei Absatz-Tags. Damit die Kodierung XHTML-konform ist, muss die Konstruktion, wie hier, durch ein End-Tag abgeschlossen werden.</p>

Nicht einschließende Tags gehen dem Inhalt komplett voraus, müssen jedoch trotzdem am Ende mit einem Schrägstrich abgeschlossen werden wie hier:

<img scr=“Bilder/Siam.jpg” alt=“Meine Katze” />

5. Alle Tags müssen korrekt verschachtelt sein.Wird ein Tag geöffnet, bevor ein vorhergehendes abgeschlossen wurde, muss zunächst dieses neue Tag und dann erst das vorhergehende abgeschlossen werden. Beispiel:

<p>Es ist <strong>sehr wichtig</strong>, auf die korrekte Verschachtelung von Tags zu achten.</p>

Hier befinden sich beide Elemente des <strong>-Tags korrekt innerhalb der Klammer des <p>-Tags: Das Tag </strong> geht dem Tag </p> voran. Wenn ein Tag auf diese Weise vollständig von einem anderen Tag eingeschlossen wird, spricht man von einem verschachtelten Tag.

Folgende Verschachtelung ist nicht korrekt:

<p>Die Verschachtelung dieser Tags ist <strong>falsch<p></strong>.

In einem Tag können mehrere Einzelelemente verschachtelt werden. Bei einer Liste werden mehrere <li>-Elemente von einem <ul>- oder <ol>-Element eingeschlossen:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Da CSS Stile und Elemente nur bei ordnungsgemäßer Verschachtelung korrekt interpretieren kann, muss auf diesen Punkt genauestens geachtet werden.

6. Inline-Tags können keine Block-Level-Tags einschließen.Block-Level-Tags sorgen für eine visuelle Strukturierung des Dokuments. Zu diesen Blockelementen gehören z. B. die Tags <p> (Absatz) und <div> (Bereich, „DIV-Container“). Blockelemente werden automatisch in einer Abfolge angeordnet: Wenn Sie zwei Absätze einrichten, wird der zweite Absatz standardmäßig unterhalb des ersten angezeigt. Es muss kein Zeilenumbruch hinzugefügt werden. Inline-Tags hingegen, z. B. <a> („Anker“, ein Hyperlink) oder <em> („emphasis“ = Betonung, Darstellung normalerweise kursiv) reihen sich in den normalen Textfluss ein und bedingen nicht den Beginn einer neuen Zeile.

Wenn Sie ein Blockelement wie einen Absatz <p> in einem Inline-Element wie einem Hyperlink <a> verschachteln, wird der HTML-Code ungültig.

Ebenso können auch bestimmte Blockelemente nicht in anderen Blockelementen verschachtelt werden, z. B. können <h1>- bis <h6>-Tags (Überschriften) keinen Absatz enthalten. Neben der Gültigkeitsprüfung kann hier auch logisches Denken solche Probleme verhindern: Beim Verfassen eines Textes auf Papier oder in Word würden Sie auch nicht einen ganzen Textabsatz in eine Absatzüberschrift einbauen, also können solche Methoden auch in XHTML nicht funktionieren.

7. Schreiben Sie alle Tags in Kleinbuchstaben.Diese Regel ist selbsterklärend: keine Verwendung von Großbuchstaben. Wenn Sie einen Absatz also bislang mit <P> gekennzeichnet haben, dann stellen Sie ab sofort auf <p> um. So lautet die Regel.

8. Attribute müssen Werte erhalten und in Anführungszeichen stehen.In HTML benötigen die Attribute mancher Tags keinen Wert, doch in XHTML müssen alle Attribute Werte enthalten. Beispiel: Sie haben bislang das <select>-Tag verwendet, um in HTML ein Dropdown-Menü zu erstellen und festzulegen, welche Menüoption beim Laden der Seite standardmäßig angezeigt werden soll. Der Code sah vermutlich in etwa so aus:

<SELECT NAME=TIERE>
  <OPTION VALUE=Katzen>Katzen</OPTION>
  <OPTION VALUE=Hunde SELECTED>Hunde</OPTION>
</SELECT>

Damit erhalten Sie ein Dropdown-Menü, bei dem die Option „Hunde“ standardmäßig angezeigt wird.

Das Äquivalent in XHTML sieht folgendermaßen aus:

<select name=“tiere”>
  <option value=“katzen”>Katzen</option>
  <option value=“hunde” selected=“selected”>Hunde</option>
</select>

In dieser korrigierten Version bestehen alle Attributnamen ausschließlich aus Kleinbuchstaben und alle Werte sind in Anführungszeichen gesetzt.

9. Darstellung der Zeichen „<“ und „&“ über kodierte Äquivalente.Bei einer linken spitzen Klammer (<, auch als „Kleiner als“-Symbol zu verwenden) geht XHTML zunächst davon aus, dass hier ein neues Tag beginnt. Was aber, wenn das Symbol als solches im Inhalt angezeigt werden soll? Dann muss es mit einer so genannten Entität kodiert werden. Eine Entität ist eine kurze Zeichenfolge im Code, die zur Darstellung eines einzelnen Zeichens im Inhalt führt. Diese Zeichenfolge ermöglicht es XHTML, das gewünschte Zeichen korrekt darzustellen und es nicht als Markup zu interpretieren. < ist beispielsweise die Entität für das „Kleiner als“-Symbol/linke spitze Klammer. Dabei steht „lt“ für engl. „less than“ = kleiner als.

Entitäten helfen nicht nur, eingangs erwähnte Parsing-Fehler zu vermeiden, sondern ermöglichen auch die Darstellung von Sonderzeichen: z. B. ergibt © das Copyright-Symbol (©). Jede Entität beginnt mit einem Ampersand (&) und endet mit einem Semikolon (;). Aus diesem Grunde interpretiert XHTML Ampersands im Code als den Beginn von Entitäten, sodass Sie auch Ampersands selbst in Form einer Entität kodieren müssen (&), wenn das Zeichen als solches im Inhalt angezeigt werden soll.

Als Faustregel gilt: Wenn ein gewünschtes Zeichen nicht auf der Tastatur vorhanden ist (z. B. é, ®, © oder #), dann benötigen Sie eine Entität im Markup.

Insgesamt gibt es etwa 50.000 Entitäten, die die Zeichensätze der meisten Sprachen abdecken. Eine kürzere Liste der gebräuchlichsten Entitäten finden Sie auf der Website der Web Design Group unter www.htmlhelp.com/reference/html40/entities.

Das sind also die Regeln für XHTML-Markup. Sie sind relativ einfach, müssen aber strikt eingehalten werden, wenn Ihre Seiten die Gültigkeitsprüfung bestehen sollen.

So funktioniert das Markup

Anhand der folgenden gültigen XHTML-Seite (ohne Stilelemente) sollen die XHTML-Regeln erläutert werden (s. Abb. 3).

Abb. 3: Diese XHTML-Seite enthält keine Stilelemente und ist daher optisch nicht sehr ansprechend. Zu Erklärungszwecken ist sie jedoch ausreichend.

Die Seite ist nicht besonders ansprechend, reicht für unsere Zwecke aber aus. Das Markup dieser Seite ist einfach und übersichtlich. Es gibt keinen Präsentationscode und das verwendete XHTML besteht den Test der W3C-Gültigkeitsprüfung.

Nachfolgend wird das Markup der in Abb. 3 dargestellten Seite Zeile für Zeile untersucht, damit die zu Grunde liegenden XHTML-Regeln verständlich werden.

Zeilen 1 - 2

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

Der DOCTYPE ist hier auf XHTML 1.0 Strict eingestellt. Dadurch ist festgelegt, dass der Code als reiner, nicht rückwärtskompatibler XHTML-Code interpretiert wird.

Mein Schwerpunkt in diesem Lehrgang liegt auf DOCTYPEs vom Typ „Strict“. Ich verwende keinen veralteten HTML-Code. Wenn alte HTML-Tags wie etwa Frames unterstützt werden sollen, müssen Sie einen anderen DOCTYPE angeben (vgl. Markup-Regel Nr. 3 weiter oben).

Zeile 3

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>

Als nächstes folgt das einleitende <html>-Tag, das in der Vergangenheit keine Attribute enthielt. Jetzt umfasst es eine URL, die auf den Namespace (die Aufstellung der XML-Deklarationen und -Attribute) dieses Dokuments verweist.

Wie oben im Abschnitt „Regeln für XHTML-Markup“ erwähnt, stellen DOCTYPE und Angabe des Namespace sicher, dass der Browser den verwendeten (X)HTML-Code wie gewünscht interpretiert.

Zeile 4

<head>

Mit diesem Tag beginnt der Dokumentenkopf. Er befindet sich zwischen den Tags <head> und </head> und enthält Informationen, die abgesehen vom Titel für den Betrachter der Seite nicht sichtbar sind. Neben den nachfolgend erläuterten obligatorischen <head>-Tags (Zeilen 5 - 9) können wahlweise noch weitere hinzugefügt werden: Meta-Tags können die verschiedensten Informationen umfassen (Seitenbeschreibung, Schlüsselwörter, Name des Verfassers usw.), die dann von Suchmaschinen oder anderer Indizierungssoftware verwendet werden.

Möglich sind auch Stil-Tags mit JavaScript und CSS, die auf die aktuelle Seite verweisen und nur von dieser verwendet werden können.

Zeile 5

<title>Ein XHTML-Beispieldokument</title>

Technisch gesehen muss die Seite nicht unbedingt ein <title>-Tag aufweisen, doch bei der Gültigkeitsprüfung wird es empfohlen.

Zeilen 6 - 7

<meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />
<meta http-equiv=“Content-Language” content=“de” />

Diese beiden obligatorischen Meta-Tags im Dokumentenkopf enthalten Informationen, auf deren Grundlage Browser und Server die Seite ordnungsgemäß verwalten und anzeigen können.

Bei XHTML muss in jedem Fall eine Information zur Zeichenkodierung enthalten sein, damit der Browser die Seiten mit dem korrekten Zeichensatz anzeigt. Das erste Meta-Tag in diesem Beispiel enthält den Code 8859-1 für „Lateinisch 1“, d. h. für das Alphabet und die dazugehörigen Symbole des Englischen und einer Reihe anderer Sprachen (vgl. Markup-Regel Nr. 3 weiter oben). Beachten Sie, dass diese Tags, obwohl sie nicht einschließend sind, beide durch einen Schrägstrich und eine spitze Klammer abgeschlossen werden.

Eine Information zur Sprache ist ebenfalls erforderlich. Im zweiten Meta-Tag ist angegeben, dass es sich um US-Englisch handelt. Bei einer Sprache wie etwa Chinesisch zeigt der Browser den Text von rechts nach links an.

Zeilen 8 - 9

<link href=“demo_styles.css” rel=“stylesheet” type=“text/css” />
</head>

Über das <link>-Tag wird das XHTML-Markup mit einem CSS-Style Sheet verknüpft. Dieses Style Sheet ist eine separate Datei, auf die durch das Element <href> verwiesen wird. Das <link>-Tag ist nicht obligatorisch, aber auf diese Weise weisen Sie dem Markup ein Style Sheet zu. Wenn Sie dasselbe Style Sheet mit allen Seiten Ihrer Website verknüpfen, können alle Seiten auf denselben Stilsatz zurückgreifen. Die Verknüpfung mit einem Style Sheet ist auch über das <@import>-Tag möglich.

Vergessen Sie nicht, den Dokumentenkopf mit dem </head>-Tag abzuschließen.

Zeile 10

<body>

Hier beginnt der Textkörper. Er enthält den Inhalt, der dem Betrachter angezeigt wird.

Zeile 11

<!--Kopf-->

Hierbei handelt es sich um einen Kommentar. Er wird nicht angezeigt und dient lediglich dem besseren Verständnis des Codes. Beachten Sie: Im Gegensatz zum HTML, wo beliebig viele Bindestriche verwendet werden durften, sind beim XHTML am Anfang und Ende eines Kommentars jeweils nur zwei Bindestriche zulässig.

Zeile 12

<div id=“logo”> <img src=“logo_area.jpg” width=“150” height=“80” alt=“Stylin logo” />

<div>-Tags teilen eine Seite in rechteckige, schachtelförmige Bereiche (Container) auf. Diese Bereiche sind nur dann sichtbar, wenn Sie den Begrenzungslinien oder dem Hintergrund eine Farbe zuweisen. Dieses <div>-Tag enthält ein <id>-Attribut mit dem Wert „logo“. Über diese ID-Bezeichnung können Sie auf CSS-Stile verweisen, die für den betreffenden Container Position, Größe, Hintergrundfarbe und weitere Eigenschaften bestimmen. Außerdem können Sie mit Hilfe des <div>-Tags alle Elemente innerhalb des Containers zu einer Gruppe zusammenfassen und so jedem darin enthaltenen Tag Stile zuweisen.

Das auf das Bild verweisende Tag (<img>) ist ein nicht einschließendes Element und wird deshalb vor der spitzen Klammer mit einem Schrägstrich abgeschlossen. Der Inhalt des <alt>-Tags wird angezeigt, wenn die Grafik nicht geladen werden kann, oder er wird von einem Sprachausgabeprogramm gelesen. Sie müssen für jedes Bild ein <alt>-Tag verwenden, selbst wenn der Wert "" lautet (also zwei Anführungszeichen ohne irgendetwas dazwischen, nicht einmal ein Leerzeichen). Lassen Sie das <alt>-Tag aber nur dann leer, wenn das Bild keinen Informationsgehalt hat. Sie können die <alt>-Tags in jedem Fall leer lassen, aber solche Tags werden von der XHTML-Gültigkeitsprüfung angemerkt. Außerdem ist eine solche Vorgehensweise nicht sehr benutzerfreundlich und verbessert nicht die Zugänglichkeit. Beachten Sie, dass jetzt alle Attributwerte (in diesem Beispiel etwa 150 und 80) in Anführungszeichen stehen müssen.

Zeilen 13 - 15

<h3>Ein Buch bei New Riders von Charles Wyke-Smith</h3>
</div>
<!--Kopf Ende-->

Ein <h3>-Tag zur Angabe einer Überschrift der Größe 3 ist ein Block-Level-Tag und wird daher in einer neuen Zeile oder, genauer gesagt, unterhalb des vorhergehenden Elements angezeigt. Es sind keine <br />-Tags erforderlich.

</div>

Schließen Sie den Kopfbereich mit dem </div>-Tag und weisen Sie in einem Kommentar darauf hin, dass der Dokumentenkopf an dieser Stelle beendet ist.

Zeilen 16 - 20

<!--Hauptinhalt-->
<div class=“contentarea”>
  <h1>Umstellen auf XHTML</h1>
  <p>XHTML-konforme Seiten lassen sich durch Befolgen einiger einfacher Regeln erstellen. Diese Regeln mögen der Intuition zuwider laufen und zu Beginn einige zusätzliche Arbeit erfordern, aber die Vorteile sind beträchtlich und die Kodierung der Seiten ist wesentlich einfacher. Außerdem kann XHTML problemlos online einer Gültigkeitsprüfung unterzogen werden, sodass die Richtigkeit des Codes gewährleistet ist.</p>
  <p>Nachfolgend die wichtigsten Anforderungen für eine erfolgreiche Gültigkeitsprüfung des XHTML-Codes.</p>

Der Inhaltsbereich beginnt mit einem <div>-Tag, einem Blockelement. Dem Text in der Überschrift wurde Größe 1 zugewiesen. Als nächstes folgen zwei Absätze. Absatztags müssen wie alle einschließenden Tags mit einem Slash-Tag abgeschlossen werden, in diesem Fall </p>. Absätze sind Blockelemente und haben über und unter sich einen standardmäßig festgelegten Freiraum.

Zeilen 21 - 31

<ol>
  <li>Angabe eines DOCTYPE</li>
  <li>Angabe eines XML-Namespace</li>
  <li>Angabe des Inhaltstyps (Content Type)</li>
  <li>Alle Tags - einschließend oder nicht – müssen abgeschlossen werden.</li>
  <li>Alle Tags müssen korrekt verschachtelt sein.</li>
  <li>Inline-Tags können keine Block-Level-Tags einschließen.</li>
  <li>Schreiben Sie alle Tags in Kleinbuchstaben.</li>
  <li>Attribute müssen Werte erhalten und in Anführungszeichen stehen.</li>
  <li>Kodierte Äquivalente für die Darstellung von „<“ und „&“.</li>
</ol>

Hierbei handelt es sich um eine geordnete Liste, bei der jedem Element standardmäßig eine Ordnungszahl vorangestellt wird. (In ungeordneten Listen <ul> werden den Elementen Aufzählungszeichen, so genannte Bullets, vorangestellt.)

Zeile 32

<a href=“more.htm”>Weitere Informationen zu diesen Anforderungen</a>
Dieser Hyperlink verweist auf eine Seite namens „more.htm“, die sich in demselben Ordner befindet wie die aktuelle Seite.
Zeilen 33 - 34
</div>
<!--Hauptinhalt Ende-->

Hier endet der Bereich des Hauptinhalts. Der Kommentar ist natürlich optional.

Zeilen 35 - 37

<!--Navigation-->
<div id=“navigation”>
<p>Hier eine Reihe nützlicher Links von der Website des <acronym title=“World Wide Web Consortium”>W3C</acronym> (World Wide Web Consortium), dem Führungsgremium zur Standardisierung des Internet.</p>

Es ist empfehlenswert, Akronyme mit einem Stil zu versehen, der sie vom übrigen Text unterscheidet. Internet Explorer bietet keinen Standardstil für Akronyme. Safari hingegen zeigt sie kursiv an (wie in Abb. 1.3). Wenn Sie einem Akronym ein <title>-Tag hinzufügen, wird der Text des Titelattributs als QuickInfo angezeigt, wenn der Benutzer den Mauszeiger darauf positioniert. Empfohlen wird auch, die Verfügbarkeit einer QuickInfo anzuzeigen, indem Sie das Akronym mit einer gestrichelten Linie unterstreichen. Versehen Sie das Akronymelement dazu mit einem Rahmen, dessen untere Begrenzungslinie gestrichelt ist. Verwenden Sie keine durchgezogene Linie für die Unterstreichung, da das gemeinhin auf einen Hyperlink hinweist. Dieselben Markup-Verfahren lassen sich auch auf das <abbr>-Tag für Abkürzungen anwenden.

Zeilen 38 - 45

<ul>    <li><a href=“http://validator.w3.org”>W3C-Gültigkeitsprüfung für XHTML</a></li>
  <li><a href=“http://jigsaw.w3.org/css-validator/”>W3C-Gültigkeitsprüfung für CSS</a></li>   <li><a href=“http://www.w3.org/MarkUp/”>XHTML-Ressourcen</a></li>
  <li><a href=“http://www.w3.org/Style/CSS/”>CSS-Ressourcen</a></li>
</ul>
</div>
<!--Navigation Ende-->

Die Navigationshilfe ist in Form einer Liste aufgebaut, in der jedes Element als Hyperlink dient. Alles befindet sich innerhalb eines <div>-Blocks mit einer ID, sodass aus dem Style Sheet exakt darauf Bezug genommen werden kann. Beachten Sie, dass auf die Links kein Zeilenumbruch folgt. Das wäre reiner Präsentationscode und ist daher nicht erforderlich. Links werden standardmäßig in einer Reihe angezeigt, da es sich um Inline-Elemente handelt. Hier aber sind sie Teil von Listenelementen und da Listenelemente Blockelemente sind, werden sie ohnehin untereinander angezeigt.

Zeilen 46 - 50

<!--Fußzeile--> <div id=“homepagefooter”>
  <p>© 2004 Charlie Wyke-Smith und New Riders.</p>
</div>
<!--Fußzeile Ende-->

Das letzte Element der Seite ist ein <div>-Bereich, der den Fußzeilentext in einem Absatz-Tag enthält.

Zeilen 51 - 53

</body>
</html> <!--Beispieldokument Ende-->

Hier beenden Sie zunächst den Textkörper und dann die gesamte Seite und das war's. Noch Fragen? Nein? Gut, dann kann's ja weitergehen...

DOKUMENTEN-HIERARCHIE: DIE MITGLIEDER DER XHTML-FAMILIE

Die Dokumentenhierarchie ist noch ein wichtiges Konzept, das Sie verstanden haben müssen, bevor Sie zu CSS übergehen können. Die Dokumentenhierarchie ähnelt einem Familienstammbaum oder einem Organisationsdiagramm. Es beruht auf der Verschachtelung der XHTML-Tags, die auf der Seite vorhanden sind. Dieses Konzept lässt sich gut erklären, indem wir einen Abschnitt des Markups aus dem soeben erläuterten Textkörper nehmen und den Inhalt ausblenden, sodass die Organisation der Tags sichtbar wird. Dies ist der bereinigte Dokumentenkopf:

<body>
<!--Kopf - Dies ist nur ein Kommentar, kein Code-->
<div id=“logo”>
  <img />
   <h3> </h3>
</div>
<!---Kopf Ende - Die übrigen Tags wurden aus Gründen der Übersichtlichkeit entfernt-->
</body>

Hier erkennt man deutlich das hierarchische Zusammenspiel der Tags. Beispielsweise sind in diesem Markup sämtliche Tags vom <body>-Tag eingeschlossen, also darin verschachtelt. Das <div>-Tag (mit der ID „logo“) enthält zwei Tags: ein <img>-Tag für das Bild und ein <h3>-Tag für die Überschrift.

In Abb. 4 ist diese hierarchische Struktur in Form eines Diagramms dargestellt.

Abb. 4: In diesem Diagramm wird die hierarchische Tag-Struktur deutlich.

Bei der Analyse der Hierarchie lässt sich sagen, dass das <img>-Tag und das <h3>-Tag untergeordnete Elemente („Kinder“) des <div>-Tags sind, denn beide befinden sich innerhalb des <div>-Elements. Umgekehrt kann man sagen, dass das <div>-Tag als übergeordnetes Element („Eltern-Tag“) für beide fungiert und dass das <img>-Tag und das <h3>-Tag dann quasi „Geschwister“ sind, da beide dasselbe Eltern-Tag haben. Schließlich übernimmt das <body>-Tag die Rolle des „Stammvaters“, da sie indirekt auch von diesem Tag abhängen. Ebenso sind demnach das <img>-Tag und das <h3>-Tag (wie im Übrigen auch das <div>-Tag) „Abkömmlinge“ des <body>-Tags.
Mit Hilfe der Familienbezeichnungen lässt sich die Tag-Hierarchie besonders anschaulich darstellen.

Im Rahmen von CSS schreiben Sie eine Art Steno auf der Grundlage dieser Abhängigkeiten, z. B.
div#logo img {CSS-Stil-Definitionen}

Eine solche CSS-Regel bezieht sich nur auf die <img>-Tags innerhalb des <div>-Tags mit der ID „logo“ (das Zeichen # ist das CSS-Symbol für eine ID). Die Regel betrifft also also alle Bilder, die Abkömmlinge des <div>-Tags mit der ID „logo“ sind. Die übrigen <img>-Tags auf der Seite, die nicht das <div>-Tag mit der ID „logo“ als Eltern-Tag haben, sind von der Regel nicht betroffen. Auf diese Weise können Sie das betreffende Bild gezielt mit einem Rahmen versehen oder seine Randbreite verändern, um den Abstand zu umgebenden Elementen zu vergrößern.

Wichtig an dem ganzen Konzept ist Folgendes: Jedes Element innerhalb des Textkörpers ist ein Abkömmling des <body>-Tags und fungiert, je nach Positionierung im Markup, als Stammvater, Eltern-Element, Kind oder Geschwister-Element für andere Tags in der Hierarchie.

Über Regeln mit Verweisen auf IDs, Klassen und die Hierarchiestruktur können Sie gezielt steuern, welche CSS-Regeln sich auf welche XHTML-Elemente beziehen sollen.