Si les éléments du format HTML servaient uniquement à définir des zone ou rassembler des segments de texte pour les mettre en forme, une poignée d’entre-eux serait nécessaire[1]. Or, au delà de ça, leur rôle est de structurer le document, de guider sa lecture voir d’aider à sa compréhension.
Trop ou pas assez ?
Langue vivante, le HTML a connu et connait épisodiquement des combats à propos de son lexique, de sa grammaire. Une question récurrente qui anime le standard proposé est de trouver un équilibre entre une sur spécialisation multipliant le nombre d’éléments (et les difficultés d’utilisation, de choix) et l’utilisation de quelques éléments pour faire tout et n’importe quoi, sans porter de sens.
Pour moi, en tous cas à ce jour, l’éventail proposé est équilibré et, je pense, partiellement sous employé car la page web et son site sont trop couramment envisagés par le biais des fonctionnalités et non d’une catégorisation de son contenu.
Découper les segments
Bon, je ne peux plus reculer, il me faut attaquer le vif du sujet, à savoir la présentation des éléments de la spécification HTML Living Standard.
Il existe une classification technique des éléments HTML qui, sans faire partie de la norme permet de disposer d’une base commune à laquelle se référer, notamment pour les équipes de développement de navigateur ou quand il est question d’ajouter un élément, pour le situer dans le paysage existant. Alors pourquoi entreprendre d’établir ma propre classification ?
On en revient au propos, au sens. Il ne s’agit pas de réinventer une roue mais de s’approprier un environnement pour mieux le comprendre et l’intégrer. Il faut aussi l’avouer, découper, classer et penser sont sans doute mes verbes favoris. Ce préambule est déjà beaucoup trop long, voilà comment je répartis les choses.
Éléments de regroupement
html et body ont déjà été abordés, ce sont mes premiers éléments de regroupement. Je leurs adjoint section, article et… div parce qu’il faut bien mettre ce dernier quelque part (et qu’il a été nommé depuis le mot division).
Après relecture et réflexion, figure, fieldset et form ont également toute leur place dans cette catégorie. Tout comme blockquote, peut-être plus litigieux, qui encadre les longs extraits cités.
Éléments d’énumération
J’y range ul, ol, dl et le petit dernier : menu. C’est à dire les liste non ordonnées, ordonnées, de définitions ou de liens de navigations.
li, l’élément de liste, ainsi que dt et dd, respectivement le terme défini et la définition, rejoignent logiquement cette collection car ils sont indissociables de leurs parents.
Éléments de contextualisation
Discutable ? C’est ainsi que j’interprète header, aside, main, footer et navigation. Au sein d’un regroupement ils permettent de préciser le rôle relatif de chaque partie. Je leur adjoints figcaption et label.
q, que j’ai failli omettre, participe aussi de la mise en contexte en précisant que le texte que ses balises encadrent est une citation. Tout comme dfn indique quel terme est défini par le contenu de l’élément ou time permet d’isoler une référence temporelle.
Éléments de hiérarchisation
Les fameux hx (h pour heading) de 1 à 6 rejoints par hgroup, le mal-aimé ou délaissé, qui permet de rassembler plusieurs plusieurs éléments pour déclarer une ouverture de section. Les éléments autorisés sont un ou plusieurs p suivi(s) par un hx de nouveau suivi par un ou plusieurs p.
Pour être plus clair, imaginez une section dotée d’un titre et d’un sous-titre, quelques fois d’une mention complémentaire. Les rassembler dans un élément permet d’en faire un seul titre dans la structure du document.
<hgroup>
<p>contribution de J. Doe</p>
<h2>Titre de la section</h2>
<p>Sous-titre</p>
</hgroup>
Au fait, pourquoi utiliser un hgroup au lieu d’un header ? À l’inverse de ce dernier, le hgroup induit un changement de section dans la structure du document.
Pour conclure sur ces balises de titraille, je dois souligner que le premier niveau, h1, est à réserver, sinon au titre de la page, en tous cas au titre du contenu présenté. Il ne devrait pas être le plus haut du corps du document. Cela laisse cinq niveaux de gradation pour les autres parties de la page, ce qui est largement suffisant dans la plupart des cas.
Enfin, il faut noter l’existence d’éléments permettant de dénoter l’importance relative d’un mot ou d’un groupe de mots au sein d’un paragraphe. Ainsi strong, em et small permettent d’insister sur l’importance d’un passage, d’y mettre de l’emphase ou, à l’inverse, de l’amoindrir.
Éléments d’(inter)action
Ce chapitre est beaucoup trop long mais je n’ai pas encore abordé l’ancre, pourtant constitutive du format, le a de l’hypertextualité.
Toute personne parcourant une page web ne se content pas de lire, de parcourir un contenu. Au contraire, cette activité demande des interactions (plus ou moins désirées), de l’ouverture d’un nouveau site à la soumission d’un formulaire en passant par la fermeture de fenêtre modales.
Pour ce faire, a, button, input, select, textarea, option, option (et tous les autres éléments de formulaire que j’oublie), meter, progress, rejoints par les récents details et dialog tentent de répondre aux besoins d’échange entre utilisateurs ou utilisatrices et un système informatisé.
Éléments de composition
Je craignais le fait de regrouper les éléments suivants dans une même catégorie qui me conduirait à créer l’ensemble honni « divers » ou « autres » de tout classement. Cependant, il m’est apparu que i, b, u, sup, sub et br correspondaient aux besoins d’une expression visuelle, ou esthétique, de répondre à une convention de mise en forme.
Pseudo-conclusion
La rédaction de cette page a été longue, délayée par mes atermoiements et le rappel d’éléments oubliés dans mon classement. Ce qui, en fin de compte, n’est pas grave. Le langage de balisage hypertexte est une langue vivante, plastique, qui ne demande pas d’être maîtrisée de manière absolue pour pouvoir être utilisée. Au contraire, elle a été conçue à l’origine pour faciliter le partage d’information.
Le tout est d’utiliser à bon escient les éléments dont on dispose en s’appuyant sur le message que l’on souhaite faire passer. La réponse à la question « pourquoi ai-je besoin d’isoler ce mot ou ce passage ? » permet dans la majorité des cas — pour ne pas dire dans tous — d’identifier le balisage à employer.
Rédigé à Toulouges en mai 2025, modifié pour la dernière fois le 16/06/2025.