Tag HTML <time>

❮ Précédent Suivant ❯

Le tag <time> est un nouvel élément en HTML 5. Il est utilisé pour indiquer l’heure au format 24 heures et/ou la date exacte.

L’attribut datetime spécifie un format de date/heure lisible par une machine afin que les programmes de l'agent utilisateur puissent ajouter ces informations au système de rappel ou à la planification des événements de l'utilisateur.

La date et l'heure sont ajoutées au format international ISO 8601. Le tag <time> ne doit pas contenir d'éléments non conformes à la norme.

Syntaxe

Le tag HTML <time> est apparié, le contenu est écrit entre le tag ouvrant (<time>) et le tag fermant (</time>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document.</title>
  </head>
  <body>
    <p>Le jeu se déroulera le <time datetime = "2018-09-28 19:00"> le 28 septembre</time>.</p>
    <p>Cela va commencer <time>à 19:00</time></p>
  </body>
</html>

Essayez-vous-même!

Résultat

Attributs

Attribut	Valeur	Description
datetime		Indique la date / heure dans un format lisible par machine.
	YYYY	Année
	MM	Mois
	DD	Jour du mois
	T	Délimiteur entre date et heure
	hh	Heure
	mm	Minutes
	ss	Secondes
	TZD	(Time Zone Designator) fuseau horaire

Le tag <time> supporte également les Attributs globaux.

Comment styler le tag HTML <time> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <time>:

La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
La propriété CSS font-size définit la taille de la police.
La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.

Coloration du texte dans le tag HTML <time>:

La propriété CSS color décrit la couleur du contenu et les décorations du texte.
La propriété CSS background-color définit la couleur de fond d’un élément.

Styles de mise en page du texte pour la tag HTML <time>:

La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
La propriété CSS word-break spécifie où les lignes doivent être cassées.

Autres propriétés utiles pour le tag HTML <time>:

La propriété CSS text-shadow ajoute des ombres au texte.
La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
La propriété CSS line-height spécifie la hauteur d’une ligne.
La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
La propriété CSS word-spacing permet de définir l’espacement entre les mots.


6+	4+	5+	11.1+

11.1+