Sourcer une citation en HTML5

Comment indiquer correctement la source d'une citation en HTML5 ?

Pour créer une citation sur le Web, nous disposons des trois balises : , et

(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 et

J'ai pris l'habitude d'encapsuler mes citations longues avec la balise

, y incluant la mention de la source, distinguant celle-ci par une balise , en ajoutant , lorsqu'il y avait lieu, pour marquer le titre de l'œuvre citée. Par exemple :

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.

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 qui sert à donner la référence de la citation :

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov

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 parent, comme dans Bootstrap 3, qui est conforme à mon habitude :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Si c'est sémantiquement satisfaisant, c'est parfois gênant à styler, l'élément pouvant être utilisé au sein de la citation elle-même. C'est rare, mais légitime. Comment faire mieux ?

Avec ou ?

Tirant profit les nouveaux éléments HTML5, plusieurs pistes sont explorées. Ainsi pourrait constituer un élément approprié pour « légender » une citation. Par exemple :

Blah blah

Your mum

Mais cela impose d'encapsuler le tout dans son parent obligatoire, , alourdissant le code et ajoutant une signification qui toujours appropriée. L'élément me semble mieux répondre au besoin :

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

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 ?

Pour en savoir plus, je vous invite à consulter ces articles (via @clochix et @johan_ramon) :

• On citing quotations. Again., Bruce Lawson, 2013.
• Quoting and citing with

  , , , and the cite attribute, HTML5 Doctor, juin 2011.