XHTML und CSS – Hat die Zukunft schon begonnen?!

TP Login

TP Intern

XHTML und CSS – Hat die Zukunft schon begonnen?!

Diese Frage stellt sich wenn man diese Begriffe liest. Aber was genau steckt dahinter? Wozu sollte man das verwenden? Unser Autor prefix ist ein Experte auf diesem Gebiet und versucht in diesem Artikel einen Einblick in die Grundzüge zu geben und zu vermitteln wofür man das alles braucht.

Autor:: (prefix)
Arbeitsmaterial:: download
Schwierigkeit:: Grundlagen

1. XHTML
1.1 Was ist XHTML?
1.2 Unterschiede XHTML – HTML 4?
1.3 Und warum soll ich jetzt XHTML 1.0 / 1.1 verwenden?
2. Was ist CSS?
3. DTD – Die DOCUMENT TYPE DEFINITION
3.1 Was ist die „Document Type Definition“ (DTD)?
3.2 Gültige DTDs für XHTML 1.0
3.2.1 DTD für XHTML 1.0 Strict
3.2.2 DTD für XHTML 1.0 Transitional
3.2.3 DTD für XHTML 1.0 Frameset
3.3 Gültige DTD für XHTML 1.1
4. Warum Standards und „valide Seiten“?
5. Die zukünftigen Besucher deiner Website!
6. Befreit euch und eure Site von den Zwängen!
7. Und warum schreibe ich immer von XHTML 1.0 / 1.1 und nicht einfach von XHTML“?
8. Weiterführende Links

1XHTML

1.1Was ist XHTML?

Im wesentlichen ist XHTML nicht der direkte Nachfolger von HTML 4 – das wird leider immer wieder fälschlicherweise behauptet. Um ein wenig zu verstehen, das XHTML ist, müssen wir uns kurz mit der Geschichte auseinandersetzen. Im Jahr 1986 wurde SGML („Standard Generalized Markup Language“) als ISO-8879 verabschiedet. Ein Wissenschaftler entwickelte die Sprache, um in den „Urzeiten“ des Webs die logische Struktur (!!!) von wissenschaftlichen Texten beschreiben zu können. Aus diesem „SGML-Pool“ wurde dann im Jahr 1995 der offizielle Standard „HTML 2“ verabschiedet, welcher dann bis HTML 4.01 fortgesetzt wurde.

Schon jetzt könnt ihr, wenn ihr aufmerksam gelesen habt, eines erkennen: SGML und die daraus resultierenden Standards sollen die logische Struktur von Texten beschreiben – nicht mehr und nicht weniger!

Leider wurde dieser Gedanke durch das Aufkommen einer Vielzahl von Websites in den 90er-Jahren vollkommen missbraucht – es wurden Elemente falsch formatiert (z.b. der „font-tag“), Elemente mit den falschen "Werkzeugen" in ein Layout gebracht (Stichwort: Tabellen), von den Browserherstellern eigene Tags entwickelt (z.B.: Marquee-Tag von MS, NS-Layer) und vieles mehr!

Das war einer der Gründe, warum das W3-Consortium (W3C) die Sprache XML – und somit XHTML – entwickelt hat. XML wurde ebenfalls als „Tochter“ von SGML, und nicht als „Tochter“ von HTML, definiert. Kurz und bündig:

XHTML 1.0 / 1.1 ist eine Reformulierung von HTML 4 auf Basis von XML.
XHTML 1.0 / 1.1 ist nicht eine Weiterentwicklung von HTML 4
XHTML 1.0 / 1.1 ist vollständig kompatibel zu XML
XHTML 1.0 / 1.1 wird von allen neueren (auch mobilen) Browsergenerationen interpretiert (meist aber Version 5)

1.2Unterschiede XHTML – HTML 4?

Neben den oben bereits erwähnten Anstrengungen des W3C, die Webwelt (noch immer) auf einen einheitlichen und sinnvollen Standard zu bringen, wird mit XHTML erstmals eine klare Trennung von Inhalt und Layout ins Bewusstsein gerufen und durchgesetzt! Die Unterschiede im Code wurden schon derart oft erläutert, dass ich darauf nicht eingehen, sondern die wesentlichen nur kurz zusammenfassen will:

Das Dokument benötigt eine DTD (Erklärungen dazu findet ihr weiter unten) und einen „Namespace“
Der Seitenaufbau muss „wohlgeformt“ sein, alle Tags müssen geöffnet und geschlossen werden (aus <br> wird <br /> usw.)
Tags müssen korrekt verschachtelt werden
Alle Tags müssen kleingeschrieben werden (case sensitive)
Parameterwerte für Attribute müssen in Anführungszeichen stehen (z.B.: <img scr=“pfad“ width=“200px“ height=“80px“ alt=“Beschreibung“ >)

Die Unterschiede genau erläutert: www.boku.ac.at/htmleinf/hein7.html

