La collecte automatisée de données sur le web consiste à ordonner à un programme d’aller sélectionner des informations bien précises dans une série de pages. Ce billet est une brève introduction à la structure du langage HTML, dans lequel ces pages sont écrites. On aborde les pages simples (la grande majorité d’entre elles), et on abordera plus tard les les pages plus complexes, ainsi que les évolutions contemporaines du langage.

Quel rapport entre un navigateur et le HTML ?

Des visualisateurs de code HTML

Que se passe-t-il quand on utilise le web, par exemple quand vous venez visiter la page de ce billet ? Vous utilisez un navigateur, vous tapez l’adresse de la page, vous pressez entrée ; et après ?

L’adresse est celle d’un serveur, un ordinateur allumé tout le temps, et appuyer sur entrée revient à lui demander une page particulière. Le serveur nous renvoie alors la page demandée sous forme d’un fichier écrit en HTML : il s’agit d’un langage informatique simple, qu’on va préciser dans une seconde[1].

Votre navigateur reçoit ensuite ce fichier HTML, qu’on appelle le code source de la page et le transforme en une page mise sous une forme lisible et graphique, que vous avez sous les yeux.

Le langage HTML est donc une manière de décrire des instructions typographiques pour les pages du web. Il s’est imposé grâce à sa relative simplicité d’écriture et d’interprétation (pour les concepteurs de navigateurs).

Comme la collecte automatisée de données sur internet consiste souvent à demander à un programme de récupérer des informations dans une série de pages web, c’est-à-dire dans des pages écrites en HTML, il nous faut savoir comment désigner dans ce langage les informations qui nous intéressent.

Tout ce qui apparaît régulier dans le navigateur, doit être régulier dans le code source

Un principe fondamental de la collecte automatisée de données est ainsi le suivant : si on observe une certaine régularité formelle sur une page web affichée par un navigateur, alors celle-ci doit exister dans le code source de la page. Dans l’imprimerie de système Gutenberg, si on voit des lignes (de texte), c’est que l’imprimeur a utilisé des outils pour créer des lignes (des suites de caractères métalliques de même hauteur). Ici, si on voit à l’écran des blocs de texte similaires alors, comme le navigateur ne fait que traduire visuellement le code source, on doit très probablement trouver des instructions similaires qui correspondent à ces blocs de texte dans le code source.

La structure du langage

Les balises HTML

Le HTML est un langage assez facile d’accès. Son nom est explicite, HyperText Markup Language : HyperText signifie qu’il y a des liens cliquables, et Markup signifie « balises ». C’est donc un langage de balises (avec des liens cliquables). Le point principal est donc de comprendre la notion de balises et l’usage qu’il y en est fait.

Une structure en arbre

Les balises sont de la forme suivante :

<typeBalise>
    Contenu
</typeBalise>

Trois éléments sont présents : un couple de balises ouvrante et fermante, leur type, et un contenu entre les deux. Ce contenu peut être du simple texte, mais aussi d’autres balises. Ainsi une page HTML a toujours une structure de la forme suivante :

<tronc>

    <branche>

        <sousBranche>
            contenu_1.1
        </sousBranche>

        <sousBranche>
            contenu_1.2
        </sousBranche>

    </branche>

    <branche>
        contenu_2
    </branche>

</tronc>

C’est donc une structure en arbre, exactement comme un texte avec des parties et des sous-parties – à la différence que celles-ci peuvent être de plusieurs types : pour poursuivre l’analogie, comme dans les textes de philosophie analytique ou de mathématiques, texte principal, scolie, lemme, démonstration, figues, etc.

En HTML, les balises peuvent être d’un ensemble limité de types, qui correspondent à des instructions typographiques : div = bloc, a = lien, etc. ; <tronc>, <branche>, <sousBranche> et <typeBalise> n’existent pas en réalité[2].

Les espaces et sauts de ligne n’ont pas d’importance, on n’adopte cette présentation que pour le rendre plus lisible ; le code suivant a la même signification :

<tronc>
    <branche>
        <sousBranche>contenu_1.1</sousBranche>
        <sousBranche>contenu_1.2</sousBranche>
    </branche>
    <branche>contenu_2</branche>
</tronc>

On pourrait même écrire tout à la suite, en enlevant tous les espaces et sauts de ligne ci-dessus, ce serait inintelligible mais techniquement correct.

Les attributs de balises

Remarquez que jusqu’ici, seuls les types des balises sont présents, elle n’ont pas d’identifiant particulier, et rien ne permet de différencier la première branche de la deuxième, si ce n’est qu’elle est placée avant dans le code – ce qui est un moyen réel de l’identifier, bien que pas très pratique. C’est l’intérêt des attributs de balises.

En effet, les balises peuvent s’écrire plus complètement de la façon suivante, par exemple pour une balise de type div :

<div class="titre_1">
    Texte, sous-branches…
</div>

Dans la balise ouvrante, on peut ajouter des attributs, qui servent à enrichir leur description et à faciliter leur identification. Dans la page actuelle, vous pouvez vérifier que les titres de deuxième niveau sont repérés par des balises <div class="h2">. Un autre exemple est celui des liens hypertexte, qui sont décrits par des balises a, avec l’adresse indiquée comme attribut href (hypertext reference) ; voici comment on écrit ce lien renvoyant vers cette page :

<a href="http://data.hypotheses.org/243">
    lien renvoyant vers cette page
</a>

Ce qui identifie une balise

On a ainsi les trois éléments pour identifier une balise, qui sont :

• Son type (div, p, a, etc.),
• Ses attributs éventuels (class, attr, href, etc.),
• Le contenu de texte et les sous-branches qui y naissent.

