Qu’est-ce qu’une page ?

Pour la plupart des dictionnaires français, en 2021, c’est tout d’abord  chacun des deux côtés d’un feuillet, ou d’une feuille, pouvant recevoir un texte et des illustrations . Capture d’écran des définitions du terme “page” selon les dictionnaires en ligne cnrtl.fr, lerobert.com, larousse.fr, ainsi que wikipedia.org S’ensuit une ribambelle de synecdoques (une  page  pouvant désigner seulement son contenu, son texte) ou de métonymies (la feuille seule, peu importe son contenu) : la simple page ne se laisse pas si facilement cerner.

Puis s’y accole une autre notion à caractériser :  en informatique : page Web .
Là, les définitions deviennent plus éparses encore. Je tente un mashup :  ensemble des éléments [...] qui apparaissent à l’écran   via un navigateur Web  ; ensemble d’éléments  stockés sur des serveurs Web  ; ensemble d’éléments  identifié par une URL [littéralement localisateur uniforme de ressources] distincte ...  Capture d’écran des définitions du terme “page”, sous-catégorie “page Web”, selon les dictionnaires en ligne cnrtl.fr, lerobert.com, larousse.fr, ainsi que wikipedia.org

On retiendra dans ce pêle-mêle qu’il s’agit d ‘un ensemble d’éléments. Et effectivement, bien qu’il s’agisse d’une page, la page Web est rarement unie.
Caroline Moureaux-Néry, diplômée de l’Ensci il y a quelques mois, nous explique :
D’abord,  Il faut voir le fichier HTML comme l’ossature du site. On appelle balises les éléments entre <chevrons>. Elles marchent par pair afin de créer une boîte qui contiendra elle-même des éléments, ou d’autres boîtes, à la manière d’une poupée russe. [...] Il faut juste garder en tête que le fichier HTML décrit la structure du site mais ne contient pas les éléments eux-mêmes. [...] Vient ensuite une seconde couche de code, le CSS. C’est lui qui décrit le style graphique de la page. [...] À partir d’un unique code HTML, on peut créer des mises en page complètement différentes. On peut donc voir le CSS comme une surcouche qui transforme les données brutes en mise en page spécifique.   Capture d’écran du code source du présent site, à gauche le code HTML de la page d’accueil (index.html), à droite une portion du code CSS correspondant à cette zone. Le code CSS va ici attribuer à tout texte correspondant à ".couverture h1.main-title" – c’est à dire à l’intérieur de la division "couverture", taggé comme titre n°1 (h1), et dont la classe est "main-title" – une certaine disposition, police, couleur, taille, graisse, etc. Les deux fichiers sont donc fortement interreliés.
Et comme surcouches, s’additionnent aussi, parfois et entre autres, des codes dans d’autres langages, comme le Javascript pour les animations, ainsi que des fichiers de ressources, documents, images, vidéos, typographies, à afficher. Il faut beaucoup de différentes couches de fichiers pour faire marcher une seule page Web. Pour le présent site, composé de 11 pages .html, chaque page nécessite pour fonctionner les trois fichiers .css (pour la mise en forme générale, la mise en forme de la fenêtre popup du menu, et la mise en forme générée à l’impression) , les 3 fichiers .js (un les animations générales, un pour l’animation de la fenêtre popup du menu, et un contenant la bibliothèque jquery), les fichiers contenant la police typographique et ceux des images

Mais ce n’est pas fini ! Certes, certes, mais pour faire marcher une page Web, il ne suffit pas de superposer ces ressources, mais de les intriquer.
Car plusieurs pages HTML peuvent être liées au même fichier CSS ou Javascript. Et chaque page Web peut renvoyer à un nombre illimité d’autres pages Web.
Au sein de chaque fichier, toute information encodée peut être  liée à  et  renvoyer vers  d’autres, que cela soit du même fichier, ou d’un fichier parent.

Mais que se passe-t-il entre tous ces éléments ? Quels liens sont à l’œuvre pour créer un ensemble que nous percevrons uni par la suite ? Passons-nous entre divers calques qui se superposent pour former la page Web apparemment unie, ou passons-nous dans un réseau de liens et références ?

Alors, calque ou réseau ?

