Commentaire HTML

Un commentaire HTML est une note laissée dans le code source. Le navigateur l’ignore au moment du rendu, mais il la télécharge comme le reste de la page : elle est lisible par n’importe quel visiteur en deux clics.

La syntaxe d’un commentaire HTML

Un commentaire s’ouvre avec <!– et se ferme avec –>. Tout ce qui se trouve entre les deux est ignoré par le moteur de rendu.

<!-- Menu principal -->
<nav>...</nav>

La spécification HTML du WHATWG pose deux limites. Un commentaire ne peut pas contenir la séquence –> ailleurs qu’à sa fermeture, et il ne peut pas commencer par > ni par ->. Un double tiret au milieu du texte passe dans les navigateurs, mais fait échouer la validation du document.

Commenter une ligne ou un bloc entier

Un commentaire tient sur une ligne ou sur plusieurs, la syntaxe ne change pas.

<!-- Une seule ligne -->

<!--
  Plusieurs lignes,
  pour décrire un bloc entier.
-->

Dans Visual Studio Code, PhpStorm ou Sublime Text, le raccourci Ctrl + / sur Windows et Linux, Cmd + / sur Mac, commente et décommente la sélection. C’est le geste qui sert le plus au quotidien : neutraliser un bloc le temps de tester un affichage, sans rien supprimer.

Ce qu’un commentaire HTML ne cache pas

Invisible à l’écran ne veut pas dire privé. Le commentaire part dans la réponse du serveur, s’affiche dans le code source du navigateur et se retrouve dans les caches et les archives. Trois choses n’ont donc rien à y faire :

• des identifiants, des clés d’API ou des jetons, même de test ;
• des chemins d’administration, des noms de serveur ou des numéros de version de bibliothèques, qui renseignent un attaquant sur la surface à viser ;
• des remarques internes sur un client, un prix ou un concurrent, qui finissent tôt ou tard devant la mauvaise personne.

C’est un point que nous regardons systématiquement lors d’un audit de site internet : les commentaires laissés par un thème ou une extension trahissent souvent une version qui n’a pas été mise à jour depuis longtemps.

Les commentaires conditionnels, un vestige

On trouve encore dans de vieux thèmes une syntaxe de ce genre :

<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

Ces commentaires conditionnels servaient à livrer du code à une version précise d’Internet Explorer. Ils ne sont plus interprétés depuis Internet Explorer 10, et Internet Explorer a été retiré du support de Microsoft en juin 2022. Pour tous les navigateurs actuels, ce bloc est un commentaire ordinaire : le script qu’il contient n’est jamais chargé.

Sur une reprise de site ancien, ces blocs se suppriment. Ils alourdissent le balisage et laissent croire à une compatibilité qui n’existe plus.

Les commentaires pèsent dans la page livrée

Un commentaire est transféré au navigateur au même titre que le balisage. Sur un thème chargé d’extensions, ces blocs s’accumulent sans jamais servir au visiteur. La minification HTML, proposée par la plupart des extensions de cache, les retire à la volée sans toucher aux fichiers sources : les commentaires restent dans le code que l’équipe modifie, ils disparaissent de celui que le visiteur télécharge.

Et dans les autres langages du front

La syntaxe change d’un langage à l’autre, le principe non : en CSS un commentaire s’écrit /* … */, en PHP // pour une ligne ou /* … */ pour un bloc. La syntaxe JavaScript, ses deux formes et ses pièges sont traités dans notre article sur le commentaire JavaScript.

Un commentaire PHP, lui, est interprété par le serveur et n’arrive jamais jusqu’au navigateur. C’est la distinction qui compte quand on écrit un thème WordPress, où les deux syntaxes cohabitent dans le même fichier : ce qui est écrit en commentaire HTML dans un template est public, ce qui est écrit en commentaire PHP ne l’est pas. Nos équipes de développement web s’en servent comme convention de lecture d’un fichier de template.