joerghuelsermann.de XHTML5 und HTML5 anwenden

XHTML5 und HTML5 anwenden

Um mit Hilfe einer Browserweiche XHTML5 und HTML5 auszugeben, bedarf es zuerst der Unterscheidung der wichtigsten Punkte die man berücksichtigen müsste. Dieses Wissen trägt dann wesentlich zu diesem XHTML5 Workaround bei. Durch den Wechsel dieser Domain auf XHTML5 sind die folgenden Punkte aufgefallen.

Unterschiede im Aufbau zwischen XHTML5 und HTML5

Bei Anwendung von diesem Workaround sind die folgenden Punkte enthalten. In der Tabelle sind die wichtigsten Unterschiede zwischen XHTML5 und HTML5 zusammengefasst.

Punkte für XHTML5 und HTML5
PunktBeispielXHTML5HTML5
XML Deklaration<?xml version="1.0" encoding="UTF-8"?>Erforderlich ausser bei UTF-8 als Zeichensatz, dort aber auch empfehlenswertDarf nicht angegeben werden
Contenttype der per header gesendet wird.header('Content-Type: application/xhtml+xml; charset=UTF-8'); oder header('Content-Type: text/html; charset=UTF-8');application/xhtml+xmltext/html
Schreibweise Doctype<!DOCTYPE html>Schreibweise case SensitiveSchreibweise erlaubt eigentlich alle Varianten.
Schreibweise Elemente<img src=“/beispiel.png“ alt=“Beispiel“ />XML Schreibweise für selbst schliessende Elemente erforderlich. Elemente müssen klein geschrieben werden.Erlaubt XML und HTML Schreibweise für selbst schliessende Elemente.
Meta Element zur Angabe des Zeichensatzes<meta charset="UTF-8" />Optional sollte aber angegeben werden falls im Header oder der XML Deklaration noch keine Angabe erfolgt ist.Optional sollte aber angegeben werden falls im Header noch keine Angabe erfolgt ist.
Namensraumangabe und lang Attribute<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">Die Angabe des Namensraumes ist notwendig für XHTML und auch das xml:lang Attribut. Das lang Attribut ist optional aber zu empfehlen.Die Angabe des Namensraumes und des xml:lang Attributes werden bei Ausgabe als HTML nicht angewendet. Optional.
Neue Elementedocument.createElement("article");Werden für die Browser, die durch die Browserweiche XHTML senden erkannt.Können durch Javascript für Versionen des Internet Explorers kleiner als Version 9 erkannt werden.
noscript Element<noscript>Steht nicht zur VerfügungAnwendbar für die Fälle, wenn Javascript unterdrückt wird.
Benannte Entitäten&amp; &lt; &gt; &quot; &apos;Ausser den 5 Ausnahmen &,<,>,“ und ‘ nicht für XML definiert. Diese sind aber auch durch Unicode Zeichenreferenzen ersetzbar.Alle weiterhin verwendbar.
Basis Adresse in XMLxml:base="http://3jh.de"Die Möglichkeit ist gegeben eine Basisadresse für Links wie in weiteren XML zu setzen. Wird nicht in allen aktuellen Browsern unterstützt. Hier noch ein Verweis auf die Spezifikation des W3C und für die deutsche Übersetzung.Nicht anwendbar
Javascriptdocument.write("text"); document.writeln("text");Wird nicht ausgeführt.Wird nicht ausgeführt wenn das Skript mit den Attributen defer oder async versehen ist.

Kodebeispiel für die Browserweiche

Aus den genannten Unterschieden, wurde dann für das Senden der XML Deklaration und des Headers und für die Unterstützung des Internet Explorers per Javascript, eine Browserweiche eingebaut.

if (isset($_SERVER['HTTP_ACCEPT']) and strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')!==false) {
header('Content-Type: application/xhtml+xml; charset=UTF-8');
echo '<?xml version="1.0" encoding="UTF-8"?>';}
else {
header('Content-Type: text/html; charset=UTF-8');}
PHP Kode für die Browserweiche

