HTML : footnotes

Attention : les informations contenues dans ce document sont anciennes et peuvent être obsolètes.

Internet, en tant que nouveau vecteur de contenu rédactionnel, nécessite de repenser des modèles d'édition créés pour d'autres supports. C'est le cas par exemple des « notes de bas de page » : ont-elles encore un sens dans une publication sur la toile ? Et comment les présenter ?

Internet est un nouveau médium encore en construction, soit. Mais il ne fait fondamentalement que fusionner en une seule entité des modes de communications qui existe déjà : du texte, des images (animées ou non), du son. Ce « syncrétisme médiatique » a bien-sur ses propres qualités et défauts, et les propriétés résultantes sont en général plus riches et variées que la somme des propriétés individuelles. Ce qui laisse penser qu'il faudrait peut-être redéfinir certains code de présentation de ces formes d'expressions.

C'est par exemple le cas de ce qu'on appelle communément les « notes de bas de page ». Pourquoi considérer que ces notes devraient effectivement être placées au bas d'une page ? A cause de la « tradition » qui prévaut dans le monde de l'édition ?! La publication d'un texte sur le web n'offrirait-elle pas d'autres moyens de représenter ce genre de contenu, mieux adapté à la lecture à l'écran ?! C'est en substance la réflexion menée par Andreas Bovens il y a quelques mois, ce qui l'a amené à écrire l'article « From footnotes to sidenotes ».

Certains membres de la liste de discussion du w3c ont estimé quant à eux que la note de bas de page n'était pas indispensable, que les langages web permettaient de s'en passer facilement.

C'est en parcourant ces deux ressources lors de la mise en place des notes de bas de page des articles publiés sur ce site que j'en suis venu à m'intéresser à la question. Petit état des lieux des méthodes à la disposition de l'internaute.

Qu'est-ce qu'une note de bas de page ?

Définissons d'abord de quoi nous parlons, même s'il n'est pas question ici d'entrer dans le détail de la sémiotique de la note de bas de page, exercice dont je serais d'ailleurs bien incapable.

Précisons donc que l'expression « note de bas de page » est purement formelle : dans le domaine de l'édition, ces notes peuvent effectivement se retrouver au bas d'une page mais tout aussi bien à la fin d'un chapitre, en fin de volume ou même dans les marges. Elle rappelle simplement que ces notes sont ce que l'on peut appeler génériquement des « remarques » placées en dehors du texte principal.

Pour simplifier le propos, on pourrait aussi classer ces remarques dans deux grandes catégories : les notes référentes et les notes explicatives. Les notes référentes servent à citer la source de ce que l'on vient d'écrire, par un rappel bibliographique, une reproduction totale ou partielle d'une oeuvre extérieure, etc. Les notes explicatives sont utilisées pour décrire ce à quoi elles se réfèrent, l'approfondir ou bien développer un point annexe.

Enfin, il est important de préciser qu'il existe un autre mode de rédaction : la référence ou l'explication ne sont pas obligatoirement traitées dans une note de bas de page. Certains auteurs préfèrent en effet citer leurs sources directement dans le texte (exemple : Bernard Sergent, Les Indo-européens. Histoire, langue, mythes, Bibliothèque scientifique Payot, 1995, Paris). D'autres explorent ou expliquent en détail le sens de leurs écrits « in situ », même si cela amène à de longues digressions (exemple : Jean Bottéro, Mésopotamie l'écriture, la raison et les dieux, Folio Histoire, 1997).

La note n'est donc pas une forme rédactionnelle obligatoire ou sans alternatives : elle est un choix de présentation, plus ou moins imposé il est vrai par des impératifs techniques.

Les outils html pour insérer une note

Le lien web remplit une partie des fonctions de la note, du moins celle qui sert de référent bibliographique. Ainsi, au lieu de signaler une source par une note de bas de page, il suffit de la lier au texte par un lien pointant vers la dite source (si celle-ci est disponible en ligne, bien sur).

Sortir la note du flux du texte

Mais le lien peut aussi servir à représenter la note d'une manière plus « classique » telle qu'on la connaît dans le monde de l'édition. On place d'abord l'appel de la note dans le corps du texte, en exposant si l'on souhaite aussi reprendre la mise en page classique. On écrit ensuite en fin de page le texte de la dite note, en rappelant son numéro et en faisant un lien de retour vers l'appel, ce qui permet au lecteur de revenir au texte original :

