Pour les plus pressés, voici le schéma de notre page produit en HTML5 :
Avant de commencer, on peut se demander pourquoi il est intéressant d’utiliser le HTML5.
Certains argumentent que le HTML5 fait gagner du temps et de la productivité car le site est mieux balisé.
Du côté du SEO, son effet n’est pas aussi impactant qu’on aurait pu le croire pour un langage sémantique.
Sur ce sujet, voici la réponse de Google, toujours aussi langue de bois (datant de 2010) :
Cela pourrait changer, à mesure qu’HTML 5 gagne en popularité et comme nous analysons les éléments de balisage spécifiques qui ajoutent de la valeur à notre système d’indexation, mais pour le moment rien ne présume d’un bénéfice à utiliser HTML 5 plutôt qu’une autre variante. (…)
En ce qui me concerne, je recommanderai d’utiliser HTML 5 dès lors que cela ajoute du sens, en revenant peut-être à du HTML 4 si vous pouvez détecter que le navigateur ne supporte pas les éléments HTML 5 que vous utilisez. Bien que cela ne constitue pas un avantage pour votre contenu dans nos résultats de recherche, cela ne devrait pas vous desservir non plus.Google Webmaster Central: Does semantic html5 matter to google yet
Quoi qu’il en soit un balisage plus propre et sémantique représente un réel plus pour les robots Google car leur travail d’indexation est logiquement facilité.
1.Les bases
Commençons par le basique : une page HTML5 minimale.
[code lang= »html »]
<!DOCTYPE html>
<html>
<head>
<meta charset= »utf-8″ />
<link rel= »stylesheet » href= »/css/style.css » />
<script src= »/js/jquery.min.js »></script>
<title>Document Title</title>
</head>
<body>
<!– Contenu –>
</body>
</html>
[/code]
Le doctype indique au navigateur quelle version d’html est utilisée. Comme vous pouvez le constater, le doctype est dans sa forme la plus simplifiée.
Juste après le doctype, on définit l’encodage toujours très simplement (<meta charset= »utf-8″>). HTML5 est très laxiste, on pourrait même se passer des marqueurs,et avoir un document HTML5 valide.
Passons maintenant à la partie la plus intéressante de cet article : comment intégrer les nouveaux marqueurs HTML5 dans la page produit d’un site e-commerce.
Header, Navigation, Sidebar et footer
Comme c’était le cas plus haut, ces éléments ne sont pas spécifiques aux sites e-commerce.
HTML5 introduit ces éléments structurels qui donnent un sens sémantique à certaines parties de votre page
Plus besoin d’utiliser <div id= »header »>, <div class= »navigation »> ou <div id= »sidebar »>.
Ci-dessous, un exemple de code simple avec ces éléments :
[code lang= »html »]
<header>
<h1>Company Name</h1>
<nav id= »”main-nav” »>
<ul>
<li><a href= »# »>Category 1</a></li>
<li><a href= »”#” »>Category 2</a></li>
<li><a href= »”#” »>Category 3</a></li>
</ul>
</nav></header>
<aside> <nav id= »”sidebar-nav” »>
<ul>
<li><a href= »”#” »>Catégorie 1</a></li>
<li><a href= »”#” »>Catégorie 2</a></li>
<li><a href= »”#” »>Catégorie 3</a></li>
</ul>
</nav><section class= »widget »><!– Sidebar widget –></section></aside></pre>
<div id= »main »></div>
<footer></footer>[/code]
<header>
L’élément header représente l’en-tête d’une section (un élément h1-h6 ou un élément h-group) ; il peut également contenir d’autres contenus comme le sommaire d’un document, des éléments de navigations un formulaire de recherche ou encore un logo.
On peut avoir plusieurs éléments <header> dans une même page :
- Le header principal du site avec le logo, le menu, le panier etc…
- Un header pour le titre d’un produit ou d’un article
<nav>
Comme vous pouvez vous en douter, <nav> correspond à la navigation du site.
La définition du W3C :
L’élément nav représente une section du document contenant un ensemble de liens vers d’autres page du site (ex : le menu du site) ou vers une section d’une même page (ex : le sommaire d’un article).
Comme pour l’élément <header>, une même page peut avoir plusieurs <nav>.
Attention cependant : un ensemble de liens n’est pas obligatoirement contenu dans l’élément <nav> (liste des derniers articles, liens du footer) et les liens ne doivent pas pointer vers des sites externes.
<aside>
Un autre élément assez explicite est <aside> (« à côté » en anglais).
Définition du w3C :
L’élément <aside> contient des informations indirectement liées au contenu qui l’entoure.
Dans un site e-commerce, la colonne contenant les derniers produits, les publicités etc… peut être contenu dans la balise <aside>
<footer>
L’élément <footer> correspond au pied de votre page ou d’éléments comme <section>,<article>, <nav>…
Comme pour l’élément <header>, une page peut contenir plusieurs éléments <footer>.
2.HTML5 et la page produit
Passons maintenant à notre page produit et voyons comment intégrer les nouveaux éléments HTML5.
La section Produit
A la place de l’habituel <div id= « product »> utilisé pour contenir la section produit de notre page, utlisons l’élément <section>.
La balise <section> définit comme son l’indique une section dans un document.
Elle permet de découper une page ou un article en plusieurs sujets.
De préférence, une section doit comporter une en-tête.
Utilisez les div si le but est de mettre en forme une partie de votre page.
N’oublions pas d’ajouter un fil d’arianne pour aider nos visiteurs à ne pas se perdre, en utlisant la balise <nav>
[code lang= »html »]
<section id= »product »>
<nav class= »breadcrumb »>
<a href= »# »>Accueil</a> > <a href= »# »>Categorie</a> > <span>Nom du produit</span>
</nav>
</section>
[/code]
Le produit
Dans la section générale du produit, nous pouvons utiliser le nouvel élément <article> .
La balise <article> permet de représenter un élément qui se suffit à lui même.
Pour savoir si cette balise est bien utilisée, demandez-vous si le contenu de l’article peut être afficher dans un flux RSS.
Le titre du produit est contenu dans une balise <h1> (c’est bon pour le SEO).
Si vous souhaitez ajouter un sous titre <h2> contenant la marque du produit par exemple, vous pouvez regrouper les balises <h1> et <h2> dans le nouvel élément <hgroup>.
Et si enfin l’entête du produit contient d’autres informations (comme le prix ou une information promotionnelle), regroupez le tout (<hgroup> et informations supplémentaires) dans une balise <header>
Voici le code pour mieux comprendre l’utilisation ces balises :
[code lang= »html »]
<article>
<header>
<hgroup>
<h1>Nom du produit</h1>
<h2>Marque du produit</h2>
</hgroup>
<div class= »price »>300€</div>
<div class= »promo »>-10%</div>
</header>
</article>
[/code]
Images du produit
Avec HTML5, nous avons la possibilité d’utiliser le nouvel élément <figure> pour regrouper l’image principale du produit et <figcaption> la légende de l’image.
[code lang= »html »]
<section id= »image-gallery »>
<figure>
<img src= »product.jpg » alt= »Product » />
<figcaption>Légende de l’image</figcaption>
</figure>
<div id= »thumbnails »>
<img src= »thumb1.jpg » alt= »Product image 1″ />
<img src= »thumb2.jpg » alt= »Product image 2″ />
</div>
</section>
[/code]
Description courte, options et bouton d’ajout au panier
Une partie très importante de la page produit est la section informations produit avec la description courte du produit, le bloc panier et les éventuelles options du produits (ex : taille, couleur…)
Une simple balise <section> est suffisante.
Rappelez-vous d’utiliser les <div> dans un but de mise en forme.
[code lang= »html »]
<section id= »info »>
<p>Description courte</p>
<div class= »social »>
<!– Boutons de partage–>
</div>
</section>
<section id= »options »>
<select>
<option>S</option>
<option>XL</option>
</select>
<a href= »# » id= »addtocart »>Ajouter au panier</a>
</section>
[/code]
Autres éléments d’une page produit : description détaillée, caractéristiques
Une page produit comporte souvent une description plus détaillée, les caractéristiques du produit (taille, poids…), des commentaires ou encore un bloc avec les produits complémentaires et tout autre élément que le visiteur trouvera utile sur le fiche produit.
Description longue et Caractéristiques
La description longue et les caractéristiques sont des sections de notre article. Nous utiliserons donc la balise <section> pour chacun de ces éléments (l<détails> pourrait être utilisé également mais il n’est supporté que par Chrome).
[code lang= »html »]
<section id= »details »>
<h2>Plus d’info</h2>
<p>Detailed information about the product here</p>
</section>
<section id= »characteristics »>
<h2>Caractéristiques</h2>
<ul>
<li>Hauteur</li>
<li>Poids</li>
</ul>
</section>
[/code]
Les produits complémentaires
La section vente transversale (ou section produits complémentaires) est l’emplacement où vous pouvez faire apparaitre des produits que d’autres clients ont achetés.
Les produis complémentaires sont logiquement dans une balise <aside> puisque c’est un contenu indirectement lié à notre produit (=<article>) mais chaque produit dans ce bloc est un article au sens HTML5.
[code lang= »html »]
<aside id= »related »>
<h2>Produits complémentaires</h2>
<article class= »rel-product »>
<h1>Nom du produit</h1>
<img src= »thumb3.jpg » alt= »Product Name » />
<span class= »price »>23 Euros</span>
</article>
<article class= »rel-product »>
<h1>Nom du produit</h1>
<img src= »thumb3.jpg » alt= »Product Name » />
<span class= »price »>19 Euros</span>
</article>
</aside>
[/code]
Les commentaires
Les commentaires sont très utilies pour un site e-commerce (pour la confiance, le SEO…).
Encore une fois, nous utiliserons <section> pour regrouper tous nos commentaires et <article> pour chaque commentaire publié.
Le nouvel élément <time> contient une date et /ou une heure. Nous utiliserons l’attribut datetime de cette balise pour spécifier la date et l’heure (dans un format standard) du commentaire.
[code lang= »html »]
<section id= »comments »>
<article class= »comment »>
<h2>Pseudo</h2>
<time datetime= »2012-4-27T14:42+01:00″>Publié le 27 avril 14:42</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<article class= »comment »>
<h2>Pseudo</h2>
<time datetime= »2012-4-27T15:42+01:00″>Publié le 27 avril 15:42</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p> </article>
</section>
</article>
</section>
[/code]
3.Compatibilité des navigateurs
Ces éléments sémantiques sont très bien supportés par les navigateurs modernes.
Pour la majorité des anciens navigateurs, une simple déclaration display:block dans votre fichier css assure une bonne lecture de ces nouveaux éléments.
Malheureusement, les versions d’Internet Explorer antérieures à IE9 rencontrent un problème de compréhension de ces éléments, même après avoir réalisé la déclaration css expliquée ci-dessus. HTML5shiv est le seul script dont vous aurez besoin pour faire fonctionner correctement IE. Copiez et collez le code ci-dessous à l’intérieur de votre <head> tag et cela fonctionnera.
[code lang= »html »]
<!–[if lt IE 9]>
<script src= »http://html5shiv.googlecode.com/svn/trunk/html5.js »></script>
<![endif]–>
[/code]
4.Le code complet de cette page produit en HTML5
[code lang= »html » collapse= »true »]
<!DOCTYPE html>
<html>
<head>
<meta charset= »utf-8″ />
<link rel= »stylesheet » href= »/css/style.css » />
<script src= »/js/jquery.min.js »></script>
<!–[if lt IE 9]>
<script src= »http://html5shiv.googlecode.com/svn/trunk/html5.js »></script>
<![endif]–>
<title>Document Title</title>
</head>
<body>
<header>
<hgroup>
<h1>Nom de la boutique</h1>
<h2>Baseline</h2>
</hgroup>
<div class= »login »>
<ul>
<li><a href= »# »>Mon compte</a></li>
<li><a href= »# »>Se connecter</a></li>
</ul>
</div>
<div class= »cart »>
<p>Votre panier est vide</p>
</div>
</header>
<nav id= »main-nav »>
<ul>
<li><a href= »# »>Categorie 1</a></li>
<li><a href= »# »>Categorie 2</a></li>
<li><a href= »# »>Categorie 3</a></li>
</ul>
</nav>
<aside>
<nav id= »sidebar-nav »>
<ul>
<li><a href= »# »>Lien 1</a></li>
<li><a href= »# »>Lien 2</a></li>
<li><a href= »# »>Lien 3</a></li>
</ul>
</nav>
<section class= »widget »>
<!– Publicité –>
</section>
</aside>
<section id= »product »>
<nav class= »breadcrumb »>
<a href= »# »>Accueil</a> > <a href= »# »>Categorie</a> > <span>Nom du produit</span>
</nav>
<article>
<header>
<hgroup>
<h1>Nom du produit</h1>
<h2>Marque du produit</h2>
</hgroup>
<div class= »price »>300€</div>
<div class= »promo »>-10%</div>
</header>
<section id= »image-gallery »>
<figure>
<img src= »product.jpg » alt= »Product » />
<figcaption>Légende de l’image</figcaption>
</figure>
<div id= »thumbnails »>
<img src= »thumb1.jpg » alt= »Product image 1″ />
<img src= »thumb2.jpg » alt= »Product image 2″ />
</div>
</section>
<section id= »info »>
<p>Description courte</p>
<div class= »social »>
<!– Boutons de partage–>
</div>
</section>
<section id= »options »>
<select>
<option>S</option>
<option>XL</option>
</select>
<a href= »# » id= »addtocart »>Ajouter au panier</a>
</section>
<section id= »details »>
<h2>Plus d’info</h2>
<p>Detailed information about the product here</p>
</section>
<section id= »characteristics »>
<h2>Caractéristiques</h2>
<ul>
<li>Hauteur</li>
<li>Poids</li>
</ul>
</section>
<aside id= »related »>
<h2>Produits complémentaires</h2>
<article class= »rel-product »>
<h1>Nom du produit</h1>
<img src= »thumb3.jpg » alt= »Product Name » />
<span class= »price »>23 Euros</span>
</article>
<article class= »rel-product »>
<h1>Nom du produit</h1>
<img src= »thumb3.jpg » alt= »Product Name » />
<span class= »price »>19 Euros</span>
</article>
</aside>
<section id= »comments »>
<article class= »comment »>
<h2>Pseudo</h2>
<time datetime= »2012-4-27T14:42+01:00″>Publié le 27 avril 14:42</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</article>
<article class= »comment »>
<h2>Pseudo</h2>
<time datetime= »2012-4-27T15:42+01:00″>Publié le 27 avril 15:42</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p> </article>
</section>
</article>
</section>
<footer>
Copyright 2012
</footer>
</body>
</html>
[/code]
N’hésitez pas à poster vos commentaires et vos remarques. Vous avez peut être une autre interprétation sur l’utilisation de certaines balises.
Nous avons abordé ici uniquement le côté sémantique d’HTML5, d’autres fonctionnalités peuvent être très utiles pour un site e-commerce : le stockage des données, le mode déconnecté…
Prochaine étape : comment rendre votre thème Prestashop HTML5 friendly !
