HTML5

HTML5 wird unter Webentwicklern immer wieder diskutiert. Seit das Normierungsgremium W3C beschlossen hat, die Arbeit an XHTML einzustellen, scheint klar: Der neue Standard im Web heißt HTML5, auch wenn es bis zur Verabschiedung des endgültigen Standards noch etwas dauert.

Was ist heute schon mit HTML5 möglich?

Die neuen Elemente von HTML5 erlauben etwas mehr semantische Gliederung, Div-Tags werden entbehrlicher. Mit section, article, nav, aside usw. läßt sich ein HTML-Dokument besser strukturieren. Darüber hinaus sind noch aria-role Attribute im Gespräch, die ebenfalls die Bedeutung eines Abschnitts näher bestimmen können. Browser wie Firefox 3 und Opera 10 erlauben die Verwendung, und auch die Gestaltung mittels CSS, der neuen Elemente. Explorer einschließlich Version 7 (oder ggf. Version 8 im sog. Kompatibilitäts-Modus) benötigen JavaScript-Vorarbeit, um solche Elemente formatieren zu können.

HTML5 im Explorer 9 und Firefox

Microsoft scheint ernsthaft am Internet-Explorer 9 zu arbeiten, sodass eine breite Browserunterstützung zu erwarten ist. Falls der Explorer 9 nur für Windows 7 erscheinen sollte, bleibt aber eine schnelle umfassende Unterstützung von HTML5 Zukunftsmusik, schließlich ist einigen Webstatistiken zufolge Windows XP noch mit über 60% im Netz vertreten. Firefox 2 schließt intern die ihm unbekannten Elemente wie der Explorer und benötigt für HTML5 ebenfalls JavaScript. Alternativ lassen sich im Web Konzepte finden, per mod_rewrite und ein XHTML-attribut im HTML-Tag für FF2 andere Header und damit XHTML auszuliefern.

IE 6

Der leider immer noch von einigen Besuchern genutzte Internet Explorer 6 versucht sich unter HTML5 im Standard-Modus, was von einigen Webdesignern wohl eher begrüßt wird, aber auch zu unangenehmeren Fehlern und inkonsistenterem Verhalten führen kann als der Quirksmode.

JavaScript zu Aktivierung der neuen Elemente

var ce=new Array(
"header","nav","section","footer","article","aside","figure","legend");
var cen= ce.length;for (var i = 0; i <cen; i++)
{document.createElement(ce[i]);}

CSS Anpassung für HTML5

header, footer, nav, section, article {
 display:block;
}

Einfacher doctype bei HTML5

<!doctype html>

HTML5 ist mit JavaScript-Unterstützung für die neuen IEs mit den aktuellen Browsern auch mit neuem Sprachumfang nutzbar. audio, video oder canvas werden allerdings nicht von allen Browsern unterstützt, auch die neuen Formulare (input type) nicht, oder storage. Bei dem HTML5-Projekt Trauringkurse kommt nicht nur die einfache doctype-Deklaration zum Einsatz, sondern auch schon neue Tags wie section und article.

HTML5 in der Praxis

Für solch umfassenderen Einsatz von HTML5 auf breiter Ebene scheint es aber angesichts der Abhängigkeit der richtigen Darstellung von nachhelfendem JavaScript bei gebräuchlichen IEs noch etwas früh zu sein.

Neues DOM

Neu in HTML5 ist im erweiterten DOM die Methode getElementsByClassName, um Elemente auszuwählen. Per JavaScript ist die Methode für ältere Browser z.B. so darstellbar: 

if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cn) {
var rx = new RegExp("\\b" + cn + "\\b"), 
aTN = document.getElementsByTagName("*"), aCN = [], i = 0, a;
while (a = aTN[i++]) {
if (a.className && a.className.indexOf(cn) + 1) {
if(a.className===cn){ aCN[aCN.length] = a; continue;   }
rx.test(a.className) ? (aCN[aCN.length] = a) : 0;
}}
return aCN;
}}