HTML5 brachte viele neue Funktionen. Darunter neue semantische Tags, wie main, section, article oder auch header und footer.
Leider sind viele Webentwickler unsicher im Einsatz mit den neuen Funktionen und Tags oder nutzen diese aus diversen Gründen nach wie vor nicht, obwohl HTML5 nun bereits eine Weile etabliert ist. Ich schließe mich gern in diesen Kreis mit ein. Das liegt unter anderem daran, dass im Netz viele unterschiedliche und zum Teil sogar widersprüchliche Codebeispiele kursieren. Aber auch natürlich an vielen Nutzern, die nach wie vor mit älteren Browsern, wie z.B. dem IE 7 oder IE 8 im Internet surfen.
Diese Browser können mit den Tags einfach nichts anfangen, ignorieren sie oder stellen Dinge fehlerhaft dar.
Im Fall der semantischen Tags gibt es ein simples Fallback.
Folgende Browserweiche erweitert das Repetoire des IE um die neuen semantischen Tags.
<!--[if lt IE 9]>
<script>
document.createElement('section');
document.createElement('nav');
document.createElement('article');
document.createElement('main');
document.createElement('aside');
document.createElement('header');
document.createElement('footer');
</script>
<![endif]-->Die neu angelegten Tags müssen nun noch als block-Element definiert werden. Erweitert dazu das CSS der Website um folgende Zeilen. Das wars auch schon.
nav, article, section, aside, main header, footer, { display: block; }