- Tétracapillotomie
- (tetra + capill + tom) Coupage de cheveux en quatre
Dans un questionnaire, portant sur la sémantique et l’ordre des balises, Dan Cederholm donne les exemples suivants :
<a href="http://www.simplebits.com/"><strong>The Greatest Web Site Ever</strong></a>
<strong><a href="http://www.simplebits.com/">The Greatest Web Site Ever</a></strong>
Dans le premier exemple, une forte emphase est entourée par un hyperlien. Dans le second, c’est le contraire.
La question que pose Dan est celle de la sémantique : bien que ces deux codes donnent le même résultat, veulent-ils dire exactement la même chose ?
Les commentateurs étaient vraiment mitigés. Moi beaucoup moins.
Last in, first out
: tout comme pour les CSS, le dernier élément à précédence sur les autres. Je considère que la sémantique doit se lire en fonction de l’écartement d’un objet.
Dans le premier exemple, un lien pointe vers un texte (et un site) important. Dans le second, un hyperlien est important.
Ratiocinage ? Pour moi, le lien est d’abord important avant d’être hyperlié. Il est d’abord strong avant d’être a. Ainsi, mes liens se trouvent presque toujours en bout de chaîne.
D’autres exemples
Voici deux autres exemples de mon cru qui seront peut-être plus faciles à comprendre.
cite et emphase
<strong><cite>Washington Post</cite></strong> – Washington Post
<cite><strong>Washington Post</strong></cite> – Washington Post
Le premier cas me paraît clairement plus sémantique : le titre de l’œuvre est important, pas la chaîne de caractère. Le titre est Washington Post, pas Washington Post.
Un cas encore plus flagrant :
il a dit : <q><strong>quarante-cinq !</strong></q> – il a dit : quarante-cinq !
il a dit : <strong><q>quarante-cinq !</q></strong> – il a dit : quarante-cinq !
Ce qui importe, ce n’est pas d’avoir parlé, mais ce qui a été dit. Et on ne met pas des guillemets en gras.
Je pourrais donner un exemple similaire (et peut-être plus parlant pour les typographes) en mettant un texte dans une langue et une citation dans une autre. Dans ce cas-là, les guillemets devraient être dans la première langue, pas dans la seconde. Cependant, ce ne serait pas très parlant au niveau du code (la seconde solution nécessitant d’ajouter un span, l’impact pédagogique serait faible).
Où ça n’importe pas
Je considère que em et strong ne sont que deux itérations de quelque chose de beaucoup plus vaste : le poids des mots. En effet, le texte « normal » a un poids de 0, le texte en em a un poids de 1 (emphase) et celui en strong un poids de 2 (forte emphase). Personnellement, j’utilise small comme texte de moindre poids (poids –1) et je fais l’impasse sur big, mais là, je digresse.
Bref. em = 1, strong = 2
C’est important <em><strong>pour moi<strong><em> – C’est important pour moi. 1+2=3
C’est important <strong><em>pour moi</em></strong> – C’est important pour moi. 2+1=3
1+2=2+1=3. Dans ce genre de cas, l’ordre n’a aucune espèce d’importance. Personnellement, je serais pour un em3. Pour le reste, voir Un peu de ménage dans CSS/HTML.
Enfin, quand je dis que ça n’importe pas, je parle de sémantique. En CSS, la dernière balise (donc la plus proche de la chaîne de caractères) à primauté sur les autres. Un bon moyen de voir tout ceci est justement d’adjoindre des styles mutuellement incompatibles à chaque élément et de voir par vous même.