Article : Un 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 gé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 : datetime et pubdate.

Attribut	Valeurs	Rôle
`datetime`	date et/ou heure	Associe une date et/ou une heure dans un format standardisé
`pubdate`	`pubdate` ou "" ou (vide)	Indique la date de publication de son plus proche ancêtre `<article>` s'il est présent ou de l'intégralité du document

datetime

Cet attribut permet de standardiser le format de la date et/ou de l'heure, 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 standardisé

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 échelle de temps internationale, 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 ('X') d'heure 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.

pubdate

Il permet d'indiquer que la valeur de <time> correspond à la date de publication de son ancêtre <article> le plus proche s'il est présent ou du document dans sa globalité. Si cet attribut est présent, il ne doit y avoir qu'un seul élément <time> contenant l'attribut pubdate pour chaque <article>, idem pour le document entier s'il ne contient pas d'ancêtre <article> pour l'élément <time>.

<p>Publié le <time datetime="2012-02-10" pubdate>2 février 2012</time>.</p>

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

Propriété	Détails
Modèles de contenu autorisés	Contenu de phrasé
Parents autorisés	Tout élément pouvant contenir des éléments de phrasé, sauf `<time>`
Omission de balise	Les balises ouvrantes et fermantes sont obligatoires