Des citations bien balisées

23 mars 2009,
par Romy Têtue

Mots-clefs associés à cet article :

Pour créer une citation de manière correcte sur le Web, nous disposons de trois balises HTML : <q>, <cite> et <blockquote>.

balise type fonction
<blockquote> block délimiter une citation longue, en paragraphe(s)
<q> inline délimiter une citation courte, en ligne, au fil du texte
<cite> inline délimiter une référence, une source

Il s’agit là d’un marquage sémantique du contenu. Comment ça s’affiche ? cela dépend de votre navigateur web et des styles définis par votre webmestre ! Le but de ces balises est seulement de signifier la citation (indépendamment de son apparence visuelle), c’est-à-dire d’identifier comme tel le fragment de texte dont l’auteur est différent de celui de la page.

La balise <blockquote> pour les longues citations

Cette balise introduite en HTML 2.0 est la plus connue, mais aussi souvent la plus mal employée. L’élément <blockquote> s’emploie pour signaler les citations longues, structurées en paragraphe(s) [*]. Exemple :

<blockquote>
  <p>Ne doutez jamais qu’un petit nombre de citoyens volontaires et r&eacute;fl&eacute;chis peut changer le monde&nbsp;; en fait, cela se passe toujours ainsi.</p>
</blockquote>

Ce qui s’affiche ici de la sorte :

Ne doutez jamais qu’un petit nombre de citoyens volontaires et réfléchis peut changer le monde ; en fait, cela se passe toujours ainsi.

Cette balise peut contenir plusieurs paragraphes et bien d’autres balises HTML, y compris un autre <blockquote>. D’ailleurs, en XHTML, l’élément <blockquote> doit contenir au moins un élément de type block.

En général, les navigateurs affichent les <blockquote> en retrait, comme dans la littérature traditionnelle : les citations sont décalées par rapport au texte principal dans un bloc de texte indenté. Mais ce n’est pas toujours ainsi, car le rendu visuel dépend du navigateur web utilisé et du style défini par le webmestre [1]. Remarquez que, si l’on souhaite en avoir, les guillemets doivent ici être saisis manuellement.

La balise <q> pour une citation courte dans la ligne

L’élément <q>, plus récent, puisqu’introduit en HTML 4.01, est censé être utilisé pour des courtes citations, en ligne, ne nécessitant pas de saut de paragraphe [*]. Ne mettez pas de guillemet, car c’est au navigateur de les ajouter à l’affichage. Notez que vous pouvez imbriquer ces citations. Exemple :

Quand tu dis : <q>Je n'ai croisé que le <q>Grand Blond</q> mais pas sa chaussure noire</q>, tu oublies quand même quelque chose.

Ce qui s’affiche ici de la sorte :

Quand tu dis : Je n’ai croisé que le Grand Blond mais pas sa chaussure noire, tu oublies quand même quelque chose.

Votre navigateur devrait afficher l’élément <q> avec des guillemets ouvrants et fermants [2]. Mais les différences d’interprétation des navigateurs poussent certains à ignorer la balise <q> et préférer saisir les guillemets dans le texte, afin de s’assurer d’un rendu identique sur toutes les plate-formes.

La balise <cite> pour indiquer une référence

Moins évidente, souvent incomprise et confondue avec l’attribut homonyme, la balise <cite> contient un extrait ou une référence vers une autre source [**]. Elle s’emploie pour citer le titre d’une œuvre : livre, film, script, émission, expo, etc.. Elle est généralement présentée en italique. Exemple :

Le film <cite lang="it">Morte a Venezia</cite> de Luchino Visconti est une adaptation de la nouvelle <cite lang="de">Der Tod in Venedig</cite> de Thomas Mann.

Ce qui s’affiche ici de la sorte :

Le film Morte a Venezia de Luchino Visconti est une adaptation de la nouvelle Der Tod in Venedig de Thomas Mann.

Si besoin est, les autres éléments de référence (nom de l’auteur, année, édition, copyright, etc.) seront balisés de <i> ou, mieux, de <span> microformatés.

