HTML

Un <time> pour chaque chose...

Article par (Graphiste webdesigneuse, Strasbourg)
Créé le , mis à jour le (40217 lectures)
Tags : html5, time, datetime, pubdate, durée

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.

Attribut Valeurs Rôle
datetime date et/ou heure ISO 8601 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 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.

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é s'il n'y a pas d'<article>. 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 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 Internet Explorer 9.0+
Firefox Firefox 3.0+
Chrome Chrome 4.0+
Safari Safari 3.1+
iOS Safari 3.2+
Opera Opera 9.0+
Opera Mini 5.0 + et Mobile 10.0
Android Browser 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

Ressources

Commentaires

Guirec a dit le

Pour ceux qui utilisent Wordpress, vous pouvez directement demander un affichage de la date de de l'heure au format W3C comme ceci:

<time datetime="<?php the_time(DATE_W3C); ?>" pubdate><?php the_time('l j F Y') ?></time>

audrasjb a dit le

Merci beaucoup Guirec, je connaissais pas du tout le paramètre DATE_W3C :-)

audrasjb a dit le

De toutes façon, ce sera pas le premier nom de paramètre ou de fonction douteux sur WordPress, jb_gfx ;)

Skoua a dit le

Pour leur défense, DATE_W3C est plus facile à retenir. :p

jojaba a dit le

Ce serait bien si on pouvait savoir si cet élément apporte une réelle plus-value par rapport aux microformats, existant depuis bien plus longtemps et proposant exactement les mêmes fonctionnalités...

Olivier C a dit le

@Guirec : merci pour la fonction sur WP, quand on peu intégrer ce genre de choses de manière dynamique ça change tout.

On en parle aussi sur un autre article Alsa : "Sémantique HTML5 et ARIA pour Wordpress"

iManu a dit le

Pour la petite histoire, la balise time avait été retirée des spécifications HTML5 en octobre 2011 au profit de la balise data, mais face à la grogne des développeurs elle fût réintroduite le mois suivant.
http://www.webmonkey.com/2011/11/w3c-adds-tim...

Olivier C a dit le

Ah quand même ! octobre 2011 ! C'est bien là que l'on voit que cette norme est encore en plein développement...

jmlapam a dit le

@Guirec : merci, exactement ce que je cherchais