Comment indiquer correctement la source d’une citation en HTML5 ?
Pour créer une citation sur le Web, nous disposons des trois balises : <q>, <cite> et <blockquote> (voir Des citations bien balisées). HTML5 n’en introduit pas de nouvelle, laissant toujours la mention de la source d’une citation… à la bidouille.
Habituellement avec <small> et <cite>
J’ai pris l’habitude d’encapsuler mes citations longues avec la balise <blockquote>, y incluant la mention de la source, distinguant celle-ci par une balise <small>, en ajoutant <cite>, lorsqu’il y avait lieu, pour marquer le titre de l’œuvre citée. Par exemple :
<blockquote>
<p>On ne naît pas femme : on le devient… C’est l’ensemble de la civilisation qui élabore ce produit intermédiaire entre le mâle et le castrat qu’on qualifie de féminin.
<br><small>— Simone de Beauvoir, extrait du <cite>Deuxième Sexe</cite>, 1949.</small>
</p>
</blockquote>Ce qui s’affiche ici comme suit :
On ne naît pas femme : on le devient… C’est l’ensemble de la civilisation qui élabore ce produit intermédiaire entre le mâle et le castrat qu’on qualifie de féminin.
— Simone de Beauvoir, extrait du Deuxième Sexe, 1949.
Les deux frameworks à la mode en ce moment, Bootstrap et Foundation, proposent quelque chose de similaire. Dans Foundation 3, c’est la balise <cite> qui sert à donner la référence de la citation :
<blockquote>
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
<cite>Isaac Asimov</cite>
</blockquote>Ce n’est pas idéal, car la source n’est pas toujours strictement un nom d’auteur (usage déprécié en HTML5 [*]) ou un titre d’œuvre, mais peut être plus verbeuse, par exemple : « Extrait de “La Ballade des dames du temps jadis” de François Villon dans Le Grand Testament ». Mieux vaut prévoir un élément parent, comme dans Bootstrap 3, qui est conforme à mon habitude :
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>Si c’est sémantiquement satisfaisant, c’est parfois gênant à styler, l’élément <small> pouvant être utilisé au sein de la citation elle-même. C’est rare, mais légitime. Comment faire mieux ?
Avec <figcaption> ou <footer> ?
Tirant profit les nouveaux éléments HTML5, plusieurs pistes sont explorées. Ainsi <figcaption> pourrait constituer un élément approprié pour « légender » une citation. Par exemple :
<figure>
<blockquote>
Blah blah
</blockquote>
<figcaption><a href=”http://example.com/foo”>Your mum</a></figcaption>
</figure>Mais cela impose d’encapsuler le tout dans son parent obligatoire, <figure>, alourdissant le code et ajoutant une signification qui n’est pas toujours appropriée. L’élément <footer> me semble mieux répondre au besoin :
<blockquote>
<p>On ne naît pas femme : on le devient… C’est l’ensemble de la civilisation qui élabore ce produit intermédiaire entre le mâle et le castrat qu’on qualifie de féminin.</p>
<footer>Simone de Beauvoir, extrait du <cite>Deuxième Sexe</cite>, 1949</footer>
</blockquote>Ce n’est pas strictement valide, mais toléré lorsque cela vient apporter une information sur la citation, ce qui est l’usage que je cherchais à couvrir. Cela permet en outre de marquer plus aisément la référence en CSS d’un style distinctif en ciblant blockquote footer { … }.
Bonne idée ? ou pas ?
Vos commentaires
1. Le 19 septembre 2013 à 11:52, par Stéphane Deschamps
En réponse à : Sourcer une citation en HTML5
Ça me rappelle une vieille discussion sur le défunt htmlzengarden (qui, me dit-on, est en cours de refonte) sur la façon de coder un chemin de fer, et je disais que le plus simple est le mieux.
L’approche ici est un peu similaire, surtout si les contenus doivent être contribués ensuite. Si dans ton CMS tu ne donnes pas la possibilité d’encadrer la saisie d’une structure de citation aussi complexe que ce que tu viens de nous montrer, c’est peine perdue : dans 6 mois il y aura partout des simples paragraphes avec de l’italique dedans.
Mais bon, pour l’exercice tentons de faire abstraction de la complexité d’intégration ;)
Dans ce cas je dirais qu’un p.source ferait l’affaire et je n’irais pas chercher plus loin.
Donc :
Le vrai luxe ce serait évidemment un attribut data-* dans ton CMS au niveau du blockquote, et donc la possibilité de corriger le tir en cours de route pour adapter ultérieurement le HTML aux idées qui peuvent te venir plus tard. :)
2. Le 19 septembre 2013 à 16:06, par Romy Têtue
En réponse à : Sourcer une citation en HTML5
Autant je suis d’accord avec l’argument et l’approche pragmatique, autant je ne comprends pas l’exemple que tu donnes : en quoi serait-il plus simple de générer/contribuer un
<p class="source">qu’un<footer>ou autre ? Je comprendrais un<p>seul, qui est parfois ce que je fais par flemme pragmatique. Mais préférer un élément pourvu d’un attribut à valeur libre me semble moins résistant à l’erreur humaine.L’emploi d’un sélecteur, ici
.source, est cependant intéressant, car permet de prévoir le style indépendamment du marquage HTML,<small>,<p>ou<footer>. Je l’ajoute à mon framework, en le renommant.cite:)3. Le 19 septembre 2013 à 16:37, par Nicolas Hoizey
En réponse à : Sourcer une citation en HTML5
Je suis en train d’utiliser pour la première fois le système de slides HTML/CSS/JS Shower, qui pousse dans son thème par défaut l’utilisation de la variante
figure/blockquote/figcaption, que j’enrichi d’uncitequand j’indique un nom d’œuvre. Cela me convient bien.Tiens, par contre, « — » ou pas ? Tu ne le mets pas à chaque fois dans tes exemples…
4. Le 19 septembre 2013 à 17:00, par Romy Têtue
En réponse à : Sourcer une citation en HTML5
Bonne question :)
J’utilise le « — » par pragmatisme, c’est-à-dire : à défaut de rendu stylistique et/ou en l’absence d’élément HTML approprié (qui sait comment sera balisé ce site dans X ans ?), j’aurais au moins un signe démarquant la source. Ça n’est gênant que si la citation est un dialogue, où les changements de locuteur se signalent par un tiret cadratin.
Foundation 3 ajoute semblable tiret via CSS :
blockquote cite:before { content: "\2014 \0020"; }. C’est très mignon, mais doublement critiquable : d’une part ça ne s’adapte pas à tous les contenus, au risque de dédoubler le tiret qui serait déjà présent dans la page (comme dans mon cas d’usage, qui n’est pas excentrique), et d’autre part ça s’appuie sur l’élément<cite>qui, on l’a vu plus haut, ne sert plus strictement à cela .5. Le 19 septembre 2013 à 17:18, par Stéphane Deschamps
En réponse à : Sourcer une citation en HTML5
Mettons que j’aie tapé vite ? :)
Effectivement ce qui m’intéressait plutôt c’est le
.sourcedavantage que la balise qu’on y met. Le.citeme parle moins, personnellement, parce qu’il m’évoque davantage<cite>que la notion de source de situation — mais bon c’est sans doute une question de goût, je te laisse juge.6. Le 19 septembre 2013 à 17:19, par Stéphane Deschamps
En réponse à : Sourcer une citation en HTML5
« que la notion de source », nos lecteurs auront vu que je balbutie d’eux-mêmes. ;)
7. Le 19 septembre 2013 à 17:35, par Nicolas Hoizey
En réponse à : Sourcer une citation en HTML5
Pas bête l’ajout via CSS, je vais tenter dans mes slides que je maîtrise totalement pour voir ce que ça donne !
8. Le 23 octobre 2013 à 15:55, par Emmanuel
En réponse à : Sourcer une citation en HTML5
> « — » ou pas ?
M’en allais faire un billet sur le point… Vais voir…
À lire (avec délectation) la version livre papier de Orthotypographie. Je note d’une part que c’est le tiret demi-cadratin qui est utilisé et non le cadratin, et d’autre part qu’il n’est présent que pour séparer la citation de l’auteur & titre que lorsque ceux-ci sont en ligne. Lorsque l’auteur & titre sont à la ligne (ou comme dans une épigraphe), le tiret n’est pas présent, car inutile pour effectuer la distinction je présume.
Et une colle pour toi Romy : quid de la citation dans la citation ? :-)
9. Le 4 novembre 2013 à 20:11, par Cédric
En réponse à : Sourcer une citation en HTML5
Une évolution notable des éléments
<blocquote>et<cite>est proposée dans HTML 5.1, qui semble aller dans le sens que tu proposes, avec en plus la possibilité d’indiquer le nom de l’auteur, ou une URL, ou une référence dans la balise<cite>: cite and blockquote – reloaded, HTML5 Doctor.10. Le 5 novembre 2013 à 17:22, par Romy Têtue
En réponse à : Sourcer une citation en HTML5
J’ai vu ça hier (merci clochix), contente de voir admis l’usage de
<footer>, qui me semble être le plus logique, sémantiquement.Pour répondre à Emmanuel, ça donnerait, par exemple :
Le balisage (avec
<q>) pour marquer la citation dans la citation est généralement peu utile, dans le sens où insister sur le changement de locuteur est rarement d’un réel apport sémantique. L’auteur reste ici Anatole France, qui fait parler un personnage, certes réel, mais dans une œuvre romanesque. Un guillemetage imbriqué, typographiquement correct, me semble suffisant. Rappelons que les guillemets ne sont pas obligatoires sur la citation dans<blockquote>, mais possibles. J’aime bien les ajouter, toujours dans l’idée que cela reste compréhensible en l’absence de rendu CSS approprié (ce qui est le cas de certains lecteurs).Pour la source, sans tiret donc, mieux vaut appuyer le rendu stylistique sur un sélecteur CSS (ici
.toto), comme suggéré par Stéphane, ce qui a pour avantage de fonctionner autant en vieux HTML, sur<small>par exemple, qu’en HTML5, sur<footer>donc. Reste à trouver comment nommer ce sélecteur :.source,.citeou.footer?11. Le 30 janvier 2014 à 14:21, par Sebish
En réponse à : Sourcer une citation en HTML5
Bonjour,
Comme tu dis l’auteur n’est pas forcément tout le temps la source et du coup il vaut mieux éviter de le mettre dans une balise
<cite>. Pour moi la dernière est très intéressante :Répondre à cet article
Suivre les commentaires :
| 