Date (Date)

Le composant date permet d’informer les utilisateurs du moment de la publication d’un article. Une date peut être une minute, une heure, un jour, un mois ou une année.

Usage

• Le composant date est toujours après le titre de l’article.
• Dans un détail article, son affichage est obligatoire.
• Dans une liste d’articles, son affichage est facultatif.

Types

Deux types de dates permettent à l’utilisateur de caractériser un article :

La date de première publication

• Elle correspond à la première date où l’article est publié sur le site.
• Celle-ci est constante, quelle que soit la vie de l’article.
• La date de première publication est précédée de « Publié le ». Ensuite, l’horaire est précédé de « à ».

La date de dernière publication

• Cette date correspond à la dernière date où l’article a été enregistré sur le site avec une modification majeure. En effet, les modifications mineures ne sont pas prises en compte pour cette date : coquille, rotation d’image, etc.
• Cette date peut varier tout au long de la vie de l’article.
• En l’absence de modification majeure de l’article, cette date n’est pas affichée.
• La date de dernière publication est précédée de « Modifié le ».
• La date de dernière publication est affichée avant la date de publication.

Liste d’articles

• Dans une liste d’article, lorsqu’un article a été modifié, seule la date de dernière publication est présente. La date de première publication n’est pas affichée.
• Règles :
  • L’année est précisée uniquement pour les articles qui sont âgés d’un an et une minute.
  • Le mois et le jour sont précisés pour les articles publiés ou modifiés la veille jusqu’à 23h59. Lorsque l’article est publié ou modifié le jour même, ni le mois ni le jour ne sont précisés.
  • Les heures et les minutes sont uniquement présentes pour les articles publiés ou modifiés le jour même.

Bonnes pratiques

Détail article

• Les dates doivent être affichées avant le corps de l’article.

Liste d’articles

• Une liste d’article ne contient pas nécessairement la date de chaque article.
• Si une date doit être affichée dans les listes d’articles classées par date de dernière modification, il est préférable d’afficher cette date de dernière publication.

Style & code

Le composant date est assez simple dans sa structure. Il s’agit d’une balise <time> dans laquelle on met le texte donnant l’information temporelle (une heure, une date du calendrier grégorien ou une durée) au format voulu. Il suffit d’ajouter la classe su-date sur cette balise ou sur son parent pour le designer. Il a toutefois une contrainte : il doit utiliser l’attribut datetime rempli avec la date (et / ou l’heure) dans un format informatique.

Dans un article

C’est le cas nominal. Il est composé d’un parent qui contient le texte accompagnant (ie : « publié le ») et qui porte la classe su-date et de la date proprement dite avec la balise <time>. La valeur de l’attribut datetime doit être une chaîne de caractères décrivant une date valide informatiquement et donnant la même information que le texte à l’intérieur de la balise.

Pour en savoir plus sur le fonctionnement de la balise <time> et de son attribut datetime : <time> sur MDN.

Date de publication

<p class="su-date">Publié le          
    <time datetime="2021-06-24T12:34:22+02:00">24/06/2021 à 12h34</time>
</p>

Date de publication + date de modification

<p class="su-date">Modifié le          
    <time datetime="2021-06-25T10:04:22+02:00">25/06/2021 à 10h04</time>
</p>
<p class="su-date">Publié le          
    <time datetime="2021-06-24T12:34:22+02:00">24/06/2021 à 12h34</time>
</p>

Dans une liste d’articles

Pour une date d’article dans une liste d’article le <time> avec la classe su-date directement sur lui suffisent. Bien que ne présentant que l’heure aux lecteurs, l’attribut datetime doit contenir aussi la date.

<div class="su-articles-list">
    <time class="su-date" datetime="2021-06-30T15:43:56+02:00">15h43</time>
</div>

Sur fond sombre

En cas de fond sombre, utiliser la classe su-negative.

<div class="su-articles-list su-negative" style="background: DimGray; padding: 10px">
    <time class="su-date" datetime="2021-06-30T15:43:56+02:00">15h43</time>
</div>