L’histoire du digital a tranché pour un non choix, les deux se combinent tout naturellement.
Le langage numérique parle de “layers of code”,  superposition de couches de code   Les représentations communes du numérique font la part belle à une structure en calques. Capture d’écran de 11 résultats de Google Image pour la requête "layered architecture code", décembre 2021 mais tout le principe du ”web” (littéralement “toile” en anglais)  Les représentations communes du numérique font tout autant cas d’une structure en réseau. Capture d’écran de résultats de Google Image pour la requête "web meaning", décembre 2021 qui permet de consulter les pages, et du “Net” (littéralement : filet)  Les représentations communes du numérique font tout autant cas d’une structure en réseau. Capture d’écran de Google Image pour la requête "how does Internet look like" (à quoi ressemble Internet ?), décembre 2021 qui supporte le Web, est fondé sur la mise en réseau.
Comme si l’une des représentations ne pouvait fonctionner sans l’autre, comme si les deux dépendaient l’une de l’autre. Les outils de développeurs (“DOM” : document object model) visualisent tantôt une page en une succession de couches, comme la vue 3D de la barre d’outil de développement de Firefox Capture d’écran de la vue 3D des sites de Mozilla, Google et Superuser en 2012, via le navigateur Mozilla Firefox 11. Cet outil n’est plus disponible depuis Mozilla Firefox 47, tantôt comme un réseau interconnectant des fichiers, comme l’affichage par “Source”  Capture d’écran de l’inspecteur “Sources” de Google Chrome pour le présent site, 2022. Pour l’obtenir, aller dans Afficher > option pour les développeurs > examiner les éléments > Sources. Vous pourrez alors visualiser l’architecture du site directement dans le navigateur, ou voir des fragments du code en cliquant sur les différents fichiers qui le composent. Les fichiers .html, à commencer par index.html, sont l’ossature la plus lisible qui lie chaque élément en une arborescence. Tandis que la vue 3D sera plus orientée sur le contenu, se servant des calques afin d’avoir un aperçu structurel, l’arborescence de Gsource  Visualisation du site develissimo.com avec les outils gource v0.37 & kdenlive. Extrait de "Software Development Visualization", vidéo disponible sur la chaîne Youtube Develissimo, 29 décembre 2012, ou même des "Nodes view" (vue des noeuds)  Capture d’écran de l’outil de développement “DOM node tree viewer 0.0.1” développé par untamed.co.uk, et disponible sur Google Chrome, 5 janvier 2018. Outil de développement "DOM node tree viewer 0.0.1" développé par untamed.co.uk, et disponible sur Google Chrome, 5 janvier 2018. de beaucoup d’outils de développement, se concentrent sur la structure interreliée des documents, n’utilisant que leur nom pour donner un aperçu du contenu.

Traverse, transperce

De tels intrications entre couches et liens traversants me rappellent un objet étrange André Leroi-Gourhan sélectionnant les fiches mécanographiques. Capture d’écran à 12’30’’ de l’émission télévisée "Des bisons, des chevaux et des signes" de la série "Un certain regard", réalisée par Paul Seban, 19 avril 1970, Ina - Institut National de l’Audiovisuel. Entre 12’30’’ et 13’02’'' : suspendu dans la main d’André Leroi-Gourhan dans un reportage de 1970, un paquet de fiches perforées se balancent sur une tige métallique qui les relient… Ces fiches bibliographiques, bien que décrivant des écrits distincts, sont perforées selon des paramètres communs, et la tige les rassemble sous nos yeux en passant par ces trous.  André Leroi-Gourhan sélectionnant les fiches mécanographiques. Extrait vidéo de l’émission télévisée "Des bisons, des chevaux et des signes" de la série "Un certain regard" réalisée par Paul Seban, 19 avril 1970, Ina - Institut National de l’Audiovisuel. Entre 12’30’’ et 13’02’’

J’y retrouve l’interdépendance entre une représentation en calques et une représentation en réseau : ces fiches ne seraient en aucun cas un ensemble, sans le lien de la tige ; quant à la tige, qui a beau être unie, elle a bien peu d’intérêt prise isolément.
Je revois aussi la vue 3D de Firefox : focalisée sur le contenu, elle équivaut à se concentrer sur le texte inscrit par chacune des cartes, sans pour autant les détacher de leur tige. Quant à la vue en nœuds, ou à l’arborescence Gsource : focalisée sur la structure de la page, cela revient à fixer la tige et son passage dans chacune des perforations. D’un sens, une page Web n’est rien d’autre que cela, un empilement transpercé de liens.