1.3Und warum soll ich jetzt XHTML 1.0 / 1.1 verwenden?

Ich hab diesen Punkt hineingenommen, weil ich auch persönlich des Öfteren danach gefragt werde. Zunächst verliert man einmal nichts, wenn man XHTML 1.0 / 1.1 verwendet – und das ist bei der Umstellung auf eine neue Sprache keine Selbstverständlichkeit. Für die aktuelle verwendeten Browser ergeben sich allerdings noch kaum nennenswerte Vorteile. Sinn und Zweck für das „persönliche Upgrade“ ist es, dass man schon jetzt den Weg in die Zukunft beschreitet – er ist ohnehin lange genug.

XHTML bietet auch große Erweiterungen im Bereich der Zeichensätze (in HTML ist man sehr leicht an die Grenzen gestoßen, wenn man z.b. Kyrillisch oder Unicode darstellen wollte).

XHTML 1.0 / 1.1 an sich fördert verstärkt - in Zusammenarbeit mit CSS - die Möglichkeit, Dokumente für verschiedene Ausgabegeräte (dazu komme ich noch weiter unten) kompatibel und zukunftssicher zu machen – das ist für mich der Hauptgrund für den Umstieg!

2Was ist CSS?

Langsam aber sicher drängen sich die CSS (Cascading Style-Sheets) in die Köpfe der Webdesigner. Vor etwa einem Jahr habe ich im Netz noch die Frage „CSS, was ist das? Kann man sich das wo downloaden?“ gelesen und darüber geschmunzelt. Mittlerweile stelle ich auch im Traum-Projekt fest, dass das Interesse an CSS erwacht ist und ihr alle – langsam aber sicher – dazu bereit seid, euch mal über die reine Schriftenformatierung mit CSS hinauszuwagen.

Zurzeit ist der Standard CSS2 (CSS2.1) aktuell, an CSS3 wird gearbeitet. Im wesentlichen ermöglicht es CSS, dass man die Inhalte, welche durch XHTML 1.0 / 1.1 bereitgestellt werden, formatiert – und, deja vu??? Genau, XHTML soll ja nur die logische Struktur von Texten beschreiben!!! (siehe oben) Die wesentlichen Vorteile von CSS sind:

Die Größe des Dokuments verringert sich (was ja für den Traffic gut ist)
Das Layout der Seiten ist leicht zu verwalten (z.B. betrifft eine Farbänderung der Schrift im externen Style-Sheet automatisch alle Seiten der Website)
Der Benutzer kann die vorgegebenen Farben selbst ändern (z.B. im IE6 und anderen neuen Browser ? Userstylesheets)

Näher will ich hier gar nicht auf CSS eingehen, da ich anschließend den Link zur deutschen Version der CSS2-Spezifikation des W3C mitgebe und ihr ja viel im Traum-Projekt fragen könnt!

Weiterführende Links zu CSS2:

edition-w3c.de/TR/1998/REC-CSS2-19980512/
(CSS2-Spezifikation des W3C)
www.w3.org/TR/CSS21/ (CSS2.1 Spezifikation des W3C)

3DTD – Die DOCUMENT TYPE Definition

3.1Was ist die „Document Type Definition“ (DTD)?

Tja, das bisher meist unbekannte Element, dass an sich jede Website haben sollte (meiner Erfahrung nach haben es grob geschätzt 20 % aller Websites, und davon verwenden wieder nur ca. 1/5 das korrekte!). Eine DTD teilt dem Browser mit, welches Dokument er zu erwarten hat! Somit nimmt eine korrekte DTD wesentlichen Einfluss darauf, wie der Browser eine Seite rendert und darstellt.

Diese Darstellung kann wie folgt sein:

Standard-Mode: Der Browser erkennt eine korrekte DTD
Quirk-Mode: Der Browser erkennt keine oder eine fehlerhafte DTD und nimmt somit an, dass es sich um ein Dokument handelt, welches noch für "Web-Urzeiten“ (als DTDs kaum bis gar nicht verwendet wurden) handelt – er stellt das Dokument somit für alte Browser lesbar dar (z.b. der IE6 stellt das Dokument so dar, wie es im IE4 ausgesehen hätte).

Eine fehlerhafte DTD führt dazu, dass das Dokument nicht valide ist (darüber erzähl ich was im nächsten Punkt) und kann vor allem in Verbindung mit CSS dazu führen, dass das Dokument falsch angezeigt wird (z.B.: Box-Model-Bug).

3.2Gültige DTDs für XHTML 1.0

In XHTML 1.0 gibt es folgende gültige DTDs:

Strict
Transitional
Frameset

3.2.1DTD für XHTML 1.0 Strict:

<!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">

3.2.2DTD für XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

3.2.3DTD für XHTML 1.0 Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
" DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

In XHTML 1.1 gibt es nur noch folgende DTD:

Strict

3.3Gültige DTD für XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

