À la fin de ce chapitre, vous saurez baliser des citations en ligne et faire des blocs de citation. Vous aurez également appris à signaler un changement de langue et à générer des espaces insécables.
Insérez le code suivant au fichier test.html et visualisez-en le contenu :
<blockquote>
<p>Il est certains esprits dont les sombres pensées sont, d'un
nuage épais, toujours embarrassées; avant donc que d'écrire,
apprenez à penser.</p>
<p>Selon que notre idée est plus ou moins obscure, l'expression
la suit, ou moins nette, ou plus pure.</p>
<p>Ce que l'on conçoit bien s'énonce clairement, et les mots
pour le dire arrivent aisément.</p>
<p>
<cite>Boileau, Art poétique</cite>
</p>
</blockquote>Vous venez de créer un bloc de citation contenant trois paragraphes suivis d'une mention de la source citée.
blockquote vaut pour « bloc de citation ». Pour que le code HTML 5.0 soit valide, le contenu du bloc de citation doit être balisé aussi. Cela reste vrai même si le contenu se limite à un seul paragraphe.
Par défaut, les navigateurs graphiques affichent le contenu d'un bloc de citation avec un retrait à gauche et un retrait à droite, et le contenu de l'élément cite en italique.
Si la citation est dans une langue étrangère, on l'indique comme ceci :
<blockquote lang="en">
<p>To be or not to be. That is the question.</p>
<p>
<cite>Shakespeare, Hamlet</cite>
</p>
</blockquote>Dans l'expression lang="en", lang est un attribut d'élément et en est une valeur d'attribut. En HTML 5.0, les valeurs d'attribut doivent être mises entre simple ou double quotes.
On peut encadrer une valeur d'attribut avec des doubles quotes (") ou des simples quotes ('), mais jamais avec des guillemets français ouvrant («) et fermant (»).
L'élément cite peut être utilisé en dehors du contexte d'une citation. Logiquement, il sert néanmoins toujours à indiquer une source, comme dans l'exemple suivant :
<p>Pour plus d'informations, veuillez vous référer
à la <cite>spécification HTML 5.0</cite>.</p>Les lignes de code suivantes indiquent la manière de faire pour insérer une citation à l'intérieur d'un paragraphe :
<p>Comme disait si bien <cite>Boileau</cite> : <q>Ce qui se
conçoit bien s'énonce clairement, et les mots pour le dire
arrivent aisément.</q></p>L'élément cite sert à baliser la source, tandis que la citation proprement dite est balisée avec l'élément q, qui vaut pour quote.
Les navigateurs sont censés ajouter les guillemets. Comme ils ne le font pas tous, le plus simple consiste à les mettre soi-même et à ne pas utiliser l'élément q.
En français, il faut utiliser les guillemets ouvrant («) et fermant (»). Pour éviter qu'un guillemet ne se retrouve isolé au début ou à la fin d'une ligne, on met une espace insécable après le guillemet ouvrant et une espace insécable avant le guillemet fermant.
Pour générer un guillemet ouvrant, faites Alt+1, 7, 4 en utilisant les chiffres du pavé numérique ; pour générer un guillemet fermant, faites Alt+1, 7, 5. Pour générer une espace insécable, utilisez le code suivant, les explications viendront plus tard :  .
En intégrant les remarques qui précèdent, le code HTML de la citation initiale ressemblera finalement à ceci :
<p>Comme disait si bien <cite>Boileau</cite> : <q>« Ce qui
se conçoit bien s'énonce clairement, et les mots pour le dire
arrivent aisément. »</q></p>On pourra utiliser la règle de style suivante pour éviter les doublons dans les navigateurs qui ajouteront les guillemets comme supposé :
q {quotes:' '' ''''';}Vous mettrez cette règle dans un fichier externe que vous appellerez ensuite via un élément link, selon la méthode décrite à la section 6.3.
Comme il faut prendre soin de signaler tout changement de langue, une citation anglaise dans un paragraphe en français ressemblera à ceci :
<p>Le célèbre <q lang="en">« To be or not to be. »</q> du
non moins célèbre dramaturge anglais signifie…</p>
Il existe aussi un attribut cite, destiné à fournir des informations sur l'origine de la citation. Il peut aussi bien être utilisé dans l'élément blockquote que dans l'élément q. On en fait usage comme ceci :
<blockquote lang="en" cite="http://www.davidpbrown.co.uk/poetry/
william-shakespeare-3.html">
<p>To be or not to be. That is the question.</p>
<p>
<cite>Shakespeare, Hamlet</cite>
</p>
</blockquote>Plusieurs attributs d'éléments peuvent se retrouver en même temps à l'intérieur d'un même élément. L'ordre dans lequel ils se trouvent n'a aucune importance.
Vous savez maintenant vous servir des éléments blockquote, q et cite pour insérer des citations et des références dans vos textes.
Par la même occasion, vous avez appris à générer des espaces insécables, ainsi que des guillemets français ouvrants et fermants.
Vous avez été sensibilisé aux changements de langue et vous savez maintenant comment vous y prendre pour les signaler.