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 :
<form> et <input> autocomplete : active l’auto-complétion.
<button> et <input> autofocus : focus sur cet élément au chargement de la page.
<button> et <input> form : définit à quel formulaire il appartient.
<iframe> sandbox : impose des restrictions sur le contenu de l’iframe.
<input> pattern : impose un motif pattern aux champs.
<input> placeholder : conseille l’utilisateur pour remplir le champ.
<input> required : indique à l’utilisateur la nécessité de remplir ce champ.
<form> oninput : permet de créer une fonction dont output sera le résultat.
<input> output : résultat de la fonction en oninput.
<input> type= datetime, datetime-local, date, month, week, time : formulaires chronologiques.
<input> type=number, email, ur : formulaires du type associé.
<input> type=range : formulaire numérique sous la forme d’un curseur.
<input> type=color : formulaire de choix d’une couleur.
Les microdata HTML5
L’aspect sémantique du langage est fort car on peut expliquer aux moteurs de recherche la signification du texte de nos pages. Les microdata permettent de faire correspondre les mots à leur signification humaine.
Ces microdata sont de nouveaux attributs nommés : itemscope, itemtype, itemprop.
Placé à l’intérieur d’une balise HTML, itemscope permet d’annoncer que cet élément HTML est un contexte de microdata. Les éléments enfants se rapporteront à ce contexte.
Itemtype va permettre, quant à lui, d’expliquer le contexte de ce microdata : ce paragraphe va parler d’une personne, une entreprise, un media, une application, une licence, etc.
Enfin, les valeurs des attributs d’itemprop vont donner des détails sur le contenu du texte. Par exemple :
Vous n’avez rien vu de spécial ? Maintenant, regardez le code source de ce paragraphe:<div itemscope itemtype="http://data-vocabulary.org/Person">
Je m'appelle <span itemprop="name">Mathieu Ribot</span>, je suis <span itemprop="title">développeur freelance</span> et créateur de l'<span itemprop="affiliation">Agence MontrezVous et mon site <a href="http://www.montrezvous.net" itemprop="url">www.montrezvous.net</a> permet aux entreprises de me <a href="mailto:contact@montrezvous.net" itemprop="email">contacter</a> afin d'améliorer leur visibilité sur internet.
</div>
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 <input> 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 <header>, « contenus » et <footer> à leur conteneur.
- Le contenu des <aside>, à ne pas prendre autant en considération que les autres contenus.
- Le contenu des <nav>, à considérer uniquement comme des menus.
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 <canvas> est une grande avancée. Elle va tendre à remplacer le Flash, technologie souvent associée à de nombreux problèmes de référencement et par ailleurs abandonnée par de nombreuses plateformes tablettes et mobiles.
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 <head> de vos pages :
[if lt IE 9]><script src= »http://html5shim.googlecode.com/svn/trunk/html5.js »></
Puis, dans le CSS, ajoutez ceci :
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
Pour explication, le script externe .js, inclus dans la page si le navigateur est Internet Explorer et si sa version est inférieure à la 9ème, permet de gérer les nouveaux attributs du HTML5.
La seconde ligne permet d’afficher, en tant que bloc, les balises de structure.
Quand commencer à coder du HTML5 en production ?
D’après le site officiel du W3C, le HTML5 sera recommandé comme version stable en 2014. Cela veut dire que le langage n’évoluera plus après cette date.
Selon les plateformes et navigateurs de vos visiteurs, il est bon de mettre le maximum de balises compatibles avec tous les navigateurs de vos visiteurs dès maintenant.
Récapitulatif
Afin de conclure sans rien oublier, voici une antisèche des nouvelles balises HTML5, ainsi qu’un fascicule en anglais de promotion du langage.
Je suis novices dans le domaine du codage HTML. J’avais espéré en savoir plus en lisant cet article et c’est le cas. Je ne vais pas dire que je suis passée maître dans ce domaine mais qui sais…le jour viendra ;-)
Merci
Intéressant cet article, flash au placard et place au canvas !