Bonne pratique d'une mise à jour d'un article

Lorsqu’on fait une mise à jour d’un article sur un blog, on a pour habitude de rajouter “(Màj)” dans le titre puis la modification dans le corps précédé d’un titre du genre “Mise à jour du 4 janvier 2012”.

Récemment, j’ai mis à jour un de mes anciens articles et je me suis intéressé à la manière de le faire correctement en respectant les conventions et en utilisant les outils HTML5.

L'abréviation Màj

Ceci est une petite parenthèse pour blogueurs francophones.

Souvent, les titres d’articles mis à jour comportent la mention “Màj” dépourvue de balise <abbr>. Pour satisfaire le niveau AAA des règles WCAG 2.0, il est nécessaire d’identifier les abréviations comme suit :

<h2>Mon titre (<abbr title="Mise à jour">Màj</abbr>)</h2>

<ins> : la balise d'insertion

La balise <ins> permet de définir du texte inséré dans un document.

datetime

Au moyen de l'attribut datetime, il est possible de spécifier la date de l'insertion.

<ins datetime="2012-01-04">Vestibulum vitae neque risus, et volutpat augue. Praesent tempus posuere cursus.</ins>
datetime doit être une chaine de caractère représentant une date valide et une heure optionnelle.

cite

Si la mise à jour intervient suite par exemple à un article d'un magasine web, il est possible d'utiliser l'attribut cite afin de référer l'insertion à l'article en question.

<ins cite="https://www.domaine.com/article.html">Vestibulum vitae neque risus, et volutpat augue. Praesent tempus posuere cursus.</ins>
cite doit être un lien valid.

Une mise à jour correcte avec la balise <ins> et ses attributs

Voici une structure très basique d'un article :

<article>
	<header>
		<h2>Lorem ipsum</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis, massa in hendrerit vulputate, nibh nisi tincidunt libero, ac luctus sem diam eget elit.</p>
</article>

Si on utilise les outils cités précédemment, voici un balisage correct pour une mise à jour de contenu :

<article>
	<header>
		<h2>Lorem ipsum <ins datetime="2012-01-04">(updated)</ins></h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis, massa in hendrerit vulputate, nibh nisi tincidunt libero, ac luctus sem diam eget elit. <ins datetime="2012-01-04" cite="https://www.domaine.com/article.html">Vestibulum vitae neque risus, et volutpat augue. Praesent tempus posuere cursus.</ins></p>
</article>

Les styles

Il est bon d'utiliser un style CSS afin de faciliter l'identification des insertions. Ainsi on pourra faire plus facilement le lien entre le texte "Mise à jour" inséré dans le titre et celui se trouvant dans le corps de l'article.

Un exemple de CSS :

ins {
	background: #FFC;
	text-decoration: none;
}