Encore mieux : renseignez les attributs

Ces balises gagneront à être complétées par les attributs lang, cite et title. Examinons cet exemple de citation :

<p><q cite="http://fr.wikipedia.org/wiki/To_Be_or_Not_to_Be" title="Hamlet" lang="en">To Be or Not to Be</q> est une phrase anglaise emblématique du théâtre, extraite de la pièce <cite>Hamlet</cite> de William Shakespeare.</p>

Ce qui s’affiche ici de la sorte :

To Be or Not to Be est une phrase anglaise emblématique du théâtre, extraite de la pièce Hamlet de William Shakespeare.

Remarquez que le contenu des attributs n’apparaît pas à l’écran. Il n’est donc pas négligeable d’indiquer ces informations après de la citation, à la suite du <q> ou directement à l’intérieur du <blockquote>.

Attribut cite="..."

Si une citation est disponible sur Internet, vous pouvez mentionner l’adresse URI de la source dans l’attribut cite="..." des éléments <q> et <blockquote>. La valeur de cet attribut est une URL qui indique la page web d’où la citation (textuelle ou iconique) est extraite.

Cet attribut étant destiné à fournir des informations sur l’origine de la citation [*], certains y mentionnent l’auteur, ex. : <q cite="Descartes" title="Les méditations métaphysiques">.

Mais l’information contenue dans cet attribut reste actuellement inexploitée par les différents navigateurs.

Attribut title="..."

Il sert à fournir une information complémentaire, qui apparaîtra au survol de la souris, en infobulle. Certains y indiquent donc le titre de l’œuvre citée. Mais est-ce vraiment une bonne pratique ?

Indiquez la lang="..." !