Es wäre ja alles perfekt, wenn das jetzt so auf allen Browsern funktionieren würde! Tut es aber natürlich nicht ganz, weil manche Browser unterschiedlich "switchen“, also vom Quirk- in den Standard-Mode (bzw. zurück) schalten. Eine Übersicht über die DTDs und die Interpretationen durch die Browser findet ihr hier: www.meyerweb.com/eric/dom/dtype/dtype-grid.html

4Warum Standards und „valide Seiten“?

Und wieder mal kommt das W3C ins Spiel. Diesem obliegt es schon seit geraumer Zeit, Standards (welche dann in Richtlinien, Spezifikationen usw. festgeschrieben werden) für das Web zu definieren. Mitglieder des W3C sind unter anderem Microsoft, Sun, Apple usw. Faktum ist, dass jeder Webdesigner diese Standards beachten und validen Code (sowohl XHTML als auch CSS) erstellen sollte.

Dies bedeutet natürlich eine gewisse Kenntnis der Spezifikationen (die es großteils ja auch auf Deutsch gibt), händische Nacharbeit im Code und Testing.

Das Einhalten dieser Standards wird in Zukunft unerlässlich sein, da zukünftige Browser nicht valides XHTML 1.0 / 1.1 vermutlich gar nicht mehr (im Idealfall falsch) darstellen werden – „Nix, basta, Ende – lieber User, tut mir leid, aber der Code ist nicht so, wie ich ihn erwartet habe! Ich zeig dir nichts – bäähhh“).

Valider Code garantiert zusätzlich Zukunftssicherheit für die nächsten Browsergenerationen und ist absolut aufwärtskompatibel! Na, wenn das nicht genügend Gründe sind?!

Validatoren:

validator.w3.org (HTML und XHTML)
jigsaw.w3.org/css-validator/ (CSS)

Das W3-Consortium:

Spezifikationen / Empehlungen:

www.edition-w3c.de/TR/2002/REC-xhtml1-20020801/
(XHTML 1.0)
www.w3.org/TR/xhtml11/ (XHTML 1.1 englisch)
edition-w3c.de/TR/1998/REC-CSS2-19980512/ (CSS2)

5Die zukünftigen Besucher deiner Website!

Die Web-Welt ändert sich – und die Zukunft hat schon begonnen. Hat man vor wenigen Jahren noch seine Website dafür geschaffen, um auf 15 oder maximal 17 Zoll Monitoren angezeigt zu werden, so sind es heute – vor allem im Business-Bereich – weit mehr Ausgabegeräte, welche auf die Website zugreifen sollen:

Laptops und Sub-Laptops
Handhelds und Palmtops
UTMS-fähige Geräte (Die Bildtelefonie ist ja schon da, es dauert nicht mehr lange, bis auch das Web am Handy intensiv genutzt wird)
Screenreader (Ja, man kann sich Webinhalte auch vorlesen lassen)
Braille-Ausgabegeräte (Blindenschrift)

Nicht zu vergessen sind auch die Robots der Suchmaschinen, welche eure Seiten wie ein „Blinder“ lesen müssen und danach indizieren! Dies betrifft in erster Linie die korrekte Verwendung des ALT- und TITLE-Attributs und dergleichen.

6Befreit euch und eure Site von den Zwängen!

Abschließend noch ein Aufruf an euch alle:

Setzt vermehrt CSS ein – am besten in Verbindung mit XHTML 1.0/ 1.1
Macht das Layout der Seiten nur noch mit „hartem“ CSS (per Ebenen) und verzichtet auf Tabellen zu Layoutzwecken – die sind nicht dafür vorgesehen!
Validiert euren Code
test early
test often
test cross-browser
test cross-os

Wir unterstützen euch dabei im Traum-Projekt – postet, fragt, diskutiert – und verzeichnet Erfolge! Es wird sich lohnen!

7Und warum schreibe ich immer von XHTML 1.0 / 1.1 und nicht einfach von “XHTML“?

Vielleicht habt ihr euch das ja auch gefragt, als ihr diesen Artikel durchgelesen habt!?

XHTML 2 liegt bereits teilweise vor und es wird vieles von dem, was wir jetzt im Coding-Bereich kennen, auf den Kopf stellen.
XHTML 2 wird keine Weiterführung von HTML 4 oder XHTML 1.1 sein, sondern ein kompletter Neubeginn.
XHTML 2 versteht sich als modulare Sprache, Attribute werden in eigenständigen „Attribute Collections“ definiert sein und vieles mehr.

Auch CSS3 ist in Entwicklung und wird sich ebenfalls sehr stark von dem jetzt bekannten CSS2 unterscheiden. Noch ist das allerdings Zukunftsmusik und braucht euch nicht zu erschrecken – es werden noch Jahre vergehen, ehe es in „unsere“ Welt Einzug halten wird!

Mehr Infos zu XHTML 2.0: