Nouveautés HTML5

Comme vous le savez tous, HTML est passé à la version 5, nous allons 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 car un bon emploi de ce langage permet d’améliorer radicalement le référencement et l’ergonomie de votre site.

Balises de structure HTML5

<section> Permet de définir une section/partie de votre page dont le contenu porte sur un sujet unique.

<article> Définit une partie indépendante du document, un article ou commentaire.

<header> Sert à donner une introduction au bloc conteneur (page, section ou article).

<footer> Donne une conclusion au bloc conteneur (page, section ou article).

<nav> Bloc réservé à la navigation dans le site comme un menu principal.

<aside> Partie réservée aux informations mises à part car ayant une relation indirecte avec le sujet.

Balises d’éléments HTML5

<audio> et <video> Définit un flux en audio ou vidéo en streaming.

<track> Sous-titre du flux audio ou vidéo de la balise conteneur.

<figure> Bloc d’images, diagramme et du code.

<figcaption> Description de la figure conteneur.

<mark> Texte marqué car la réalité actuelle du contenu ne sera plus vrai plus tard.

<meter> Définit une référence minimum et maximum à une valeur.

<progress> Représente la progression d’une tâche.

<canvas> Bloc réservé à un élément graphique, qui s’anime grâce à un script, remplacera le Flash dans quelques années.

<time>Définit une date ou heure.

<outpout> Résultat d’un calcul.

<command>Définit un bouton.

<embed>Emplacement d’un plug in.

<keygen>Emplacement d’une clé sécurisée utilisée par la suite dans des formulaires.

<ruby>Définit un code écrit en Ruby.

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, 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: Conseil 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, url: 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 humaines.

Les microdata sont des 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 et les éléments enfants se rapporteront à ce contexte.

La valeur de itemtype va permettre d’expliquer le contexte de ce microdata, ce paragraphe va parler d’une personne, une entreprise, un media, une application, une license…

Les valeurs des attributs d’itemprop vont donner des détails sur le contenu du texte, 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êts, point de vue visuel, il reste le même pour l’utilisateur.

Pour preuve que Google à bien vu le microdata, regardons le ce qu’il comprend avec Rich Snippets Testing Tool, l’outil de visualisation des textes enrichis du weebmaster Tool:

Vous pouvez obyenir 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 remarquer le <input> range en action.

Vous remarquerez que mon site a subit 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 ?

Les balises de structure vues plus haut sont des indices très utiles pour les moteurs de recherche car elles leur permettent de distinguer sémantiquement tous les contenus d’un site.

Aspect sémantique du HTML5

Les moteurs de recherches vont se servir de ces balises pour voir:

– Les rapprochements hiérarchiques des <header>, “contenus”, <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.

Ainsi les moteurs de recherches feront la distinction entre un article associé a une page et un extrait d’un article d’une autre page, ainsi les MR verront un seul thème pour une seule page.

Les microdata aident Google à comprendre tous le sens des articles.

 

Récapitulatif des atouts en ergonomie

La balise <canvas> est une grande avancée car 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 constitue une grande avancée dans la simplification du code: en HTML4 nous devions recourir au JavaScript afin de modifier graphiquement une valeur d’un input, alors qu’avec ces nouveaux type d’input, la valeur est mise à jour sans script.

Grâce a l’attribut pattern, placeholder et required des inputs, le contrôle de la conformité des formulaires est fait sans appel au JavaScript côté client, mais 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: Android 4, Black Berry 10 et Opera Mobile 12 puis 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 car 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”></script><![endif]–>

Puis dans le CSS, rajoutez 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 9eme, permet de gérer les nouveau 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 veux 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.

En espérant que cet article vous a plu, je vous dis à bientôt.

Bon codage à tous.