Comme vous le savez tous, HTML est passé à la version 5. Nous allons donc voir les améliorations apportées au niveau du référencement et de l'ergonomie.
Le langage HTML étant celui sur lequel se base les navigateurs et moteurs de recherche pour donner un sens au texte compris entre ses balises, il convient de lui prêter une attention particulière. En effet, le bon emploi de ce langage permet d'améliorer radicalement le référencement et l'ergonomie de votre site.
Balises de structure HTML5

Balises d'éléments HTML5
Attributs HTML5
Le HTML5 possède une soixantaine de nouveaux attributs répondant aux besoins des développeurs. Je ne vais pas tous les citer. Je vous donne seulement quelques perles bien pratiques :
Vous n'avez rien vu de spécial ? Maintenant, regardez le code source de ce paragraphe:
Vous l'aurez remarqué, le code est lourd. Mais Google comprendra votre article et lui donnera plus d'intérêt. Du point de vue visuel, il reste le même pour l'utilisateur.
Afin de prouver que Google a bien vu le microdata, regardons ce qu'il comprend avec Rich Snippets Testing Tool, l'outil de visualisation des textes enrichis du weebmaster Tool:
Vous pouvez obtenir les nombreuses valeurs des microdata sur le site de schema.org afin de mieux les appréhender.
Petite démo en HTML5
Bravo ! Votre lecture vous a mené jusqu'ici, vous avez mérité une petite démo !
Cette application génère une image à la volée et fonctionne bien sous Chrome dernière version. Vous pourrez observer le range en action.
Vous remarquerez que mon site a subi des modifications au niveau du code. En effet, j'ai implémenté les balises de structures HTML5.
Je déplore que tous les navigateurs ne supportent pas encore le HTML5. Mais c'est un point que nous aborderons un peu plus loin dans cet article.
Récapitulatif des atouts en référencement
En quoi le HTML5 peut-il permettre d'améliorer le référencement d'un site ?
Tout simplement parce que les balises de structure vues plus haut sont des indices très utiles pour les moteurs de recherche. Elles leur permettent de distinguer sémantiquement tous les contenus d'un site.
Aspect sémantique du HTML5
Les moteurs de recherche vont en effet se servir de ces balises pour voir :
- Les rapprochements hiérarchiques des
, « contenus » et - Le contenu des
- Le contenu des
Les moteurs de recherches feront donc la distinction entre un article associé à une page et un extrait d'article d'une autre page. Ainsi, ils ne verront qu'un seul thème pour une seule page.
Par conséquent, les microdata aident Google à comprendre tout le sens des articles.
Récapitulatif des atouts en ergonomie
La balise
L'attribut type des inputs simplifie beaucoup le code. En effet, en HTML4, nous devions recourir au JavaScript afin de modifier graphiquement une valeur d'un input. Alors qu'avec ces nouveaux types d'input, la valeur est mise à jour sans script.
Grâce aux attributs pattern, placeholder et required des inputs, le contrôle de la conformité des formulaires est fait sans appel au JavaScript côté client. Cependant, cela n'empêche pas de devoir le faire côté serveur.
Compatibilité avec les différents navigateurs
Cette version de l'HTML étant récente, les nouvelles balises ne sont pas compatibles avec tous les navigateurs et sur toutes les plateformes.
Voici un rapport de compatibilité détaillé des navigateurs pour postes fixes.
Concernant les téléphones et tablettes tactiles, sont compatibles Android 4, Black Berry 10 et Opera Mobile 12 ainsi que WebOS 3, Firefox mobile 12 et RIM Tablet OS2.0.
Incompatibilité des versions inférieures d'Internet Explorer 9
Le cas d'Internet Explorer, version inférieure au 9, est particulier. Il ne reconnaît tout simplement aucune des nouvelles balises et attributs et n'exécutera ni les balises ni les attributs. Il les affichera en tant que texte :/
c'est un peu embêtant, mais il existe une méthode en JavaScript pour contourner ce problème. Il s'agit d'inclure cette ligne dans le
de vos pages :[if lt IE 9]>