OUJOOD.COM
À quoi sert la balise <time> ?
La balise <time> sert à indiquer une date ou une heure dans une page HTML. Elle affiche du texte lisible par un humain — comme « mercredi 10 mars à 19h » — tout en fournissant aux navigateurs et aux moteurs de recherche une version formatée via l'attribut datetime.
Introduite en HTML5, elle répond à un problème concret : quand vous écrivez « demain à 8h » dans un article, un moteur de recherche ne sait pas de quelle date il s'agit. Avec <time datetime="2026-04-30T08:00">demain à 8h</time>, la date devient précise et interprétable — utile pour les résultats enrichis Google, les agendas, les rappels automatiques.
Syntaxe de base
La balise <time> s'utilise en ligne, à l'intérieur d'un paragraphe ou d'un titre. Elle accepte du texte entre ses balises ouvrante et fermante, et un attribut datetime facultatif pour la version machine :
<!-- Date lisible, sans datetime --> <time>2026-04-29</time> <!-- Date avec attribut datetime pour les machines --> <time datetime="2026-04-29">29 avril 2026</time> <!-- Heure seule --> <time datetime="20:00">Commence à 20h</time> <!-- Date + heure + fuseau horaire Paris --> <time datetime="2026-04-29T20:00+02:00">Le 29 avril à 20h (heure de Paris)</time>
Exemple complet dans une page HTML
Voici comment intégrer <time> dans une page HTML pour indiquer une date de rendez-vous :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple balise time</title>
</head>
<body>
<!-- Le texte visible est libre, datetime contient la valeur machine -->
<p>Votre rendez-vous avec M. Martin est le
<time datetime="2026-05-15T14:30+02:00">vendredi 15 mai à 14h30</time>.
</p>
</body>
</html>
L'attribut datetime : format et valeurs
L'attribut datetime suit le format ISO 8601. Chaque partie est optionnelle selon ce que vous voulez exprimer — une date seule, une heure seule, ou les deux avec fuseau horaire.
La syntaxe complète : YYYY-MM-DDThh:mm:ssTZD
Élément |
Description |
Exemple |
|---|---|---|
YYYY |
Année sur 4 chiffres |
2026 |
MM |
Mois sur 2 chiffres |
04 pour avril |
DD |
Jour sur 2 chiffres |
29 |
T |
Séparateur obligatoire entre date et heure |
T |
hh:mm:ss |
Heure, minutes, secondes |
14:30:00 |
TZD |
Fuseau horaire. Paris = +01:00 (hiver) ou +02:00 (été). UTC = Z ou +00:00 |
+02:00 |
Exemples de valeurs datetime
Plusieurs formats valides selon le type d'information à transmettre :
<!-- Date seule --> <time datetime="2026-04-29">29 avril 2026</time> <!-- Heure seule --> <time datetime="14:30">14h30</time> <!-- Date + heure en UTC --> <time datetime="2026-04-29T14:30Z">29 avril à 14h30 UTC</time> <!-- Date + heure avec fuseau horaire Paris (été) --> <time datetime="2026-04-29T14:30+02:00">29 avril à 14h30, heure de Paris</time> <!-- Mois et année seulement --> <time datetime="2026-04">avril 2026</time> <!-- Durée (format PTxHxM) --> <time datetime="PT2H30M">2 heures et demie</time>
Compatibilité navigateurs
La balise <time> fonctionne dans tous les navigateurs modernes : Chrome, Firefox, Safari, Edge, Opera. Elle fait partie de la spécification HTML5 depuis 2011 — aucun polyfill nécessaire en 2026.
Intérêt SEO et sémantique
Un texte comme « publié le 29 avril 2026 » reste opaque pour un moteur de recherche. Avec <time datetime="2026-04-29">29 avril 2026</time>, Google comprend qu'il s'agit d'une date précise — ce qui peut faire apparaître la date de publication directement sous le titre dans les résultats de recherche.
Sur les pages d'articles ou d'événements, combinez <time> avec les balises <article> et les métadonnées Schema.org pour un balisage sémantique complet. C'est peu de code pour un gain réel en lisibilité machine.
Pour aller plus loin : attributs globaux en HTML et attributs d'événement en HTML.
Par carabde 10 mars 2014 | Mis à jour le 29 avril 2026