HTML : citations et références

Date
Catégories
Mot-clés

Une série d'articles ces derniers jours m'a amené à aborder la question des citations dans un document web, et à expliquer les techniques que j'utilise depuis plusieurs années.

Citations

La citation dans une phrase se fait grâce à l'élément « quote » (q) et se traduit graphiquement par un texte entouré de guillemets. La citation d'un bloc, un paragraphe entier par exemple, se fait elle grâce à l'élément blockquote, qui est rendu par défaut dans les navigateurs web par une indentation gauche du texte.

On part du principe que ce qui est à l'intérieur d'un blockquote est ce qui est cité, et que la source de cette citation doit être signalée par l'attribut cite :

The blockquote element represents a section that is quoted from another source.

Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

The blockquote element

Donc, si l'on souhaite préciser dans le document web d'où vient la citation (et pas uniquement à travers l'attribut cite), il nous faut construire une structure HTML qui englobe le blockquote. En HTML4, j'utilisais un markup générique avec div et paragraphe :

<div class="citation">
    <blockquote cite="SOURCE-URI">
        CITATION
    </blockquote>
    <p class="caption">SOURCE</p>
</div>
Code HTML 4 pour associer citation et source.

Avec le HTML5, nous avons à disposition l'élément plus spécifique figure qui peut remplir ce rôle :

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

The figure element
<figure>
    <blockquote cite="SOURCE-URI">
        CITATION
    </blockquote>
    <figcaption>SOURCE</figcaption>
</figure>
Code HTML5 pour associer citation et source.

j'ai tendance depuis 2 ans à utiliser l'élément figure pour tout type de contenu qui nécessite une légende : images, code, citations, etc.

Références bibiographiques

La norme ISO 690

Un autre aspect de la citation de source est la manière d'envisager les références bibliographiques. Nous prendrons pour exemple un format de citation simple, inspiré par la norme de citation ISO 690:1987, et qui comprend le nom de l'auteur, le titre, l'éditeur et la date d'édition :

AUTHOR. TITLE. PUBLISHER, DATE.
Format simple de référence bibliographique.

Il n'existe pas vraiment d'éléments dédiés pour ce genre de références ; on peut néanmoins en utiliser quelque uns pour certaines informations et s'appuyer sur les éléments génériques pour le reste. Le titre par exemple peut être rendu par un élément cite :

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

The cite element.

La date de publication d'un ouvrage peut être rendue avec l'élément time :

The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

The time element.

Au final, on pourra rendre la réference soit sous forme de paragraphe, soit sous forme de liste de description :

<p class="ref">
    <span class="author">AUTHOR</span>.
    <cite class="title">TITLE</cite>.
    <span class="pub">PUBLISHER</span>,
    <time class="date">DATE</time>.
</p>
Référence d'un document sous forme de paragraphe.
<dl class="ref">
    <dt class="author">Author</dt>
    <dd>AUTHOR</dd>
    <dt class="title">Title</dt>
    <dd><cite>TITLE</cite></dd>
    <dt class="pub">Publisher</dt>
    <dd>PUBLISHER</dd>
    <dt class="date">Date</dt>
    <dd><time>DATE</time></dd>
</dl>
Référence d'un document sous forme de liste de desription.

Les références dans Wikipédia

(LANG) AUTHOR, TITLE, PUBLISHER, DATE (ISBN)
Version simplifiée de la citation bibliographique dans Wikipédia
  • La langue (LANG) rendu avec un élément <abbr>
  • Titre rendu avec un élément <cite>

Ressources et références

Titre
HTML 5
Chapitre
4.5.4 The blockquote element
Auteurs
Hickson IAN
Auteurs
Berjon ROBIN
Auteurs
Faulkner STEVE
Auteurs
Leithead TRAVIS
Auteurs
Doyle Navara ERIKA
Auteurs
O'Connor EDWARD
Auteurs
Pfeiffer SILVIA
Editeur
W3C
Date
Titre
HTML 5
Chapitre
4.5.11 The figure element
Auteurs
Hickson IAN
Auteurs
Berjon ROBIN
Auteurs
Faulkner STEVE
Auteurs
Leithead TRAVIS
Auteurs
Doyle Navara ERIKA
Auteurs
O'Connor EDWARD
Auteurs
Pfeiffer SILVIA
Editeur
W3C
Date
Titre
HTML 5
Chapitre
4.6.6 The cite element
Auteurs
Hickson IAN
Auteurs
Berjon ROBIN
Auteurs
Faulkner STEVE
Auteurs
Leithead TRAVIS
Auteurs
Doyle Navara ERIKA
Auteurs
O'Connor EDWARD
Auteurs
Pfeiffer SILVIA
Editeur
W3C
Date
Titre
HTML 5
Chapitre
4.6.10 The time element
Auteurs
Hickson IAN
Auteurs
Berjon ROBIN
Auteurs
Faulkner STEVE
Auteurs
Leithead TRAVIS
Auteurs
Doyle Navara ERIKA
Auteurs
O'Connor EDWARD
Auteurs
Pfeiffer SILVIA
Editeur
W3C
Date
Titre
Wikipédia:Conventions bibliographiques
Éditeur
Wikipédia
Titre
La rédaction des références bibliographiques
Auteurs
  • Yves GOUBATIAN
Éditeur
Bibliothèque de l'Université Paris 11
Date
Titre
Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute
Auteurs
  • Oli STUDHOLME
Éditeur
Html5 Doctor
Date
Titre
Blockquote problems and solutions
Auteurs
  • Oli STUDHOLME
Éditeur
oli.jp
Date