..:: PSD 2 xHTML FAQ:
Häufig gestellte Fragen - frequently asked questions
Auf dieser Seite möchten wir Ihnen einen Überblick über aktuelle Web-Standards verschaffen. Dabei konzentrieren wir uns auf die Standards XHTML 1.0 Transitional, XHTML 1.0 Strict und XHTML 1.1 ohne tief auf die Entstehungsgeschichte einzugehen. In den Vordergrund stellen wir Änderungen und Besonderheiten je Version, die Autoren von Webseiten bei der Auswahl des geeigneten XHTML-Standards besonders beachten müssen.
Vorgehensweise
Im letzten Teil stellen wir die Unterschiede zwischen XHTML 1.0 Strict und XHTML 1.1 dar.
Am Ende wartet das Schlußwort auf Sie.
Die Unterschiede von HTML 4.01 und XHTML 1.0 Transitional
HTML wurde 1989 von Tim Berners-Lee ohne Versionsbezeichnung in Genf festgelegt. HTML 4.01 ersetzt HTML 4.0 seit dem 24. Dezember 1999 mit vielen, kleineren Korrekturen. HTML 3.2 entstand im Januar 1997 und HTML 4.0 im Dezember desselben Jahres.
Die Spezifikationen zu XHTML 1.0 wurden im Januar 2000 vom W3 Consortium erstmalig veröffentlicht und im August 2002 in einer revidierten Fassung neu aufgelegt.
Die Neuformulierung von HTML in XML-Syntax bringt die folgenden, wichtigen Vorteile mit sich:
- XHTML ist durch seine strengeren Regeln leichter zu erstellen und zu warten
- es ist einfacher zu erlernen
- es können via Stylesheet beliebig viele Dokumente verändert und transformiert werden
- es eignet sich besser für die unterschiedlichsten Endgeräte
- es ist zukunftssicher, da es leicht zukünftigen Versionen angeglichen werden kann
Unterschiede zu HTML
Die XHTML-Syntax unterscheidet sich in wenigen, aber grundlegenden Punkten vom Vorgänger HTML.
- Der Dokumenttyp (DTD) muss definiert werden
Invalid:
Fehlender oder falscher DokumenttypValid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> - Tags müssen in der richtigen Reihenfloge sein
Invalid:
<em>Test <strong>Beispiel</em></strong>Valid:
<em>Test <strong>Beispiel</strong></em> - Elemente müssen geschlossen werden
Invalid:
<p>Test<br>BeispielValid:
<p>Test<br />Beispiel</p> - Elemente und Attribute werden immer kleingeschrieben
Invalid:
<SPAN CLASS="Beispiel" />Valid:
<span class="beispiel" /> - Attributswerte gehören immer in Anführungszeichen
Invalid:
<td align=center />Valid:
<td align="center" /> - Attribute haben immer einen Wert
Invalid:
<option selected />Valid:
<option selected="selected" /> - id-Attribut löst name-Attribut ab
Invalid:
<a href="aAnker">Verweis</a>
<p>viel Inhalt</p>
<a name="anker">Ziel</a>Valid:
<a href="#Anker">Verweis</a>
<p>viel Inhalt</p>
<a id="anker" name="anker">Ziel</a>
MIME-Typ (Multi-Purpose Internet Mail Extension)
Im Gegensatz zu HTML-Dokumente werden XHTML-Dokumente nicht grundsätzlich als MIME-Typ text/html ausgegeben. Dies trifft zwar nicht auf XHTML 1.0 Transitional zu, jedoch soll für Dokumente ab XHTML 1.0 Strict der MIME-Typ application/xhtml+xml verwendet werden, auch wenn application/xml und text/xml erlaubt sind.
Der MIME-Typ kann auf drei unterschiedliche Weisen definiert werden (mit absteigender Priorität)
- Serverseitige Definition
Beispiel Apache (.htaccess)
AddType application/xhtml+xml .html
Beispiel PHP
<?php header("Content-type: application/xhtml+xml"); ?>
Beispiel ASP
<% Response.ContentType = "application/xhtml+xml" %>
- meta-Element
Beispiel
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
- type-Attribut
Beispiel
<a href="URI" type="application/xhtml+xml">Test</a>
Encoding
HTML-/XHTML- und XML- Dokumente basieren alle auf dem UCS (Universal Character Set), können jedoch unterschiedliche Kodierungen (Encodings) verwenden. Das Encoding kann auf vier verschiedene Arten festgelegt werden (ebenfalls mit absteigender Priorität):
- Serverseitige Definition
Beispiel Apache (.htaccess)
AddType 'application/xhtml+xml; charset=utf-8' .html oder AddDefaultCharset utf-8
Beispiel PHP (XML-Deklaration)
<?xml version="1.0" encoding="utf-8"?>
Beispiel ASP
<% Session.CodePage = 65001 %>
- meta-Element
Beispiel
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
- charset-Attribut
Beispiel
<a href="URI" charset="utf-8">Test</a>
Das W3C erkennt alle Methoden an, empfiehlt jedoch die serverseitigen Versionen für den reinen Einsatz im Web. Um Dokumente weiter distribuieren zu können (auf CDs, DVDs oder andere Medien) empfiehlt sich zusätzlich zur serverseitigen Definition die Angabe als meta-Element, damit das Encoding übernommen werden kann.
XHTML 1.0: Unterschiede zwischen Strict & Transitional
Im Folgenden sollen die wichtigsten Änderungen ab XHTML 1.0 Strict aufgeführt werden. Während XHTML 1.0 Transitional noch viele aus HTML 4.01 bekannte Tags und Methoden erlaubt, zwingt XHTML 1.0 Strict nicht nur zur konsequenteren Trennung von Form und Inhalt über CSS, sondern verbietet teilweise auch schlichtweg Altbekanntes.
Viele Autoren von Webseiten vermissen in XHTML ab 1.0 Strict beispielsweise die Möglichkeit der Angabe des Targets. Im neuen Browserfenster öffnende Links gehören damit der Vergangenheit an. Das W3C möchte Webseitenbesuchern im Zeitalter des Tabbed Browsing selber überlassen, wie sie Links öffnen. Entscheidet man sich als Autor einer Webseite mit Hilfe von Java Script Links dennoch im neuen Fenster öffnen zu lassen, so sollte man diese Links aus Usability-Gründen besonders kennzeichnen. So sieht der Webseitenbesucher bereits vor dem Klick, wie sich ein Link öffnet und hat die Möglichkeit, selber zu entscheiden, ob er einen solchen Link lieber in einem Tab öffnen möchte.
Farb-Legende
- XHTML1.0 Element
- XHTML1.0 loses Element (entfernt in Strict)
- XHTML1.0 Attribut
- Warnung oder Notiz
Die folgenden Elemente wurden in XHTML Strict entfernt
dirmenucenterisindexappletfontbasefontsstrikeuiframenoframes
Die folgenden Elemente wurden in XHTML Strict geändert
head
-
Element
isindexentfernt in Strict base
-
Attribut
hrefgeändert von implementiert zu benötigt in Strict -
Attribut
targetentfernt in Strict link
-
Attribut
targetentfernt in Strict script
-
Attribut
languageentfernt in Strict noscript
-
Elemente
center,noframes,isindex,menu,dir,a,br,span,bdo,object,applet,img,map,iframe,sub,sup,em,strong,dfn,code,q,samp,kbd,var,cite,abbr,acronym,big,small,font,basefont,tt,i,b,u,s,strike,input,select,textarea,label,buttonnicht erlaubt in Strict body
-
Attribute
bgcolor,text,link,vlink,alinkentfernt in Strict -
Elemente
center,noframes,isindex,menu,dir,a,br,span,bdo,object,applet,img,map,iframe,sub,sup,em,strong,dfn,code,q,samp,kbd,var,cite,abbr,acronym,big,small,font,basefont,tt,i,b,u,s,strike,input,select,textarea,label,buttonnicht erlaubt in Strict div
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
alignentfernt in Strict p
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
alignentfernt in Strict h#
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
alignentfernt in Strict ul
-
Attribute
type,compactentfernt in Strict ol
-
Attribute
type,compact,startentfernt in Strict li
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribute
type,valueentfernt in Strict dl
-
Attribut
compactentfernt in Strict dt
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict dd
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict address
-
Element
pentfernt in Strict hr
-
Attribute
align,noshade,size,widthentfernt in Strict pre
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Elemente
sup,subadded in Strict.Entgegen der Syntax-Regeln für Strict erlaubt
prenichtsubundsup. In Transitional waren diese schon immer verboten. -
Attribut
widthentfernt in Strict blockquote
-
Elemente
center,noframes,isindex,menu,dir,a,br,span,bdo,object,applet,img,map,iframe,sub,sup,em,strong,dfn,code,q,samp,kbd,var,cite,abbr,acronym,big,small,font,basefont,tt,i,b,u,s,strike,input,select,textarea,label,buttonnicht erlaubt in Strict ins
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict del
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict a
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
targetentfernt in Strict -
aElemente dürfen nicht verschachtelt werden. span
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict bdo
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict br
-
Attribut
clearentfernt in Strict em
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict strong
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict dfn
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict code
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict samp
- Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict kbd
- Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict var
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict cite
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict abbr
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict acronym
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict q
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict sub
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict sup
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict tt
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict i
- Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict b
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict big
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict small
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict object
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribute
align,border,hspace,vspaceentfernt in Strict param
-
Attribut
namegeändert von benötigt in implementiert in Strict. img
-
Attribute
name,align,border,hspace,vspaceentfernt in Strict map
-
Elemente
center,noframes,isindex,menu,dirnicht erlaubt in Strict -
Attribut
nameentfernt in Strict area
-
Attribut
targetentfernt in Strict form
-
Elemente
a,br,span,bdo,object,applet,img,map,iframe,sub,sup,em,strong,dfn,code,q,samp,kbd,var,cite,abbr,acronym,big,small,font,basefont,tt,i,b,u,s,strike,input,select,textarea,label,buttonnicht erlaubt in Strict -
Attribute
name,targetentfernt in Strict -
formElemente dürfen nicht verschachtelt werden. label
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict input
-
Attribut
alignentfernt in Strict -
Das
nameAttribut ist für alle input Elemente benötigt mit der Ausnahme destypesubmit oder reset. fieldset
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Nur das
legendElement sollte innerhalb desfieldsetplatziert sein (mit whitespace). legend
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict button
-
Elemente
center,noframes,isindex,menu,dir,iframe,font,basefont,u,s,strikenicht erlaubt in Strict -
Das Element
buttondarfa,form,input,button,textarea,selectnicht beinhalten. table
-
Attribute
bgcolor,alignentfernt in Strict caption
-
Elemente
applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
alignentfernt in Strict tr
-
Attribut
bgcolorentfernt in Strict th
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
nowrap,bgcolor,width,heightentfernt in Strict td
-
Elemente
center,noframes,isindex,menu,dir,applet,iframe,big,small,font,basefont,u,s,strikenicht erlaubt in Strict -
Attribut
nowrap,bgcolor,width,heightentfernt in Strict
XHTML 1.0 Strict und die Unterschiede zu XHTML 1.1
Die aktuelle Version XHTML 1.1 trennt sich von den missbilligten Elementen und Attributen der Transitional- und der Frameset-Variante, die direkt die Präsentation des Dokuments beeinflussen. Der Sprachumfang entspricht somit weitestgehend XHTML 1.0 Strict, hinzu kommen Elemente für Ruby-Erläuterungen. XHTML 1.1 ist nicht für die Kompatibilität zu HTML-Browsern ausgelegt.
- Von jedem Element wurde das lang-Attribut zugunsten des xml:lang-Attributs (gemäß Definition in [XHTMLMOD]) entfernt.
- Von den Elementen a und map wurde das name-Attribut zugunsten des id-Attributs (gemäß Definition in [XHTMLMOD]) entfernt.
Beispiel
<a href="#anker">Verweis</a>
<p>viel Inhalt</p>
<a id="anker">Ziel</a> - Die ruby-Elementsammlung (gemäß Definition in [RUBY]) wurde hinzugefügt.
Ruby ist ein Begriff für einen Textbereich, der mit einem anderen Text, der sogenannten Textbasis, verbunden ist. Ruby-Text wird gebraucht, um eine kurze Erläuterung zum verknüpften Basistext zu liefern, meistens jedoch, um gewissermaßen als Ausspracheanleitung die entsprechende Lesart zu definieren. Ruby-Annotationen werden häufig in Japan als Bestandteil vieler Arten von Publikationen (wie Büchern und Zeitschriften) verwendet (Furigana, z. B. in Manga), aber sie finden ihre Anwendung auch in Taiwan, wo sie insbesondere in Schulbüchern herangezogen werden.
Beispiel Ruby-Markup
<ruby>
<rb>WWW</rb>
<rt>World Wide Web</rt>
</ruby>
Beispiel Gepartes Ruby-Markup
![]()
Quelle: http://de.wikipedia.org
Schlußwort
Die Abkehr von klassischem HTML bringt viele Vorteile. XHTML-Webseiten sind nicht nur für Menschen mit Behinderung leichter zugänglich, sondern bieten zusätzlich folgende Vorteile:
- Barrierefreiheit (auch für nicht behinderte Web-Anfänger)
- Plattformunabhängigkeit (selbes Erscheinungsbild in allen Browsern)
- Schnittstellenreduzierung: ein Dokument für zahlreiche Medien (PC, PDA, Mobiltelefon...)
- Hohe Erreichbarkeit dank Navigationsmodule ohne Tabellen, Java-Scripte, Applets, Flash etc. - der Besucher benötigt keine Plugins mehr
- Einfache Handhabung (z. B. durch feste Navigationsmodule, die nicht wegscrollen - ohne Frames!)
- Schnelleres Handling: Layoutänderung beliebig vieler Dokumente über nur ein Stylesheet
- Ökonomisch durch geringe Serverlast dank 50% und weniger Code. Daraus resultiert auch:
- Schnellere Ladezeiten
- ...
Wer eine Webseite Usability-gerecht erstellen möchte, kann diesem Vorhaben mit dem Standard XHTML 1.0 Transitional vollends gerecht werden. Wichtig hierbei ist nicht nur das konsequente Verwenden von alt-Texten für Bilder, sondern auch der korrekte Einsatz von Elementen. Werden Elemente zweckentfremdet, ist es teilweise kaum noch möglich, eine logische Struktur aus einer Webseite auszulesen. Demnach ist tableless nicht immer gleichzusetzen mit benutzerfreundlich. Im Folgenden sollen einige Beispiele veranschaulichen, welche Fehler die Usability einer Webseite schnell zerstören.
Überschriften sollten auch als solche gekennzeichnet werden:
Nicht empfehlenswert:
<span class=“ueberschrift“>Eine Überschrift</span>Empfehlenswert:
<h1>Eine Überschrift</h1>
Listenartige Informationen sollten auch als Listen dargestellt werden:
Nicht empfehlenswert:
<blockquote>
<p>1. Beispiel</p>
<p>2. Beispiel</p>
<p>3. Beispiel</p>
</blockquote>Empfehlenswert:
<ul>
<li>Beispiel </li>
<li>Beispiel</li>
<li>Beispiel</li>
</ul>
Adressinformationen sollten als solche gekennzeichnet werden:
Nicht empfehlenswert:
<div id="footer">Teststrasse 1 | 54321 Stadt | Tel. 0987 65432</div>Empfehlenswert:
<address>Teststrasse 1 | 54321 Stadt | Tel. 0987 65432</address>
Wer das Layout einer Webseite zu einem späteren Zeitpunkt ohne Eingriffe am Quellcode ändern möchte, dem bringt der Verzicht auf Elemente wie center, dir, font und andere viele Vorteile. Nur wer beim Erstellen einer Webseite auf diese und andere Elemente vollständig verzichtet, kann später durch den Austausch oder durch einfache Ergänzung des Stylesheets das Layout der Webseite völlig verändern.
Ein Verzicht auf klassische Style-Elemente innerhalb eines XHTML-Dokumentes muss nicht zwangsläufig die Verwendung des Standards XHTML 1.0 Strict oder XHTML 1.1 bedeuten. Sollten Sie auf den Einsatz bestimmter Elemente wie iframe oder auf das Attribut target (für Links) nicht verzichten wollen, so spricht nichts gegen den sinnvollen Aufbau einer Webseite im Standard XHTML 1.0 Transitional. Wer sich durch den Standard XHTML 1.0 Strict nicht eingeschränkt fühlt, sollte selbstverständlich nicht zögern, diesen Dokumententyp zu wählen. Je nach Zielgruppe kann auch der Einsatz von XHTML 1.1 in Betracht gezogen werden, jedoch sollte man dabei bedenken, dass XHTML 1.1 von älteren Browsern einiger Webseitenbenutzer noch nicht unterstützt wird.
