Ces Messieurs Dames, bonsoir! Ça fait un bail, hein? Et pourtant, j’ai même pas rédigé de contrat (j’ai pas perdu mon humour, je vous rassure, j’étais en stage chez Tex pendant tout ce temps). Vous n’imaginez pas à quel point j’étais tout frétillant à l’idée de vous retrouver! Et pour bien attaquer cette reprise (parce que finalement, c’est un peu la rentrée pour nous aussi), j’y vais franco de port : Question à vous tous, vous les passionnés de l’email marketing qui nous regardez depuis votre siège ergonomique Adapta en grignotant un bägel au saumon de chez Picard en éparpillant des miettes partout : quelle balise HTML allez-vous utiliser pour mettre du texte en gras ? A quelle autre balise allez-vous faire appel pour passer du texte en italique ? Ou encore pour souligner un morceau de texte ? Ouuuuuhhh j’ai mes p’tites oreilles qui sifflent! Allons-nous en discutailler de tout cela.
Problématique
Je constate dans nombre d’intégrations HTML l’utilisation intempestive des balises <strong>, <em>, <b>, <i> ou encore <u> pour mettre en forme graphiquement une partie de texte. Entendons-nous bien hein, j’ai bien dit « pour mettre en forme graphiquement ». Et c’est une mauvaise habitude, c’est là où le bât blesse. D’ailleurs, savez-vous d’où vient cette expression? Point culture G qui s’impose: le bât est une selle pour les bêtes de somme sur laquelle on place leur charge. Les bêtes dont le bât était mal fixé ou trop chargé avaient des plaies qui les faisaient souffrir. Ch’bim, on s’endormira sur nos deux oreilles… Savez-vous d’ailleurs d’où vient cette expression? Mais stop, je m’égare… Je vous passe les tests d’email preview, qui « malheureusement » pour le moment ne vont pas dans mon sens. Effectivement, tout texte au sein d’une balise <strong> s’affichera bien en gras. Tout texte dans une balise <em> s’affichera bien en italique… Tout texte dans une balise <b> s’affichera bien en gras, et ainsi du suite… Je vais pas vous faire toute la liste non plus, vous avez compris le principe je pense.
Rectification!
Mais ces balises ne sont en aucun cas vouées à une mise en forme graphique d’un texte HTML. Et non ! Boum, dans le piège, comme des bleus (j’vais arrêter de faire mon malin, j’ai moi-même dit sur ce même blog en 2015 que les balises <strong> et <b> étaient bien supportées pour leur mise en forme graphique). Enfin à vrai dire, tout le monde utilise ces balises pour mettre en forme graphiquement, mais c’est bien là le souci: C’est une mise en forme par défaut qui leur est pour le moment attribuée, ou l’ensemble des clients mails et navigateurs semblent unanimes sur l’affichage (et c’est tant mieux pour nous j’ai envie de dire !). Cependant, lorsque l’on consulte les définitions et usages de chacune de ces balises sur le site de w3schools, on constate bien que ces balises ont plutôt une fonction « sémantique ».
Définition de ces balises
<i> : Définit une partie de texte dans un autre ton ou une autre « humeur ».
<u> : Représente un texte qui doit être « stylistiquement » (merci Google Translate) différent du texte normal , tel que des mots mal orthographiés.
<strong> : Définit un texte important.
<em> : Définit un texte souligné, dans le sens « l’accent est mis sur… »
<mark> : Permet de mettre en évidence des parties d’un texte.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Conclusion
Alors bon, la balise <mark> peut déjà définitivement être supprimée de la liste : son support « graphique » (surlignement jaune façon Stabilo Boss) est franchement déplorable. Ça, c’est fait. Quant aux autres balises, gardez donc à l’esprit que leur vocation est sémantique!!! Soyons bien d’accord, la sémantique au sein d’un emailing peut avoir une certaine fonction utile (en termes d’accessibilité par exemple, mais ça fera l’objet d’un autre article). Mais s’il ne s’agit que d’une mise en forme graphique, préférez l’utilisation d’un bon vieux <span> avec la ou les propriété(s) CSS correspondante(s) : font-weight, font-style, text-decoration, background-color. Car si le rendu ne pose aucun souci pour le moment, peut-être que la mise en forme graphique de ces éléments pourrait changer à l’avenir.
Driiiiiiiiiiiiiiiiiiiiiiiinggggggg! Fin du cours! OUAAAAAAAAAAAAAAAAISSSSS!!!! C’est la RECREEEEEEEEEEEEEEEEEEEE!!!!
