HTML5, bien qu'apportant son lot de nouveautés et d'éléments, se base sur son prédécesseur HTML 4.01 dont il ne change pas radicalement au niveau de la logique et de la structure.
L'article d'introduction à HTML5 de julixyde survole quelques nouveaux éléments que j'ai employés sur mon site personnel.
Doctype
Le Doctype HTML5 s'écrit tout simplement de la sorte :
<!DOCTYPE html>
Voilà, votre document est identifié comme étant en HTML5, c'est compatible sur tous les navigateurs et il suffit à présent de nous servir des éléments inédits de cette nouvelle version.
Les nouveaux éléments
Parmi les nouveaux éléments apportés par HTML5, j'ai identifié la liste suivante pour la structure de mon site :
- <section> : section de contenu
- <article> : article de composition indépendante
- <header> : en-tête de page ou de section
- <nav> : liens de navigation
- <figure> : regroupement des images et de leur description
- <footer> pied de page ou de section
La plupart des navigateurs ne reconnaissent pas ces éléments (il seront identifiés comme étant de type "en-ligne" par défaut, ce que l'on peut comparer à un <span>), mais rien ne nous empêche de les utiliser en connaissance de cause en leur appliquant un display approprié (display:block ou autre).
Le hic : Internet Explorer 8 et versions inférieures nécessitent un code JavaScript afin de créer au préalable ces éléments dans leur DOM sous peine de ne rien afficher du tout.
Concrètement, il suffira d'appeler un script externe dès le début de la page de manière spécifique à IE :
<!--[if IE]><script src="scripts/html5-ie.js"></script><![endif]-->
Le code JavaScript du fichier html5-ie.js étant celui-ci :
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
document.createElement("figcaption");
document.createElement("hgroup");
document.createElement("time");
Ces petites manipulations vous permettent de disposer sans grosse difficultés des principales balises de structures HTML5 dans des pages tout en étant correctement interprétées par l'ensemble des navigateurs courants, y compris anciens. Attention cependant car celles-ci n'auront toutefois aucune valeur sémantique avant que les navigateurs ne les supportent officiellement.
L'alternative "HTML5Shim"
Le projet html5shim, hébergé chez Google, offre la possibilité aux anciennes versions d'Internet Explorer de reconnaître et d'interpréter les éléments HTML5, à l'aide d'un simple code HTML/JS à placer au sein de l'entête du document :
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
L'attribut "role"
L'attribut "role" a été introduit dans (feu) XHTML2 afin d'ajouter du contexte aux éléments (de la sémantique).
Il est ainsi possible pour les agents utilisateurs (navigateurs, moteurs de recherche) et pour les applications accessibles riches (ARIA) d'exploiter ces informations complémentaires.
HTML5 définit une liste de valeurs pour l'attribut "role". Les principales étant :
- main : définit le contenu principal d'un document
- secondary : représente une section unique et secondaire du document, tel que l'heure, la météo ou autre module de ce genre
- navigation : définit le menu de navigation du document. Typique de liens vers d'autres pages du site ou vers d'autres endroits de la page
- banner : située en haut de page, elle contient habituellement le logo de la société, les éléments publicitaires,...
- contentinfo : informations à propos du contenu de la page : notes, copyrights, mentions légales, ...
- definition : représente la définition d'un élément
- note : correspond à une note entre parenthèse ou de bas de page
- seealso : indique que l'élément contient des données contextuelles au contenu principal de la page
- search : la section de recherche d'une page. Typiquement un formulaire de recherche
(Source W3C traduit par ma pomme)
Notez enfin que le Validateur HTML du W3C permet d'ores-et-déjà de valider du code HTML5 sans réglages particuliers à apporter.
La charpente HTML étant formée, passons à des choses plus excitantes et périlleuses encore : l'application de mises en forme modernes à notre document à l'aide des récentes innovations des feuilles de style CSS3.