Un <time> pour chaque chose...

Et chaque chose en son <time>

Nouvel élément HTML5, <time> répond au besoin de baliser sémantiquement une date (du calendrier grégorien) ou une heure. Son intérêt réside également au niveau de l'indexation automatisée, pour les moteurs de recherche ou lors d'import de données dans un agenda si un quelconque algorithme (une extension navigateur, un script) est appelé.

On le retrouvera pour indiquer l'heure d'un évènement, la date de publication d'un article ou d'une page, avec une précision du fuseau horaire ou non. Son utilisation est multiple : l'élément <time> peut se cacher derrière toute date ou heure mentionnée sur le document HTML.

Un navigateur n'implémentant pas cet élément affichera tout de même son contenu de façon naturelle.

Exemple d'usage classique

<p>On vous attend à <time>10:30</time> pour la Kiwi Party !<p>

Attributs

Cet élément présente deux attributs spécifiques : datetime et pubdate.

datetime

Cet attribut permet de standardiser date et/ou l'heure au format international ISO 8601, afin que l'indexation par les robots soit facilitée. La valeur n'est plus dépendante du contenu de l'élément, mais du contenu de son attribut datetime. Ainsi la formulation de la date dans <time> devient totalement libre. Si celui-ci n'est pas présent, alors c'est le contenu de <time> qui comportera la valeur et devra alors respecter le format standardisé décrit ci-après.

Format

Dans les exemples proposés ci-après, chaque chiffre d'une année sera représenté par 'Y', pour le mois ce sera 'M', 'D' pour les jours, 'h' pour l'heure, 'm' pour les minutes.

Ainsi nous obtenons en masque pour l'attribut datetime :

• Année à 4 chiffres :
  YYYY (ex. : 2012)

  <p>Articles de l'année <time datetime="2012">2012</time></p>

• Année et mois :
  YYYY-MM (ex. : 2012-02)

  <p>Archives du mois de <time datetime="2012-02">février 2012</time></p>

• Date complète :
  YYYY-MM-DD (ex. : 2012-02-10)

  

  <p>Cette recette a été publiée le <time datetime="2012-02-11">11 février 2012</time> par Okko.</p>

• Date complète avec les heures et les minutes : la lettre 'T' indique le début de l'heure mais n'est plus obligatoire et peut-être remplacée par un espace ainsi les deux écritures suivantes sont tolérées :
  YYYY-MM-DDThh:mm ou YYYY-MM-DD hh:mm (ex. : 2012-02-10T13:37 ou 2012-02-10 13:37)

  

  <p>Borax a dit le <time datetime="2012-02-11T16:24:02">11 février 2012 à 16:24:02</time> :</p>
  <p>Borax a dit le <time datetime="2012-02-11 16:24:02">11 février 2012 à 16:24:02</time> :</p>

• Date complète avec fuseau horaire, l'heure est localisée avec la norme UTC correspondant au Temps Universel Coordonné ou au fuseau horaire de référence, ici symbolisé par la lettre 'Z'. On amputera ou ajoutera le nombre d'heures et de minutes correspondant à un fuseau horaire donné :
  hh:mmZ indiquera l'heure de référence UTC (ex. : 13:37Z), tandis que hh:mm+X ou hh:mm-X indiquera un décalage horaire par rapport au fuseau horaire de référence (ex. : 13:37+01 ou 13:37-02:30)

  

  <p>Okko a dit le <time datetime="2012-02-11 23:26:05+07:00">11 février 2012 à 23:26:05 (heure locale) depuis la Thaïlande</time></p>
  

Pour aller plus loin dans le format des dates et des heures consultez la page du W3C : Date and Time Formats.

Démonstration complète

Les durées

La démonstration précédente concerne une recette de cuisine. Celle-ci comporte une durée de cuisson et de préparation. Il est possible d'utiliser l'élément <time> pour indiquer une période ou une durée.

Dans ce cadre, il faut utiliser la syntaxe ISO 8601, avec "P" pour introduire la période, "W" pour les semaines, “D” pour les jours, “H” pour les heures, “M” pour les minutes and “S” pour les secondes.

<ul>
   <li>Temps de préparation : <time datetime="P30M">30 minutes</time></li>
   <li>Temps de cuisson : <time datetime="P10M">10 minutes</time></li>
</ul>

Alternativement, il ne faut pas oublier que les microformats avec Microdata peuvent être avantageusement exploités pour baliser de façon plus précise ce type de contenu, par exemple avec le format Recipe. La même syntaxe de durée est alors adoptée.

<ul itemscope itemtype="http://schema.org/Recipe">
    <li>Temps de préparation : <span itemprop="prepTime" content="PT30M">30 minutes</span></li>
    <li>Temps de cuisson : <span itemprop="cookTime" content="PT10M">10 minutes</span></li>
</ul>

Compatibilité navigateur de l'élément <time>

Navigateurs	Versions
	Internet Explorer 9.0+
	Firefox 3.0+
	Chrome 4.0+
	Safari 3.1+ iOS Safari 3.2+
	Opera 9.0+ Opera Mini 5.0 + et Mobile 10.0
	Android Browser 4.0+

Propriétés de l'élément <time>

Ressources

• http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element
• http://wiki.whatwg.org/wiki/Time_element#duration