<p>
    On connaît aujourd'hui une multitude de planètes 
    extrasolaires<a href="#fn1" id="afn1">[1]</a>.
</p>
(...)
<p>
    <a href="#afn1" id="fn1">[1]<a> Planètes orbitant 
    autour d'autres étoiles que le Soleil.
</p>
Utilisation d'un lien pour sortir une note du flux du texte.

C'est typiquement la méthode adoptée par certains gestionnaires de contenu web comme Spip.

Insérer une note dans le texte lui-même

Le langage HTML permet aussi d'insérer une « note » explicative simple dans le flux du texte avec la balise <dfn> par exemple(1) :

<p>Les <dfn>planètes extrasolaires</dfn> sont des planètes orbitant autour d'autres étoiles que le Soleil. On en connaît aujourd'hui une multitude.</p>
Utilisation de l'élément dfn pour insérer une note explicative dans le flux du texte.

Idem pour les citations bibliographiques ou de sources qui peuvent être intégrées au texte lui-même avec des balises en ligne comme <cite> ou <q> et une balise bloc comme <blockquote>(2).

On voit que les éléments du langage html permettent d'adopter les deux modes de rédaction en plaçant les notes soit en dehors du texte, soit en les y laissant. L'utilisation de notes de bas de page est donc là aussi et avant tout un « choix éditorial ». Quand elles sont utilisées, c'est que l'auteur considère que son propos sera plus clair de cette manière, ou que des contraintes techniques lui impose ce format d'annotation (notes trop longues par exemple), ou encore simplement parce qu'il préfère cette méthode à la rédaction linéaire.

Dans le cas d'une note de bas de page classique, la note sera extraite du flux du texte. Donc, si l'on choisit cette forme d'annotations, celles-ci doivent être placées en dehors du texte auquel elles se réfèrent. Que vous les affichiez ensuite en bas de page, dans les marges ou je ne sais où encore, peu importe (on peut même envisager de placer ces notes dans un fichier annexe). La présentation sera l'affaire des css et pas de la structure sémantique de la page web.

La solution d'Andreas Bovens

Andreas Bovens n'étant pas vraiment satisfait de la méthode à base du lien hypertexte, il a choisi de développer une autre technique plutôt pertinente, mais qui pose quelques problèmes de structure.

Principe de la technique

Le principe de sa technique est simple : il consiste à placer la note directement à la suite du texte auquel elle se réfère mais de l'afficher en dehors de ce texte. Un mixte des deux approches décrites ci-dessus en quelque sorte :

<p>On connaît aujourd'hui une multitude de <a href="#fn1">planètes extrasolaires</a> <span id="fn1">[[Planètes orbitant autour d'autres étoiles que le Soleil.]]</span>.</p>

On habille ensuite le tout avec des propriétés CSS de niveau 3, qui ne sont encore qu'au stade de développement (et que peu de navigateurs comprennent) : on masque le texte de la note et on le fait apparaître dans la marge de la page seulement lorsque le lecteur clique sur le lien de la note.

Avantages et inconvénients

L'avantage majeur de cette méthode est évident : la rédaction de la note est grandement facilitée, tout comme sa lecture. Pourtant, la technique est ambiguë car elle nécessite l'application d'une feuille de styles.

Si on applique les styles CSS, les notes apparaissent comme des notes classiques, des notes « latérales », et sont considérées comme un contenu extérieur au flux du texte. Par contre, si l'on désactive les styles, ces mêmes notes seront maintenant intégrés au flux du texte. Il n'est alors pas nécessaire d'utiliser ce système d'annotations puisque, comme expliqué plus haut, on peut très bien commentés un texte (références bibliographiques ou autres) avec des balises dédiées. Le lien hypertexte de la note n'a plus de sens.

La technique d'Andreas Bovens, pour qu'elle soit pertinente, nécessite donc obligatoirement l'application d'une feuille de styles pour afficher le contenu du document web. Or, les recommandations du W3C sont plutôt claires à ce sujet.

  1. Organiser les documents de manière à ce qu'ils puissent être lus sans feuilles de style. Par exemple, lorsque un document HTML est restitué sans la feuille de style lui étant associée, il doit rester lisible.