Beachtete Punkte bei dieser Anleitung

Die XML Schreibweise wurde grundsätzlich überall angewendet, wie auch die Angabe aller optionalen Punkte für die XML und HTML Version. Auch wurden keine benannten Entitäten, die unter XML nicht definiert sind, verwendet. Durch den Zeichensatz UTF-8, war es auch möglich Zeichenreferenzen, als das entsprechende Zeichen zu verwenden. Als Alternative besteht die Möglichkeit, diese nicht zur Verfügung stehenden Entitäten zu definieren, um diese verwenden zu können.

Diese Vorgehensweise hat den Vorteil das man schnell jeden beliebigen anderen XHTML Dokumententyp verwenden könnte und sich viele Fehler für die Anwendung von XML vermeiden lassen.

Differenzen in der Ausgabe

Durch die Anwendung der Browserweiche nach diesem Workaround, wird je nach Browser also eine Ausgabe erreicht die XML oder HTML entspricht.

Ausgabe Aufbau XML

Der Server sendet content_type : application/xhtml+xml; charset=UTF-8 bei allen geeigneten Browsern.

Ausgabe XML Version
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="UTF-8" />
<title>XHTML5 Beispiel</title>
</head>
<body>
</body>
</html>

Bei Verwendung des Zeichensatzes UTF-8 und entsprechendem Header des Dokumentes wäre dieses Minimum möglich.

Minimum Grundgerüst XHTML5
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>XHTML5 Beispiel</title>
</head>
<body>
</body>
</html>

Ausgabe Aufbau HTML

Der Server sendet content_type : text/html; charset=UTF-8 bei den restlichen Browsern, die veraltete Versionen darstellen.

Ausgabe HTML Version
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="UTF-8" />
<title>HTML5 Beispiel</title>
<script type="text/javascript" src="/js.js"></script>
</head>
<body>
<noscript>Meldung bei abgeschaltetem Javascript</noscript>
</body>
</html>

Zum Vergleich das minimale Grundgerüst, welches für HTML5 erforderlich wäre ohne Verwendung der neuen Elemente.

Minimum Grundgerüst HTML5
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>HTML5 Beispiel</title>
</head>
<body>
</body>
</html>

Weitere Anwendung der Browerweiche

Man könnte natürlich auf einige Punkte verzichten beziehungsweise modifizieren und dadurch erreichen das man eine minimale Grundstruktur erreicht.

Dafür müsste man zuerst die Abfrage des Browsers in eine Variable übergeben. if (isset($_SERVER['HTTP_ACCEPT']) and strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')!==false){$xhtml = 1;} else {$xhtml = 0;}

Namensraum und xml:lang Attribute

An dieser Stelle sollte man eine Funktion anwenden, um bei mehrmaliger Anwendung von den Attributen für die Sprachangabe diese verwenden zu können.

function xmllang($lang) {
global $xhtml;
if ($xhtml === 1) {
 $sprache = ' xml:lang="'.$lang.'" lang="'.$lang.'"';}
else {
$sprache = ' lang="'.$lang.'"';}
return $sprache;}

Zusätzlich kann man die Angabe des Namensraumes prüfen. if ($xhtml === 1){$namensraum = ' xmlns="http://www.w3.org/1999/xhtml"';} else {$namensraum = '';}

Und damit wären wir bei dieser weiteren Modifikation für die Ausgabe als XML oder HTML. <html<?php echo $namensraum.xmllang('de') ?>>

Dieses Prinzip kann man auch anwenden, um die neuen Elemente die HTML5 mit sich bringt nur bei Ausgabe als XML zur Verfügung zu stellen um nicht auf die Verwendung von Javascript angewiesen zu sein. Bei der HTML Version verwendet man stattdessen div Container und kann dafür ein separates CSS bereitstellen. Dieser Weg hat den Nachteil der fehlenden Semantik.

Browserweiche per Hypertext Access

Eine Browserweiche per htaccess ist beispielsweise auf diesem Weg zu realisieren, wenn der Server dieses unterstützt.

<FilesMatch "\.(html|htm|xhtml)$">
AddDefaultCharset UTF-8
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteRule .* - "[T=application/xhtml+xml; charset=UTF-8]"
</FilesMatch>

Bei dieser Methode durch die htaccess Datei muss man den Zeichensatz UTF-8 anwenden, um nicht die XML Deklaration angeben zu müssen. Möchte man dabei auch die neuen Elemente einsetzen und ältere Browser unterstützen wäre es eine Möglichkeit Conditional Comments für das Einbinden der Javascript Datei einzusetzen.

<!--[if lt IE 9]><script type="text/javascript" src="/js.js"></script><![endif]-->

Das Grundgerüst für den Aufbau sieht ohne Verwendung der neuen Elemente in HTML5 folgendermassen aus.

Ausgabe Browserweiche per htaccess
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="UTF-8" />
<title>XHTML5 und HTML5</title>
</head>
<body>
</body>
</html>

Als Alternative für statische Dateien würde sich noch anbieten diese durch den PHP Parser zu schicken durch eine Angabe in der htaccess Datei. AddHandler x-httpd-php .html Dadurch wäre man in der Lage die Anwendung der Browserweiche mit Hilfe von PHP zu ermöglichen.

Browserweiche durch CSS

Der Anwendungsbereich dieser Methode ist nicht besonders groß. Das Prinzip beruht auf der Nutzung des Namensraumes und als Beispiel tausche ich das Hintergrundbild aus.

Austausch Hintergrundbild durch CSS Browserweiche
@namespace x url(http://www.w3.org/1999/xhtml);
body{background:url(bild.png);}
x|body{background:url(bild.svg);}

Neue Elemente in HTML5

Die meisten neuen Elemente in HTML5 versuche ich per Javascript für ältere Browser einzubinden. In dem Falle das Javascript nicht zur Verfügung steht könnte man noch das noscript Element anwenden um einen Hinweis zu geben das Javascript zur korrekten Darstellung von HTML5 benötigt wird. Das bezieht die folgenden Elemente meiner Ansicht nach ein.

Für das audio Element und andere Elemente die keinen textlichen Inhalt transportieren benötigt man allerdings kein solches Vorgehen. Bei SVG und MathML Abschnitten dagegen weiche ich auf die Browserweiche aus, um dort schon eine grobe Unterscheidung zwischen XHTML5 und HTML5 zu gewährleisten. Durch diese Methodik kann eine ausreichende Unterstützung für andere XML Namensräume erreicht werden.

Für das datalist Element setze ich die Browserweiche auch ein und setze es auf datalist{display:none;} um Darstellungsprobleme zu vermeiden.

Nutzung der neuen Elemente durch CSS

Um die neuen Elemente als Blockelemente derzeit schon zu nutzen, sollte man für diese eine Angabe per CSS machen.

Das Beispiel: article{display:block;} kann man für die folgenden Elemente in der Liste gleich anwenden um eine einheitliche Darstellung zu erreichen. Im Grunde ist es in modernen Browser bereits schon implementiert.

Es gibt auch so Sonderfälle wie beispielsweise das template Element das ich mit template{display:none;} versehen werde.

Verwendung der XML Basisadresse

Durch die mangelnde Unterstützung ist nicht zur Verwendung der Basisadresse zu raten. Wenn man sie anwenden sollte kann die Validität des Dokumentes durch die Browserweiche erreicht werden.

Weitere Überlegungen

Vor der Ausgabe als HTML5 wäre es beispielsweise möglich durch PHP und regulären Ausdrücken die Ausgabe zu modifizieren um eine erlaubte Minimierung in HTML zu erreichen. Mit mehr Aufwand meiner Ansicht nach wäre die Erstellung einer Webseite auch über das DOM möglich um eine solche Ausgabe zu erreichen.