Pour les plus pressés, voici le schéma de notre page produit en HTML5 :

HTML5 Product Page
Télécharger le schéma

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.

  
<!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>
  

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 (). 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.

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

,
ou
.

Ci-dessous, un exemple de code simple avec ces éléments :

  
<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>

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

 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

Comme vous pouvez vous en douter,