L’article d’aujourd’hui concerne la nouvelle balise <time> en HTML5 qui va encore une fois améliorer la sémantique de nos pages web.
La balise <time> sert à indiquer l’heure ou la date. Jusque là, tout est simple.
Elle contient deux attributs : pubdate et datetime.
L’attribut pubdate est un booléen et indique une date de publication. S’il est présent, il faut spécifier la date entre <time></time>. Un article peut contenir au maximum un élément <time> ayant l’attribut pubdate (quand même logique…).
Si l’attribut datetime est présent (ex : datetime= « 2009-10-12 »), il n’est pas nécessaire que notre élément <time> contienne quelque chose. Dans le cas contraire, nous devons spécifier la date et l’heure avec l’élément <time>.
Son utilisation
La balise <time> peut être utilisée à plusieurs endroits différents dépendamment du contenu de notre site. Pour prendre à nouveau l’exemple d’un blog, la balise <time> en HTML5 pourrait être intégrée dans l’en-tête de nos articles pour indiquer la date de publication.
Voici 4 exemples de l’utilisation de la balise <time> :
<p>Je devrais arriver à <time>19h30</time>.</p>
Avec l’attribut pubdate
<header>
<h3>Is HTML5 a FLASH killer?</h3>
<p>Publié le <time pubdate>2009-10-12</time></p>
</header>
Avec l’attribut datetime
<p>Écrit le <time datetime=”2009-10-12”></time></p>
Avec l’attribut pubdate et datetime
<p>Publié <time pubdate datetime=”2009-10-12”>aujourd’hui</time></p>
Dans le dernier cas ci-dessous, nous ferions un rendu de la date dynamiquement à l’aide d’un autre langage de programmation.
<p>Publié <time pubdate datetime=”2009-10-12”></time></p>
Un autre exemple serait d’utiliser la balise pour nos tweets sur Twitter. En effet, après chaque tweet nous retrouvons l’heure à laquelle notre tweet a été publié.
Ex :
<ul id="twitter_update_list">
<li>Comment « plugger » subtilement des mots-clés comment HTML5
dans mon blog. <time>1 hour ago</time></li>
</ul>
La balise <time> en HTML5 sera de plus en plus utilisée dans les futurs sites web. Elle peut sembler complexe au début, mais une fois que nous comprenons bien la distinction entre les attributs pubdate et datetime, nous pouvons bien l’exploiter. C’est une autre balise avec laquelle les développeurs pourront s’amuser avec Javascript, PHP, etc.
Vous pouvez également consulter la spécification du W3C sur HTML5 concernant la balise <time>.
