Cet article est le premier d’une série visant à vous présenter le plein potentiel de la norme HTML5. Il ne s’agira pas ici de discuter de la compatibilité cross-browser de HTML5 mais de vous proposer des informations, solutions et techniques que vous pourrez employer dès à présent.
HTML5 en un éclair
Produire un entête de document compatible HTML5 est plus que simple, il suffit de simplement modifier son DOCTYPE en :
<!DOCTYPE html>
Et… c’est tout ! Rien de plus n’est requis.
Google emploie déjà cet entête, consultez le code source de leur page d’accueil, vous constaterez alors :
<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="fr"><head>
De façon ironique, les SERP de Google ne sont pas valides HTML5 de par l’utilisation de balises <font> et pour cause de diverses erreurs. Rien de grave bien entendu, l’essentiel étant de pouvoir bénéficier des règles de diffusions HTML5 impliquées par un DOCTYPE compatible.
HTML5 minimaliste
Si vous êtes amateur de structures de documents simplifiés et sans fioritures, un entête de document HTML5 valide pourra être rédigé de la forme :
<!DOCTYPE html><title>Small HTML 5</title><p>Hello world</p>
HTML5 complet
Un entête plus complet devra préciser le jeu de caractères. Sans ce dernier, divers caractères spéciaux pourront ne pas être rendus correctement.
Nous faisons de plus un appel vers HTML 5 shiv afin de pouvoir rendre compatible notre document avec IE 6-9. Vous devrez bien entendu inclure ce script dans la balise <head> de votre document.
Voici donc notre entête valide complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/><title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, details, figcaption, figure, footer,header,
hgroup, menu, nav, section { display: block;}
</style>
</head>
<body><p>Hello World</p>
</body>
</html>