Pour des branches (ou sous-branches) formellement identiques, comme dans l’exemple vu précédemment, il nous reste l’ordre dans lequel celles-ci apparaissent dans le code HTML.

Avec ce système d’identification, on aura toujours au moins une manière, et souvent plusieurs, de repérer une ou plusieurs balises, celles dont on voudra collecter automatiquement les données.

Dans la pratique

La tête et le corps

La structure d’un fichier HTML est standardisée. Elle est de la forme :

<!DOCTYPE html (…)>
<html>
    <head>
        <meta> …
        <meta> …
        <link type="text/css" href="http://…">
    </head>
    <body>
        <div>
            <h1> Titre </h1>
            <p>
                Texte 
            </p>
        </div>
        …
    </body>        
</html>

La première ligne (DOCTYPE) désigne la version du langage HTML que la page utilise. On n’aura jamais à s’en servir. Ensuite le contenu de la page est situé entre les balises html. Ce tronc se divise en deux branches : head, puis body.

La branche head contient un ensemble d’informations sur la page (balises meta), des instructions de mise en page (chargées avec link), etc., mais aucun contenu affiché.

Toutes les informations affichées, comme le texte, les images, sont décrites dans la partie body.

Les balises réelles courantes

Celui-ci est construit avec les balises du langage. Il n’est pas indispensable de les connaître pour faire de la collecte automatisée de données. À titre indicatif voici le plus courantes :

• <div> : un bloc rectangulaire de la page, contenant du texte ou des images ; souvent l’attribut class (ou parfois id) est présent ;
• <a> : un lien hypertexte, renvoyant vers l’adresse indiquée par l’attribut href ;
• <h1>, <h2>, <h3>, etc. : des titres, de niveaux décroissants ;
• <p> : un paragraphe de texte ;
• <ul>, <ol> : une liste, respectivement sans et avec numérotation ;
• <img> : une image ;
• <!-- … --> : un commentaire, c’est-à-dire du texte que le navigateur ignore.

Il existe d’autres balises, et chaque nouvelle version du langage en apporte pour simplifier l’écriture et étendre les fonctionnalités disponibles (voir l’histoire du HTML). De nombreux manuels existent en ligne. Le plus simple est de vous y référer si besoin, ou simplement de rechercher sur un moteur de recherche la signification d’une balise, comme le font tous les programmeurs.

Comment se fait la mise en page (facultatif)

Pour être complet, mentionnons, sans rentrer dans les détails, qu’il existe deux manières de préciser les instructions de mise en page – par exemple pour un bloc <div> : ses dimensions, sa couleur de fond, etc.

La première manière est de spécifier ces instructions comme attributs de la balise, directement dans le code HTML, par exemple : <div style="width:100px;border:1pxsolidblack">. Le HTML des années 1990 est écrit de cette manière lourde et pédestre, et on rencontre encore des pages sous cette forme.

La seconde consiste à utiliser une feuille de style, au format CSS. Dans ce cas, on précise dans le HTML un attribut du bloc, par exemple <div class="grand"> ; et dans un autre fichier, on précise les propriétés des blocs div possédant l’attribut class ayant la valeur grand, de manière générique. On peut ainsi en écrire plusieurs sans avoir à préciser à chaque fois les propriétés graphiques.

Dans ce dernier cas, la page web ne se résume donc pas au code HTML, mais est la résultante aussi de la feuille de style (CSS). De manière générale, une page web est décrite par un ensemble de fichiers, dont le HTML est le centre et contient quasiment toutes les informations affichées à l’écran.

Faire le lien entre le contenu affiché et le code source

Visualiser le code source

Une fois arrivé là, le code source d’une vraie page ne devrait plus rien avoir d’effrayant. Pour voir le code de cette page, demander à votre navigateur “Montrer le code source” ; le raccourci clavier est souvent Cmd-U (Mac) ou Ctrl-U (Windows), en ajoutant éventuellement Alt à cette combinaison (Safari ou Chrome, et ça dépend des versions) ; si vous ne trouvez pas, chercher “source” dans l’aide du logiciel.

Vous devriez obtenir une fenêtre un peu terne, mais qui permet quand même de vérifier ce qu’on vient de présenter.

Cela dit, ce n’est pas commode à lire. Pour disposer d’outils plus puissants et confortables, on vous encourage très vivement à installer Firebug pour Firefox, ou activer les outils de développeur, pour Safari (dans les préférences, menu “Avancées”, option “Afficher le menu Développement”) ; ou bien pour Chrome ouvrir les “Outils de développement”. Le raccourci clavier est souvent Cmd/Ctrl-(Alt)-I.

Ainsi, normalement, vous obtenez quelque chose de ce genre-là :

À quel morceau de code correspond un élément affiché ?

Plutôt que de chercher à l’aveuglette à quel morceau de code correspond un élément affiché, on peut utiliser l’inspecteur web. Cliquez sur l’icone en forme de main ( Safari), de rectangle avec une flèche ( Firebug) ou de loupe ( Chrome), puis promenez votre curseur sur les éléments de la page qu’il vous intéresse de connaître : des zones de la page doivent se colorer en bleu. Cliquez ensuite sur un élément, et l’inspecteur web vous indique où se trouve son équivalent dans le code HTML.

On peut alors observer ce qu’on annonçait au début de ce billet, à savoir que les éléments qui sont affichés de la même manière existent, dans le code source, de façon également similaire. Testez-le par exemple sur la colonne “liens”, dans la colonne de droite de cette page :

Une fois qu’on a repéré où sont, dans le code source, les informations que l’on veut récupérer, la moitié du chemin est fait. Il reste à savoir comment faire comprendre cette localisation à un programme ; pour cela, on utilisera la syntaxe XPath, qui fera l’objet d’un prochain billet.

---

---