Sur la page d'un article, vous affichez une date de publication comme "20 août 2026", ou sur la fiche d'un évènement, une heure de webinaire comme "14h30". Un lecteur humain comprend immédiatement, mais un navigateur, un moteur de recherche ou un agenda automatique ne voit qu'une suite de caractères sans queue ni tête : rien ne lui indique qu'il s'agit d'une date, et encore moins à quelle date exacte du calendrier universel elle correspond.
La balise <time> résout ce problème : elle associe, dans un seul élément, un texte lisible par vos visiteurs et une valeur machine-lisible au format ISO 8601, rangée dans l'attribut datetime. Le texte affiché peut rester informel, la valeur cachée reste toujours précise et universelle.
Définition
<time> est une balise sémantique qui marque un contenu comme étant une date, une heure, une date et heure combinées, ou une durée. Elle ne change rien à l'apparence du texte par défaut : son intérêt n'est pas visuel, il est structurel. En entourant "20 août 2026" de cette balise, vous dites explicitement au navigateur, aux extensions et aux robots d'indexation : "ceci est une valeur temporelle", ce qu'un simple morceau de texte ne peut jamais affirmer par lui-même.
C'est en réalité un cas particulier de <data>, la balise générique qui associe une valeur machine-lisible à un contenu affiché. Là où <data> peut représenter n'importe quel identifiant, comme un code produit ou un numéro de série, <time> est réservée aux dates, heures et durées, et le navigateur sait précisément quoi en faire, par exemple proposer d'ajouter un évènement à un agenda.
Syntaxe et attributs
L'attribut datetime porte la valeur machine, au format ISO 8601. Le contenu entre les balises ouvrante et fermante reste libre et peut s'écrire dans n'importe quelle langue ou format, du moment qu'il reste compréhensible pour vos visiteurs.
| Ce que vous voulez exprimer | Format de l'attribut datetime | Exemple |
|---|---|---|
| Une date seule | AAAA-MM-JJ | datetime="2026-08-20" |
| Une heure seule | HH:MM | datetime="14:30" |
| Date et heure combinées | AAAA-MM-JJTHH:MM | datetime="2026-08-20T14:30" |
| Une durée | PnDTnHnMnS | datetime="PT2H30M" |
Pour un évènement se déroulant dans un fuseau horaire particulier, l'attribut accepte aussi un décalage, comme datetime="2026-08-20T14:30+02:00". C'est ce qui permet à un agenda de proposer l'heure correcte, même si votre visiteur se trouve à l'autre bout du monde.
Exemple concret
Voici comment dater un article de blog, avec une date de publication et une date de mise à jour, deux usages très courants sur un site.
<p>
Publié le <time datetime="2026-08-15">15 août 2026</time>, mis à jour le
<time datetime="2026-08-20">20 août 2026</time>.
</p>Le texte affiché ("15 août 2026") reste celui que vous voulez montrer, tandis que l'attribut datetime donne au navigateur une valeur qu'il peut trier, comparer ou transmettre à un autre programme sans ambiguïté.
Sémantique et accessibilité
Pour un lecteur d'écran, le texte visible est en général annoncé tel quel : votre visiteur malvoyant entend "15 août 2026", pas la valeur brute de l'attribut. L'intérêt de <time> se joue ailleurs, du côté des outils qui ne "lisent" pas au sens humain : un moteur de recherche peut afficher votre date de publication dans ses résultats, une extension de navigateur peut proposer d'ajouter votre évènement à un agenda, et un assistant vocal peut répondre correctement à "quand a été publié cet article".
Cette lecture automatique repose entièrement sur le format ISO 8601 de l'attribut datetime. Une valeur mal formée, comme datetime="20 août 2026", n'est reconnue par aucun de ces outils : elle est traitée comme une simple chaîne de caractères, exactement comme si la balise <time> n'existait pas.
Le texte affiché et l'attribut datetime n'ont pas à être identiques, mais ils doivent raconter la même date. Écrire <time datetime="2026-08-20">aujourd'hui</time> est parfaitement valide le jour même, mais devient trompeur si la page reste en ligne sans être régénérée le lendemain : le mot "aujourd'hui" reste affiché alors que la date qu'il désignait est déjà passée.
Cas d'usage courants
Vous croiserez <time> partout où une valeur temporelle a un sens pour un programme, pas seulement pour un œil humain. Une date de publication ou de mise à jour d'article, la date de début d'un évènement, le temps de cuisson dans une recette, ou encore une horloge qui affiche le compte à rebours avant la fin d'une offre limitée en sont des exemples courants.
Dans tous ces cas, la logique reste la même : le texte demeure rédigé pour vos visiteurs, l'attribut datetime rend cette même information exploitable ailleurs, sans que vous ayez à dupliquer l'information dans un format caché séparé.
Questions fréquentes
datetime ?Dans la pratique, oui, presque toujours. La spécification tolère d'omettre l'attribut datetime si le texte affiché est déjà lui-même écrit dans un format reconnu par la norme, mais c'est rarement le cas d'une date rédigée en français comme "20 août 2026". Ajouter systématiquement l'attribut évite toute ambiguïté et garantit que les outils automatiques comprennent votre contenu.
time pour exprimer une durée, comme "2h30", plutôt qu'une date précise ?Oui, c'est un usage prévu par la spécification. L'attribut datetime accepte aussi un format de durée, comme datetime="PT2H30M" pour deux heures et trente minutes. Vous verrez ce format sur des pages qui affichent un temps de cuisson, la durée d'une vidéo, ou celle d'un trajet, avec un texte affiché du type "2h30".
time et un simple span autour de la date ?Un <span> ne porte aucun sens particulier : pour un navigateur ou un moteur de recherche, c'est un simple conteneur neutre, au même titre qu'un morceau de texte non balisé. La balise <time>, elle, déclare explicitement "ceci est une valeur temporelle" et fournit, via datetime, une version exploitable par des programmes. C'est cette déclaration de sens, invisible à l'écran mais lisible par les machines, qui fait toute la différence.