Temps de lecture : 
En 1990 par Tim Berners-Lee, l’inventeur du Web met en ligne le premier site web de l’histoire sur l’URL : http://nxoc01.cern.ch/hypertext/WWW/TheProject.html. Ce site a ensuite évolué, car il a été régulièrement mis à jour. Une copie de son dernier état, datant de 1993, est consultable sur le site du Cern, l'Organisation européenne pour la recherche nucléaire, pour lequel travaillait le physicien britannique Tim Berners-Lee en 1990.
Mais depuis le début des années 1990, le HTML a évolué, et aujourd’hui Tim Berners-Lee ne coderait plus exactement les pages de son site de la même façon.
Pour faire un peu d’histoire, attardons-nous un peu sur le code source de la fameuse première page de l’histoire du Web, désormais accessible sur le site du Cern via l’URL : http://info.cern.ch/hypertext/WWW/TheProject.html
Nous allons regarder comment ce précieux document historique est codé, puis nous verrons ensuite un exemple de manière dont on pourrait coder la même page aujourd’hui. Nous reviendrons enfin sur ce qui a changé.
Le code de la première page HTML de l’histoire du web
<HEADER>
<TITLE>The World Wide Web project</TITLE>
<NEXTIDN="55">
</HEADER>
<BODY>
<H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A
NAME=0HREF="WhatIs.html">
hypermedia</A> information retrieval
initiative aiming to give universal
access to a large universe of documents.<P>
Everything there is online about
W3 is linked directly or indirectly
to this document, including an<A
NAME=24HREF="Summary.html">executive
summary</A>of the project,<A
NAME=29HREF="Administration/Mailing/Overview.html">Mailing lists</A>
,<A
NAME=30HREF="Policy.html">Policy</A>, November's<A
NAME=34HREF="News/9211.html">W3 news</A>,
<A
NAME=41HREF="FAQ/List.html">Frequently Asked Questions</A>.
<DL>
<DT><A
NAME=44HREF="../DataSources/Top.html">What's out there?</A>
<DD>Pointers to the
world's online information,<A
NAME=45HREF="../DataSources/bySubject/Overview.html">subjects</A>
,<A
NAME=z54HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc.
<DT><A
NAME=46HREF="Help.html">Help</A>
<DD>on the browser you are using
<DT><A
NAME=13HREF="Status.html">Software Products</A>
<DD>A list of W3 project
components and their current state.
(e.g.<A
NAME=27HREF="LineMode/Browser.html">Line Mode</A>,X11<A
NAME=35HREF="Status.html#35">Viola</A>,<A
NAME=26HREF="NeXT/WorldWideWeb.html">NeXTStep</A>
,<A
NAME=25HREF="Daemon/Overview.html">Servers</A>,<A
NAME=51HREF="Tools/Overview.html">Tools</A>,<A
NAME=53HREF="MailRobot/Overview.html">Mail robot</A>,<A
NAME=52HREF="Status.html#57">
Library</A>)
<DT><A
NAME=47HREF="Technical.html">Technical</A>
<DD>Details of protocols, formats,
program internals etc
<DT><A
NAME=40HREF="Bibliography.html">Bibliography</A>
<DD>Paper documentation
on W3 and references.
<DT><A
NAME=14HREF="People.html">People</A>
<DD>A list of some people involved
in the project.
<DT><A
NAME=15HREF="History.html">History</A>
<DD> A summary of the history
of the project.
<DT><A
NAME=37HREF="Helping.html">How can I help</A>?
<DD>If you would like
to support the web..
<DT><A
NAME=48HREF="../README.html">Getting code</A>
<DD>Getting the code by<A
NAME=49HREF="LineMode/Defaults/Distribution.html">
anonymous FTP</A>, etc.</A>
</DL>
</BODY>
Le code de la première page HTML de l’histoire du web actualisé
Voici un exemple de manière dont on pourrait coder la même page aujourd’hui :
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>The World Wide Web project</title>
</head>
<body>
<h1>World Wide Web</h1>
<h2>The WorldWideWeb (W3) is a wide-area<aid="0"href="WhatIs.html">hypermedia</a>information retrieval initiative aiming to give universal access to a large universe of documents.</h2>
<p>Everything there is online about W3 is linked directly or indirectly to this document, including an<aid="24"href="Summary.html">executive summary</a>of the project,<aid="29"href="Administration/Mailing/Overview.html">Mailing lists</a>,<aid="30"href="Policy.html">Policy</a>, November’s<aid="34"href="News/9211.html">W3 news</a>,<aid="41"href="FAQ/List.html">Frequently Asked Questions</a>.</p>
<dl>
<dt><aid="44"href="../DataSources/Top.html">What’s out there?</a></dt>
<dd>Pointers to the world’s online information,<aid="45"href="../DataSources/bySubject/Overview.html">subjects</a>,<aid="z54"href="../DataSources/WWW/Servers.html">W3 servers</a>, etc.</dd>
<dt><aid="46"href="Help.html">Help</a></dt>
<dd>on the browser you are using</dd>
<dt><aid="13"href="Status.html">Software Products</a></dt>
<dd>A list of W3 project components and their current state. (e.g.<aid="27"href="LineMode/Browser.html">Line Mode</a>, X11<aid="35"href="Status.html#35">Viola</a>,<aid="26"href="NeXT/WorldWideWeb.html">NeXTStep</a>,<aid="25"href="Daemon/Overview.html">Servers</a>,<aid="51"href="Tools/Overview.html">Tools</a>,<aid="53"href="MailRobot/Overview.html">Mail robot</a>,<aid="52"href="Status.html#57">Library</a>)</dd>
<dt><aid="47"href="Technical.html">Technical</a></dt>
<dd>Details of protocols, formats, program internals etc</dd>
<dt><aid="40"href="Bibliography.html">Bibliography</a></dt>
<dd>Paper documentation on W3 and references.</dd>
<dt><aid="14"href="People.html">People</a></dt>
<dd>A list of some people involved in the project.</dd>
<dt><aid="15"href="History.html">History</a></dt>
<dd>A summary of the history of the project.</dd>
<dt><aid="37"href="Helping.html">How can I help</a>?</dt>
<dd>If you would like to support the web..</dd>
<dt><aid="48"href="../README.html">Getting code</a></dt>
<dd>Getting the code by<aid="49"href="LineMode/Defaults/Distribution.html">anonymous FTP</a>, etc.</dd>
</dl>
</body>
</html>
Ce qui a changé depuis
- Les majuscules
On peut voir qu’à l’époque les balises et leurs attributs étaient écrits en majuscules. En 2000, l’évolution du HTML a rendu obligatoire leur écriture en minuscules. Aujourd’hui, avec le HTML5, l’écriture en minuscules n’est plus obligatoire, mais l’habitude semble avoir été prise… - L’absence de balise <html>
Il n’y avait pas de balises <html> et </html> pour délimiter l’ensemble du document, ni de déclaration de doctype, ni de déclaration d’un jeu de caractères. - La balise <HEADER>
L’ancêtre de la balise <head> était <HEADER>. Comme cela a été vu dans « Le HTML par lui-même » au moment d’évoquer la dimension sémantique du HTML, la balise <header> a aujourd’hui changé de sens et désigne en HTML5 une partie du corps de la page. Elle délimite l’en-tête visible de la page. - Des balises laissées ouvertes
Il n’était pas obligatoire de mettre des balises fermantes ! On voit au début du code une balise <p> ouvrante qui ne sera jamais fermée par une balise </p> (cette balise était utilisée comme une balise <br/>, pour faire un saut de ligne). De même plus loin pour la série de balises <dt> et <dd> : ces deux balises existent toujours et ont été rapidement évoquées dans « Le HTML par lui-même » quand ont été passées en revue les principales balises permettant l’insertion de texte. Les balises <dl>, <dt> et <dd> permettent l’insertion d’une liste de descriptions.
<dl> marque le début de la liste et </dl> en marque la fin. Les balises <dt> insèrent chacun des termes à décrire et les balises <dd> insèrent chacune de leurs descriptions. - Les anciennes ancres HTML
Les ancres HTML étaient créées avec l’attribut « name » (et non pas l’attribut « id »), et cet attribut « name » recevait une valeur numérique (sans que celle-ci soit mise entre guillemets).
Il s’agit bien d’ancres HTML : on peut s’en convaincre en tapant http://www.w3.org/history/19921103-hypertext/hypertext/www/theproject.html#49 dans la barre d’adresse de son navigateur (« 49 » correspond à l’identifiant de la dernière ancre du document).
Bien sûr, pour pouvoir s’en rendre compte, il faut que la fin du contenu de la page soit sous la ligne de flottaison (autrement dit, il faut être obligé de faire défiler la page pour en voir la fin), et pour cela, il peut être nécessaire de rétrécir la taille de la fenêtre de son navigateur si on a un grand écran, jusqu’à faire apparaître la barre de défilement sur le côté droit du navigateur. - La balise <NEXTID>
La balise <NEXTID N="55">, juste après la balise <TITLE>, est une balise qui a aujourd’hui totalement disparu. Il s’agissait d’un aide-mémoire permettant d’indiquer le prochain identifiant avec lequel créer la prochaine ancre HTML (« next id » peut se traduire par « prochain identifiant »).
Ce qui distingue un document HTML d’un document imprimé, c’est qu’on peut le changer et le mettre à jour indéfiniment, en y ajoutant et en y retranchant du contenu. On voit dans cette première page du web qu’au fur et à mesure que des nouvelles versions de la page ont été mises en ligne entre 1990 et 1992 (accessible sur le site du W3C, le World Wide Web Consortium, un organisme crée par Tim Berners-Lee pour gérer l'évolution du Web), du contenu comprenant pas moins de trentre ancres HTML a été effacé, correspondant aux valeurs numériques suivantes : 1-12, 16-23, 28, 31-33, 36, 38, 39, 42, 43, 50 (car ne restent aujourd’hui dans le code que les ancres correspondant aux valeurs 0, 13-15, 24-27, 29, 30, 34, 35, 37, 40, 41, 44-49, 51-54).
Si on devait aujourd’hui ajouter du contenu dans cette page avec une nouvelle ancre, la balise <NEXTID> nous rappelle qu’il faudra utiliser la valeur « 55 » qui n’a pas encore été utilisée (la dernière à avoir été utilisée était « 54 ») et ne surtout pas réutiliser aucune des valeurs numériques que nous venons de citer. En effet, si pour créer une nouvelle ancre on réattribuait par exemple la valeur « 42 », qui avait déjà été utilisée jadis pour créer une ancre qui depuis a été effacée, et qu’un autre site sur le Web avait fait et gardé un lien vers cette ancre avant qu’elle ne soit effacée (http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html#42), ce lien pointerait aujourd’hui vers un contenu totalement différent. La balise <NEXTID> fournit un aide-mémoire en indiquant la prochaine valeur numérique à utiliser pour créer une ancre afin d’éviter ce cas de figure. L’idée est qu’il vaut mieux un lien mort qu’un lien vers un contenu qui aurait changé.
On se rend compte aussi ici qu’à l’époque la navigation à l’aide des ancres semble avoir été beaucoup plus importante qu’aujourd’hui. Cela s’explique peut-être parce que la résolution d’écran la plus répandue à l’époque était beaucoup plus basse : 640 × 480 pixels dans les années 1990 contre 1366 × 768 pixels au début des années 2010. On ne pouvait donc pas embrasser d’un seul regard tout le contenu d’une page telle que cette première page du Web comme on peut le faire aujourd’hui sur la plupart des écrans. On ne voyait dans son écran qu’une petite portion de la page. Pouvoir créer des liens ciblant une partie précise de la page devait donc être beaucoup plus utile.
Vie et mort des balises : le HTML a une histoire
Mais pourquoi s’attarder aussi longtemps sur une balise comme la balise <NEXTID>, qui de toute façon n’existe plus ? Parce que c’est important pour comprendre le Web de réaliser que celui-ci a une histoire. Les balises ont une vie, puis elles meurent. <NEXTID> a été rejoindre le cimetière des balises disparues. On croit souvent que l’existence numérique échappe au vieillissement, à la corruption des choses matérielles. Mais une page HTML n’existe qu’aussi longtemps que les navigateurs savent l’interpréter. Dans 50 ans, les navigateurs sauront-ils encore interpréter les pages que nous codons aujourd’hui ou bien le HTML aura-t-il tellement évolué que nos pages actuelles seront devenues illisibles ?
Suivre les directives du W3C devrait garantir une « compatibilité ascendante » permettant aux techniques actuelles d’être compatibles avec les techniques du futur, mais est-ce si sûr ?
Bienvenue ! Votre compte a bien été créé.
Autorises-tu ton navigateur à rester automatiquement connecté à Lumni ?
