Anatomie de la page web

Le HTML est un langage descriptif, qui sert à étiqueter le contenu [*] pour garantir sa compréhension par tous les outils web. Il marque chaque élément pour signifier « ceci est un titre », « ceci est une image », « ceci est un champ de saisie », etc. afin d’indiquer aux différents outils de consultation (navigateurs graphiques, synthèse vocale, moteurs de recherche, etc.) comment restituer chacun des éléments qui composent la page. C’est sa raison d’être. C’est donc un langage simple, descriptif et non algorithmique : HTML est l’abréviation de « HyperText Markup Language qu’on peut traduire par « langage de balises pour l’hypertexte ». C’est un corpus de vocabulaire où chaque balise a une valeur sémantique particulière. Par exemple, l’élément HTML <h1> (titre de premier niveau) confère le rôle de titre principal au texte qu’il contient, indépendamment de son apparence, ce qui permet aux outils de l’exploiter en conséquence : les moteurs de recherche l’indexeront avec plus d’importance tandis que les synthèses vocales le liront en premier.

La mise en forme s’effectue en CSS, dans une couche langagière séparée, elle aussi descriptive : là où HTML marquait « ceci est un titre », CSS ajoute « et il est bleu », littéralement : h1 { color: blue; }. CSS est l’abréviation de Cascading Style Sheets, car les feuilles de style s’appliquent en cascade sur le fichier HTML pour le mettre en page et l’habiller, composant son rendu visuel, comme des coups de pinceau composent un tableau.

Spécifiés par le W3C, HTML et CSS sont les deux langages fondamentaux des pages web. Pour résumer, HTML fournit la structure sémantique et CSS l’apparence formelle, soit le fond et la forme, séparément. Cette distinction n’est pas évidente, relativement au monde réel où fond et forme sont indissociables : dans la presse l’on nomme les titres selon leur apparence (gros titre, sous-titre, intertitre…), sur le Web selon leur niveau hiérarchique, et ce n’est pas équivalent. D’un autre côté, ces langages descriptifs sont d’une telle simplicité qu’elle est parfois désarçonnante pour les devs rompus à l’algorithmique.

Une page web composée exclusivement de HTML et CSS est dite « statique ». D’autres langages peuvent ensuite s’y ajouter pour la rendre « dynamique ». Ainsi, le JavaScript (souvent abrégé en « JS »), vient enrichir les couches précédentes, si besoin, de comportements dynamiques et d’interactions particulières. Un peu plus complexe que les deux précédents, JavaScript est un langage de script léger, orienté objet, qui plaît davantage aux devs, au risque d’en user excessivement, là où HTML ou CSS auraient suffit.

Il est important de bien comprendre le rôle de chacun de ces langages et de les utiliser pour ce pour quoi il sont conçus, afin que garantir un fonctionnement correct dans toutes les situations de consultation vécues sur le Web. En effet, certains outils n’exploitent que certaines couches, pas toutes : moteurs de recherche et synthèses vocales, par exemple, n’ont que faire des consignes visuelles dispensées via CSS, tandis que certains internautes désactivent JavaScript pour surfer sur le Web plus légèrement.

Retenons que la couche HTML est la seule qui reste exploitée dans tous les cas. On veillera donc particulièrement à ce que tout contenu informationnel soit bien présent dans cette première couche, indispensable et fondamentale, en évitant d’injecter des contenus via CSS ou via JS. C’est-à-dire à bien séparer fond et forme, à bien séparer l’information de sa présentation, dans les couches langagières qui leur correspondent.