Lorsque le contenu est organisé de manière logique, il sera restitué de manière compréhensible lorsque les feuilles de style sont désactivées ou non supportées.

« Directives pour l'accessibilité aux contenus Web (version 1.0) » (Traducteur : Karl Dubost).

Alors, le contenu reste accessible sans feuille de styles, bien-sur, mais la structure du document est perturbée par son absence. Le sens en est aussi légèrement modifié car on ne rédige pas de la même manière une annotation destinée à s'inclure dans le fil du texte et une annotation qui se retrouve dans une note de bas de page. Voici donc une belle illustration des interactions subtiles entre contenu, structure et présentation d'un document web(3). Et on comprend mieux pourquoi il est si important de penser les pages html en faisant une distinction claire entre ces trois éléments.

Comme je l'ai dit plus haut, la présentation de la note doit être indépendante de la manière dont elle sera rédigée, intégrée ou non au texte. Si la technique d'Andreas Bovens possède un indéniable avantage, celui d'afficher une note de bas de page près du texte auquel elle se réfère, la construction elle peut apparaître plus discutable.

Et cette critique peut être formulée pour toutes les techniques qui, utilisant les CSS, affichent des notes hors du flux normal du texte alors qu'elles y sont intégrés dans la structure html.

Une autre version de la méthode de Bovens

Mais l'utilisation du pseudo-élément target reste très pertinente, et on pourrait l'utiliser non pas comme Andreas Bovens le fait, mais en l'appliquant au code HTML d'une note classique. Ainsi la structure du document - une note extérieure au flux principal du texte - est respectée que vous appliquiez ou non la feuille de styles. Si vous appliquez les styles CSS, cliquer sur l'appel de la note affichera la note à côté du texte auquel elle se réfère ; si les styles ne sont pas appliqués, le click vous emmènera vers le bas de la page comme dans l'exemple 1.

Ici, les styles interviennent bien uniquement dans la présentation du contenu, et n'influencent pas sa construction.

Le futur

Il y a sans doute d'autres manières d'envisager les notes de bas de page auxquelles je n'ai pas pensé, mais toute technique se heurte à un moment ou à un autre à une lacune inhérente à la publication web.

J'en avais déjà fait la remarque : si le langage HTML possède de nombreuses balises assurant la structuration d'un document (titres hiérarchisés, paragraphes, listes, etc.), certaines font encore cruellement défaut. Alors, si une balise « chapeau » pour les articles peut apparaître un peu trop spécifique, une balise « note », peu importe la forme qu'elle prendrait, aurait une portée beaucoup plus universelle et ne serait pas inutile.

Une balise spécifiquement dédiée avait déjà été envisagée lors de l'écriture du HTML 3. Il semble aussi que quelque chose du genre <footnote> ne soit pas dénué d'intérêt dans le futur langage XHTML 2. Resterait des problèmes techniques qui n'ont pas encore été résolus, comme la numérotation automatique des notes, leur insertion au cours de la création du document web, etc.

Pour le moment, il semble donc que la technique du lien vers une note de bas de page soit la manière la plus juste de penser cette forme de rédaction. On pourra y appliquer des propriétés CSS facilitant leur lecture, comme l'adaptation que j'ai faite de la technique d'Andreas Bovens, mais les intégrer au texte lui-même pour en faciliter l'écriture, puis de les afficher comme des notes de bas de page classiques, serait une erreur de construction du contenu.

Références

Titre
From footnotes to sidenotes
Auteurs
  • Andreas BOVENS
Éditeur
WebGraphics
Date
Titre
Directives pour l'accessibilité aux contenus Web (version 1.0)
Auteurs
  • W. CHISHOLM
  • G. VANDERHEIDEN
  • I. JACOBS
Éditeur
W3C
Date
Remarque
Traduction française : Karl Dubost.
Titre
De la note de bas de page au lien hypertexte: philosophie de l'identique et stylistique de l'écart
Auteurs
  • O. ERTZSCHEID
Éditeur
Archives SIC
Date
Titre
Scholarship on the web : managing and presenting footnotes and endnotes
Auteurs
  • P. PETRIK
Éditeur
Archiva.net
Remarque
Cet essai, découvert alors que je finissais l'écriture de l'article, est un excellent récapitulatif des techniques de mise en forme des notes de bas de page.