La balise HTML <time>

La balise <time> est l'un des éléments HTML5. Elle marque un instant ou une plage de temps de façon à ce que l'information soit à la fois lisible par les humains et analysable par les machines. Elle peut représenter l'un des éléments suivants :

une heure lisible par l'humain sur une horloge 24 heures,
une date précise dans le calendrier grégorien (avec des informations optionnelles de fuseau horaire et d'heure),
une durée.

La balise <time> ne doit pas être utilisée pour des dates antérieures à l'introduction du calendrier grégorien.

Pourquoi utiliser `<time>` ? L'angle lisible par les machines

Le texte visible à l'intérieur d'un élément <time> reste libre et convivial pour l'humain — vous pouvez écrire « Vendredi prochain », « 28 septembre » ou « dans deux heures ». L'attribut optionnel datetime contient une version stricte et lisible par les machines de ce même instant, permettant aux logiciels de le comprendre avec précision :

Les moteurs de recherche lisent datetime pour construire des résultats plus intelligents et sensibles au temps (par exemple, afficher les dates d'événements dans les extraits enrichis).
Les outils de calendrier et les navigateurs peuvent proposer des rappels « ajouter au calendrier » car ils connaissent l'instant exact, pas seulement les mots.
Les scripts et les technologies d'assistance peuvent reformater, localiser ou comparer la valeur de manière fiable.

Si vous omettez l'attribut datetime, le contenu textuel de l'élément doit lui-même être une chaîne date/heure valide — et dans ce cas, l'élément ne doit contenir aucun élément imbriqué, uniquement du texte.

Syntaxe

L'élément <time> nécessite des balises d'ouverture et de fermeture. Le contenu est écrit entre les balises <time> et </time>.

Exemple de la balise HTML `<time>` :

Balise HTML <time>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The game will be held on <time datetime="2018-09-28T19:00">September 28</time>.</p>
    <p>It will start at <time>19:00</time></p>
  </body>
</html>

Essayez vous-même »

Dans le premier paragraphe, l'attribut datetime contient la valeur précise lisible par la machine, tandis que le texte visible indique « September 28 ». Dans le second, il n'y a pas d'attribut datetime, donc le texte 19:00 est lui-même la valeur lisible par la machine.

Les formats de `datetime`

L'attribut datetime doit contenir une chaîne date/heure valide, conformément aux conventions ISO 8601 utilisées par HTML. Voici les formats courants, prêts à copier-coller :

Ce qu'il représente	Exemple de valeur	Notes
Date	`2024-03-15`	Année-Mois-Jour.
Année et mois	`2024-03`	Jour omis.
Heure uniquement	`14:30`	Horloge 24 heures, `:ss` optionnel.
Date et heure (UTC)	`2024-03-15T14:30:00Z`	`T` sépare la date et l'heure ; `Z` signifie UTC.
Date et heure avec décalage	`2024-03-15T14:30:00+02:00`	Décalage de fuseau horaire par rapport à UTC.
Durée	`PT2H30M`	« 2 heures, 30 minutes ».
Durée (jours)	`P2D`	« 2 jours ».
Semaine	`2024-W11`	La 11e semaine ISO de 2024.

Une durée commence toujours par P (période) ; un T précède les composantes temporelles, donc PT2H30M se lit « 2 heures et 30 minutes », tandis que P2D représente 2 jours.

Exemple : une valeur heure uniquement

Ici, le texte visible est aussi la valeur lisible par la machine, donc l'attribut datetime n'est pas nécessaire.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>Doors open at <time>09:00</time> sharp.</p>
  </body>
</html>

Exemple : une durée

Utilisez l'attribut datetime avec une valeur P/PT pour indiquer la durée de quelque chose.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>The recipe needs <time datetime="PT2H30M">2 hours and 30 minutes</time> in the oven.</p>
  </body>
</html>

Attributs

Attribut	Valeur	Description
datetime	`YYYY-MM-DD`, `YYYY-MM-DDThh:mm`, `hh:mm`, etc.	Spécifie la date/heure dans un format lisible par la machine. La valeur doit suivre un format de chaîne date/heure valide (par ex., ISO 8601). Les décalages de fuseau horaire comme `+02:00` ou `Z` sont également pris en charge.

La balise <time> prend également en charge les attributs globaux.

Remarque : L'attribut pubdate était précédemment pris en charge, mais il a été déprécié et supprimé dans les versions ultérieures des spécifications HTML.

Mise en forme de `<time>`

L'élément <time> est en ligne et sans style par défaut, il ressemble donc au texte environnant. Une astuce utile est le sélecteur d'attribut time[datetime], qui cible uniquement les éléments portant une valeur lisible par la machine — par exemple, pour afficher la valeur exacte au survol via un title, ou pour donner à ces instants un indice visuel subtil.

/* Highlight only <time> elements that have a datetime attribute */
time[datetime] {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

Balises associées

Balise HTML <data> — l'équivalent à usage général pour les valeurs non temporelles lisibles par les machines.
Référence des éléments HTML5 — la liste complète des éléments introduits dans HTML5.

Pratique

Quelle affirmation concernant l'élément HTML time est correcte ?

L'attribut datetime contient une valeur lisible par la machine tandis que le texte de l'élément reste lisible par l'humain.time est un élément de niveau bloc.L'élément time ne peut pas représenter une durée.Les attributs globaux ne sont pas pris en charge sur l'élément time.Une valeur datetime de PT2H30M est invalide.

Pourquoi utiliser <time> ? L'angle lisible par les machines