Lorsque la langue de la citation est différente de la langue de la page, il faut le signaler par les attributs lang="..." et, s’il y a lieu, dir="..." (cf. : Bien préciser la langue d’une page web). Cette précision est très utile pour le référencement et les lecteurs vocaux.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 23 mars 2009 à 22:42, par Pierre En réponse à : Des citations bien balisées

    Merci pour cette mise au point : j’ignorais complètement le rôle et la façon d’utiliser la balise cite ! D’ailleurs, je me demandais justement quelle était la meilleure façon de noter le nom d’un film ou d’un livre... voilà ma réponse !

  • Le 27 mars 2009 à 21:48, par baroug En réponse à : Des citations bien balisées

    C’est pas un peu impossible à tenir ? À moins d’avoir un plugin quelconque qui proposerait des raccourcis simples (je pense au cas de spip) qui produiraient ces balises, j’imagine difficilement les rédacteurs d’un site, même bien formés, rentrer ces belles balises systématiquement. À moins de disposer de beaucoup de temps.

    C’est un problème des balises sémantiques à mon avis : tant qu’on reste dans le gabarit, qu’un bon webmestre se casse le cul à en mettre partout, ça parait bon et souhaitable, mais dans les textes à saisir, ça ne me semble vraiment pas évident.

    Par ailleurs, je pense qu’il est bon, dans cette saine démarche logique et standardisée, de respecter les standards existants : on mettra donc dans le style cite un italique, pour les œuvres littéraires, filmiques, les titres de revues… mais du coup on pourrait pas l’utiliser pour les émissions ou les chaines de télé radio…

  • Le 30 mars 2009 à 14:50, par Romy Têtue En réponse à : Des citations bien balisées

    Je connais des rédacteurs qui ont le courage de correctement baliser leurs textes et ils ont bien du mérite car ces balises de citation sont effectivement peu pratiques (et, chose étonnante, inversement moins diverses et nombreuses que les balises permettant de citer du code). Oui, une aide à la saisie serait bienvenue. SPIP, qui est connu pour respecter les conventions typo et faciliter la vie des rédacteurs, gagnerait sans doute à proposer cela.

    Quand à maintenir à l’écran la convention de l’italique pour les titres... c’est plus que pénible à lire sur la majorité des écrans (carrément douloureux sous Windows) et je préfère épargner cela à mes internautes :-P

  • Le 31 mars 2009 à 18:07, par Stéphane Deschamps En réponse à : Des citations bien balisées

    En revanche je ne mets jamais de pointillés sous le cite qui ressemblent trop à un abbr.

    En lisant ton article je les ai machinalement survolés pour aller voir de quoi ils étaient l’abréviation.

    Bref, en deux mots comme en cent : je m’appuie sur la CSS d’origine des navigateurs qui mettent le cite en italique, et ça me convient bien, au final. C’est donc ce que j’ai choisi pour chez moi.

    Et puis ça répond assez bien à une convention bibliographique (de tête je dirais que c’est celle qui est utilisée dans la bibliographie traditionnelle pour une référence à un titre de revue, mais bon, ça fait vingt ans que je n’ai pas fait de biblio).

  • Le 31 mars 2009 à 18:09, par Stéphane Deschamps En réponse à : Des citations bien balisées

    Zut je fais un peu redite par rapport au commentaire précédent.

    Bon allez pour ne pas faire du bruit pour rien : depuis XP et le ClearType, les polices en italique sont assez bien anti-aliasées sous Windows. En tout cas chez moi :)

  • Le 28 mai 2009 à 10:32, par Romy Têtue En réponse à : Des citations bien balisées

    Réjouissez-vous : Bertrand Marne vient de confectionner un plugin SPIP qui facilite la vie du rédacteur, en générant automatiquement le code HTML adapté (<q> ou <blockquote>) sans qu’il ait à s’en préoccuper : « Citations bien balisées ».

  • Le 26 octobre 2009 à 16:05, par Stéphane Deschamps En réponse à : Des citations bien balisées

    Tiens Romy je viens d’aller voir le plugin.

    J’ai l’impression que ça fait partie des moments où il vaut mieux taper q plutôt que de s’embêter à taper quote (mais peut-être que ma vue est déformée parce que justement je tape mon HTML par habitude pour aller plus vite que de spiper/filtrer ?).

  • Le 26 octobre 2009 à 16:54, par Romy Têtue En réponse à : Des citations bien balisées

    Non, d’accord avec toi. Je formule exactement la même critique. Le raccourci SPIP devrait être « <q> » (en conservant « <quote> » pour compatibilité avec l’existant). Mais j’avoue que, pour les citations en ligne, j’ai parfois une préférence pour le guillemetage direct...

  • Le 1er avril 2010 à 17:43, par Romy Têtue En réponse à : Des citations bien balisées

    Suivre aussi cette discussion récente sur le forum d’Alsacreations : Les guillemets c’est sémentique ou pas où, même si l’orthographe défaille, l’on se demande fort à propos y a t il un intéret a faire mettre les quillement par le fauille de style CSS plutot que de taper directement les guillemets ?

  • Le 2 mars 2011 à 15:41, par Ermac Kamdiz En réponse à : Des citations bien balisées

    Je tiens à te féliciter pour ton site qui est merveilleux et dans lequel je viens piocher des éléments pour les cours de développement web que j’enseigne.
    J’ai une petite remarque concernant la balise <cite>, tu cite la spécification en disant « la balise <cite> contient "un extrait ou une référence vers une autre source" »et tu dis ensuite « Elle s’emploie pour citer le titre d’une œuvre » comment comprendre la spécification ?, sont-ce les titres seulement ? j’avais l’habitude de dire à mes étudiants que cette balise est utilisée lorsque l’on cite une oeuvre, un artiste, une référence, marque, entreprise ou autre.
    Parmi les exemples qui sont donnés dans la spécification pour illustrer l’emploi de cette balise, il y a un où la balise encadre le nom de l’auteur :
    Comme le disait <cite>le Général De GAULLE</cite>,
    <Q lang="fr">Je vous ai compris !<Q>

  • Le 29 novembre 2012 à 16:20, par Julie En réponse à : Des citations bien balisées

    Ton article résume bien le problème et c’est justement en lisant celui-ci que j’ai pu comprendre mon erreur et rectifier mon code (histoire relatée sur L’Art SEO des citations)
    Merci encore et à bientôt ;)

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom