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

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.

Ressources et références

Titre
HTML 5
Auteurs
Ian HICKSON
Auteurs
Robin BERJON
Auteurs
Steve FAULKNER
Auteurs
Travis LEITHEAD
Auteurs
Erika DOYLE NAVARA
Auteurs
Edward O'CONNOR
Auteurs
Silvia PFEIFFER
Editeur
W3C
Date
Chapitre
4.5.4 The blockquote element
Titre
HTML 5
Auteurs
Ian HICKSON
Auteurs
Robin BERJON
Auteurs
Steve FAULKNER
Auteurs
Travis LEITHEAD
Auteurs
Erika DOYLE NAVARA
Auteurs
Edward O'CONNOR
Auteurs
Silvia PFEIFFER
Editeur
W3C
Date
Chapitre
4.5.11 The figure element
Titre
HTML 5
Auteurs
Ian HICKSON
Auteurs
Robin BERJON
Auteurs
Steve FAULKNER
Auteurs
Travis LEITHEAD
Auteurs
Erika DOYLE NAVARA
Auteurs
Edward O'CONNOR
Auteurs
Silvia PFEIFFER
Editeur
W3C
Date
Chapitre
4.6.6 The cite element
Titre
HTML 5
Auteurs
Ian HICKSON
Auteurs
Robin BERJON
Auteurs
Steve FAULKNER
Auteurs
Travis LEITHEAD
Auteurs
Erika DOYLE NAVARA
Auteurs
Edward O'CONNOR
Auteurs
Silvia PFEIFFER
Editeur
W3C
Date
Chapitre
4.6.10 The time element
Titre
La rédaction des références bibliographiques
Auteurs
  • Yves GOUBATIAN
Editeur
Bibliothèque de l'Université Paris 11
Date
Titre
Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute
Auteurs
  • Oli STUDHOLME
Editeur
Html5 Doctor
Date
Titre
Blockquote problems and solutions
Auteurs
  • Oli STUDHOLME
Editeur
oli.jp
Date