Blog Entry
Webdesign mit W3C Standards Posted on August 25, 2007
Inzwischen hat es sich langsam durchgesetzt das Webdesigner neue Webseiten nach dem XHTML Standard erstellen. Eigentlich müsste man dies positiv bewerten, oder doch nicht?
Leider nein, den es fehlt immer noch an mangelnder Motivation sich mit dem neuen Standard auseinander zu setzen. Viele glauben sogar das XHTML der Nachfolger von HTML4 ist, dies nicht natürlich nicht der Fall. Mit XHTML wurde versucht HTML und XML zu vereinen um die Vorteile beider Standards nutzen zu können, es ist also weder ein Nachfolger von HTML4 noch XML. Nicht selten ist bei vielen Webseiten das einzige was an xhtml erinnert nur die erste Zeile, der Doctype. Es ist auch bei weiten nicht damit getan seine Webseite fehlerfrei durch den Validator zu jagen, dies ist zwar ein guter Anfang, aber auch nicht mehr!
Der richtige MIME Type
Der XHTML 1.0 Standard erlaubt eine Webseite sowohl mit dem MIME Type "text/html", "application/xhtml+xml"sowie "application/xml" zu senden. Der erste Fall ist für die meisten Webseiten die Regel, der Quellcode wird als sogenanntes "Tag Soup" interpretiert, also wie gewöhnliches (ungültiges) HTML. Der Grund dafür ist einfach, viele ältere Browser sowie die neuste Version des Internet Explorer 7 unterstützen kein MIME Type "application/xhtml+xml". Eine Übersicht mit Browser die xhtml unterstützen kann man auf den Seiten des W3C finden. Die Vorteile von xhtml sind jedoch nur mit diesen MIME Type nutzbar, nur so wird der XML Parser des Browsers verwendet.
Unterschiede zu HTML
- Es ist möglich XML Namespaces zu verwenden um z.B. weitere XML Applikation zu integrieren wie SVG, MathML.
- Sollte das Dokument nicht XHTML-Standard-konform sein stoppt der XML-Parser und es ist eine Fehlermeldung statt der Webseite zu sehen. Das passiert sehr schnell, es reicht schon einer der folgender Fehler.
-
Alle Tags müssen geschlossen Tag werden, bei HTML ist das schließen der Tags sehr oft optional (Beispiel:
<p>, <br>). - Alle Tags und Attribute müssen klein geschrieben werden.
- Es sind nur Tags & Attribute erlaubt die in der DTD deklariert sind.
-
Das einleitende
<html>-Tag hat in HTML meistens keine Attribute. In XHTML muss jedoch der Seite der Namensraum für XHTML explizit angeben werden. -
Sonderzeichen im Inhalt wie das kaufmännische
&, <, >dürfen nur innerhalb eines CDATA Block vorkommen oder als Entities. -
Das Document Object Model (DOM) ist nicht mehr 100% kompatibel mit dem von HTML. Das bedeutet viele Javascript Programme laufen überhaupt nicht. Die bei HTML häufig verwendeten Funktionen wie
innerHTML(),document.write()sind nicht mehr dabei. Das ist besonders dann tragisch wenn man Javascript Code von anderen Webseiten integrieren muss den man nicht verändern darf/kann (z.B. für Tracking, Werbebanner, ..) - Bei CSS/Javascript müssen ebenfalls die Tags und Attribute klein geschrieben werden.
Zugänglichkeit von Webseiten
Ok, nun sind alle technischen Voraussetzungen erfüllt die für XHTML notwendig sind. War das schon alles? -Die Antwort ist leider nein!
Das W3C definiert nicht nur Standards wie HTML/XHTML, es gibt genauso klare Vorgaben die eingehalten werden müssen damit die Inhalte möglichst vielen Menschen zugänglich gemacht werden können. Dies ist in den [Web Content Accessibility Guidelines] WCAG die von der Web Accessibility Initiative des W3C festgelegt worden sind zu finden. Die 2. Version, WCAG 2.0 liegt bereits als Entwurf vor und sollte einige Unklarheiten der 1. Version beseitigen. Ein sehr guten Einstieg bieten die deutschen Seiten des W3C mit Einfach anfangen: Webseiten für jeden zugänglich machen, deshalb werde ich nur auf wenige mir besonders wichtige Punkte eingehen.
Strukturiertes, semantisches XHTML/HTML
Weniger technische visierte Autoren die mit graphischen HTML Editoren arbeiten und nun beginnen neue neue Techniken wie Stylesheets zu verwenden machen oft folgendes:
Stylesheet
.ueberschrift { font-size:14px; }
HTML
<div class="ueberschrift">Das ist die Überschrift</div>
Dies wird zwar in allen gängigen Browsern richtig angezeigt und auch der W3C Validator ist damit einverstanden. Dennoch ist diese Vorgehensweise nicht gut, die Überschrift ist nur optisch als solche erkennbar falls das Ausgabegerät Stylesheets unterstützt. Immer noch wird primär gedacht das zur Anzeige einer Webseite ein Browser wie Internet Explorer oder Mozilla Firefox verwendet wird. Es wird völlig ignoriert das es auch ein Gerät wie z.B. Handy sein könnte das Stylesheets überhaupt nicht oder nur begrenzt unterstützt. Vielleicht will ein Besucher auch einfach nur die Seite in schwarz/weiß ohne Text und Hintergrund Grafik sehen und schaltet die Stylesheets ab?
Etwas besser...
<h1 class="ueberschrift">Das ist die Überschrift</h1>
Hier wird die Überschrift durch Verwendung des HTML Tags h1 statt div auch als solche klar kenntlich gemacht. Das h1 Tag steht für Headline 1 ...also die erste Überschrift. Dennoch ist das ganze immer noch nicht perfekt. Ein HTML Tags wie h1 hat eine bereits vordefinierte Formatierung beim Firefox Browser ist die Schriftgröße 32 Pixel und fett (andere Browser variieren leicht). Ohne Stylesheet wird die Überschrift also mehr das doppelt so groß angezeigt! Deshalb sollte man immer das nächstliegende HTML Tag das den Vorstellungen am meisten entspricht verwenden. In diesen Fall wäre dies h4 statt h1 auch wenn es die erste Überschrift im Text wäre.
Genauso sollte es auch selbstverständlich sein das ein Textabschnitt (Paragraph) als solcher kenntlich gemacht und nicht einfach mit 2 Zeilenumbrüchen umgesetzt wird (statt "Text <br /><br />" ein "<p>Text Abschnitt</p>" verwenden). Das ganze kann man weiterführen, für eine Auflistung sollte auch eine HTML Liste verwenden (das trifft auch auf die Navigation zu).
Während das oben genannte bei vielen W3C konformen Webseiten noch teilweise umgesetzt wird, werden Formulare immer noch mit Tabellen 'formatiert'. Ein Text der zu einen Eingabefeld gehört sollte ebenfalls diese Zugehörigkeit durch verwenden des <label> Tag kenntlich machen - Leider selten auf Webseiten zu finden!
Hier deshalb ein ausführlicheres Beispiel:
<h3>Kontaktformular</h3> <form action="contact.php" method="post"> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td class="formLabelRequired">Anrede*</td> <td class="formField"><select name="anrede" id="anrede"> <option value="Frau">Frau</option> <option value="Herr">Herr</option> </select></td> </tr> <tr> <td class="formLabelRequired">Nachname*</td> <td class="formField"><input name="nname" id="nname" value="" maxlength="50" type="text"></td> </tr> <tr> <td class="formLabel">Vorname</td> <td class="formField"><input name="vname" id="vname" value="" maxlength="50" type="text"></td> </tr> <tr> <td class="formLabel">Telefon</td> <td class="formField"><input name="telefon" id="telefon" value="" maxlength="50" type="text"></td> </tr> <tr> <td class="formLabelRequired">E-Mail-Adresse*</td> <td class="formField"><input name="e-mail" id="e-mail" value="" maxlength="50" type="text"></td> </tr> <tr> <td class="formLabelRequired">Ihre Nachricht*</td> <td class="formField"><textarea name="nachricht" id="nachricht" cols="20" rows="3"></textarea></td> </tr> <tr> <td class="formLabelRequired"> </td> <td class="formField"><input name="sendit" id="sendit" value="Senden" type="submit"><input name="resetit" id="resetit" value="Zurücksetzen" type="reset"></td> </tr> </tbody> </table> <input name="cpID49" value="49" type="hidden"><input name="38dd62325fa2cfa32bf400ac3399cf4c" value="470" type="hidden"> </form>
Genau die oben beschriebenen Fehler, wie geht es also einfacher & besser?
<!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 profile="profile.dat"> <title>xhtml form</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <style type="text/css"> /*<![CDATA[*/ fieldset { width: 50%; } legend { font-weight: bold; font-size: 150%; } label { display: block; float: left; width: 150px; cursor: pointer; vertical-align: top; line-height: 150%; } input { } /*]]>*/ </style> </head> <body> <form name="phpwcmsForm49" id="phpwcmsForm49" action="contact.php" method="post" enctype="multipart/form-data"> <fieldset> <legend>Kontaktformular</legend> <label for="anrede" class="formLabelRequired">Anrede*</label> <select name="anrede" id="anrede"> <option value="Frau">Frau</option> <option value="Herr">Herr</option> </select> <p> <label for="nname" class="formLabelRequired">Nachname*</label> <input name="nname" id="nname" value="" maxlength="50" type="text" /> </p> <p> <label for="vname">Vorname</label> <input name="vname" id="vname" value="" maxlength="50" type="text" /> </p> <p> <label for="telefon">Telefon</label> <input name="telefon" id="telefon" value="" maxlength="50" type="text" /> </p> <p> <label for="e-mail" class="formLabelRequired">E-Mail-Adresse*</label> <input name="e-mail" id="e-mail" value="" maxlength="50" type="text" /> </p> <p> <label for="nachricht" class="formLabelRequired">Ihre Nachricht*</label> <textarea name="nachricht" id="nachricht" cols="20" rows="3"></textarea> </p> <p> <input name="sendit" id="sendit" value="Senden" type="submit" /> <input name="resetit" id="resetit" value="Zurücksetzen" type="reset" /> </p> <p> <input name="cpID49" value="49" type="hidden" /> <input name="38dd62325fa2cfa32bf400ac3399cf4c" value="470" type="hidden" /> </p> </fieldset> </form> </body> </html>
In diesen Artikel habe ich nur wenige Beispiele aufgeführt die dazu anregen sollen dieses kaum beachtete Thema weiter zu vertiefen. Ich empfehle dringend die im Artikel aufgeführten Links für ein tieferes Studium.
