Mises à jour HTML5

Enfin une bonne décision de la W3C. Mais c’est tout de même ironique, le strike est brillamment remplacé par l’élément s. C’est-à-dire 5 caractères de moins et des fichier moins lourds. Efficacité énergétique oblige. Bon c’est un élément qui n’est pas fréquent mais la W3C nous demande aussi de passer du b au strong. Le pire c’est la définition « rendered as bold text », on ne dit pas « rendered as strong text »! Or donc on passe du « strike > b » au « s > strong » (!).

Exemple (désuet) : <STRIKE>Votre texte..</STRIKE>

Résultat : Votre texte…

Exemple : <s>Votre texte..</s>

Résultat : Votre texte…

Autres solutions

Pour perdre un peu plus de temps, pour faire un bon détour alors que le CSS est LA solution, on a encore un tas d’éléments! La balise del permet ...la même chose. De pair avec son antonyme ins qui permet d’insérer une nouvelle information. Cette fois avec deux attributs :

Attributs HTML

cite

URL valide. Indique l’adresse d’un document qui explique le changement. Par exemple, les minutes de la réunion.

datetim

Date valide, avec ou sans l’heure. Indique l’heure et la date de la modification.

Exemple de suppression : <del cite="raisons.htm" datetime="2014-10-10T00:00Z">Nouvelle date..</del>

Résultat : Réunion du 10 octobre

Exemple d’insertion : <ins cite="textedescriptif.htm" datetime="2014-10-25T00:00Z">Nouvelle date..</ins>

Résultat : Nouvelle date..

Exemple combiné
<ul>
  <li><ins datetime="2014-10-25T00:00Z">Réunion du 10 octobre</ins></li>
  <li><del cite="raisons.htm" datetime="2014-10-10T00:00Z">Réunion du 10 octobre</del></li>
  <li>Réunion du 10 septembre</li>
</ul>

Résultat combiné :

• Réunion du 10 octobre
• Réunion du 10 octobre
• Réunion du 10 septembre

Version CSS

Exemple avec CSS :
<style>
  .barre {text-decoration:line-through;}
</style>
<span class="barre">
  Barré via CSS
</span>

Résultat CSS : Barré via CSS

Colorer la ligne

On demande souvent d’avoir une couleur pour le texte et une autre pour la ligne, par exemple rouge. La ligne réagie malheureusement comme le « souligné d’un lien » en utilisant bêtement la couleur du texte. Par contre on peut très bien changer la couleur du texte à l’intérieur de la balise s.

Ligne rouge

Exemple avec souligné rouge :
<s style="color:red">
  <span style="color:black">Ligne rouge</span>
</s>

Aussi...

Balise mark pour marquer un mot. Ou encore la balise u pour souligner un texte.