HTML5 Elemente nicht-HTML5-fähigen Browsern “bekannt machen”

Der Code ist zwar JavaScript und CSS, da es sich hier aber um das Erstellen von HTML5 Elementen für ältere Browser dreht, habe ich dieses Code-Schnipsel unter dieser Rubrik abgelegt. Um was geht es hier jetzt genau und wie wird das Problem gelöst?

Auf dieser Seite zeige ich, wie man es schafft, dass einige der neuen HTML5 Elemente auch in nicht-HTML5-fähigen Browsern korrekt angezeigt werden.

In HTML5 gibt es neue Elemente, die die Lesbarkeit des Quellcodes für Entwickler und für Suchmaschinen verbessern. Hierbei hendelt es sich um die neuen Tags aside, header, hgroup, footer, section, article, nav, figure, figcaption, welche einfache div-Tags repräsentieren. Ältere Browser verstehen diese Tags nicht und ignorieren sie. Um das zu verhindern, erstellen wir die entsprechenden neuen HTML Elemente per JavaScript.

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// -------------- HTML5 Elemente für ältere Browser v.1.0 ------------
// -------------------------------------------------------------------

// Fuer alle Browser, die keine HTML5 Tags kennen
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('figcaption');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');

Anschließend setzen wir ihre "display"-Eigenschaft mit CSS wie bei divs auf "block". Voilà!

header, hgroup, nav, article, figure, figcaption, section, aside, footer {
	display: block;
}