Commentaire HTML : masquer du contenu sans le rendre confidentiel

Un commentaire HTML s’écrit avec <!-- au début et --> à la fin : <!-- Votre remarque -->. Le navigateur ne l’affiche pas dans la page, mais son contenu reste dans le code source. Cette syntaxe permet d’annoter le balisage, de masquer temporairement des éléments ou d’isoler une portion de code pendant un test.

Écrire un premier commentaire et vérifier son effet

Pour ajouter une note, placez votre texte entre les deux délimiteurs, sans modifier leur ordre ni insérer d’espace entre leurs caractères. Les espaces autour du texte sont facultatifs, mais ils améliorent la lisibilité. Voici un exemple à copier dans un document HTML :

<!-- Présentation du service -->

Cette ligne n’affiche rien dans la page. Elle sert uniquement de repère dans le fichier. Pour observer la différence entre le code et le résultat visible, essayez cet ensemble :

<p>Bienvenue sur notre site.</p>

<!-- Ajouter ici une présentation plus détaillée -->

<p>Notre équipe vous accompagne dans votre projet.</p>

Le navigateur affiche les deux paragraphes, sans la remarque intermédiaire. Le commentaire n’est donc pas un paragraphe caché par une règle de style : il est reconnu comme une annotation du document, et non comme du contenu à restituer.

Placez vos commentaires entre les éléments HTML, par exemple avant un paragraphe ou après une section. Ne les insérez pas à l’intérieur d’une balise ouvrante pour annoter un attribut : cette position n’est pas adaptée à la syntaxe des commentaires.

Masquer une ligne, un bloc ou quelques mots

Le même mécanisme permet de conserver du balisage dans le fichier tout en le retirant provisoirement de l’affichage. Il suffit d’entourer le contenu concerné avec les délimiteurs du commentaire. Cette opération est réversible : retirer ces délimiteurs réactive le contenu.

Une seule paire de délimiteurs pour plusieurs lignes

Un commentaire HTML peut couvrir une ligne ou plusieurs lignes. Il n’est pas nécessaire de répéter l’ouverture et la fermeture à chaque retour à la ligne. Pour masquer un petit ensemble, placez l’ouverture avant son premier élément et la fermeture après son dernier élément :

<!--

<h2>Offre temporaire</h2>

<p>Cette présentation est en cours de révision.</p>

-->

Le titre et le paragraphe ne sont plus rendus. En revanche, le reste de la page situé après la fermeture du commentaire reste interprété normalement. Veillez à sélectionner un ensemble de balises complet : masquer uniquement une balise ouvrante tout en laissant sa fermeture active peut compliquer le diagnostic du document.

Retirer seulement une partie d’un paragraphe

Il est également possible de commenter quelques mots au milieu d’un contenu. L’exemple suivant conserve la phrase principale, mais retire la précision concernant les horaires :

<p>Notre accueil est ouvert <!-- du lundi au vendredi --> sur rendez-vous.</p>

Le résultat visible est « Notre accueil est ouvert sur rendez-vous. ». Relisez toujours la phrase après l’opération : retirer une portion peut laisser une ponctuation inutile, modifier le sens ou créer des espaces mal placés. Un masquage techniquement correct ne garantit pas une formulation claire.

Documenter le code et déboguer sans perdre le fil

Les commentaires sont utiles lorsqu’ils expliquent une intention difficile à déduire du balisage. Une note comme « Paragraphe de présentation » devant un simple paragraphe apporte peu. Une remarque précisant qu’un texte doit rester identique à celui d’un formulaire donne, au contraire, une information utile à la maintenance.

Pour rechercher une erreur, procédez par étapes : commentez un bloc cohérent, rechargez la page, puis comparez le résultat. Si le problème disparaît, vous disposez d’un indice sur la zone concernée, pas encore d’une preuve sur sa cause. Réactivez ensuite les éléments progressivement pour affiner votre recherche.

Un commentaire peut aussi devenir un tremplin pour la personne qui reprendra le fichier : plutôt que « À corriger », indiquez le symptôme, l’essai déjà réalisé et la prochaine vérification. Par exemple : <!-- Le décalage disparaît sans ce bloc ; vérifier sa structure avant de modifier les styles -->. Cette courte transmission évite de recommencer toute l’enquête et transforme une interruption de travail en point de reprise exploitable.

Une fois le test terminé, retirez les notes devenues inutiles et les anciennes variantes abandonnées. Une accumulation de blocs commentés finit par brouiller la distinction entre le code réellement utilisé et les essais oubliés.

Respecter les règles de syntaxe, y compris les cas moins évidents

La forme générale est simple, mais le contenu d’un commentaire ne peut pas accueillir n’importe quelle séquence. MDN précise plusieurs restrictions qui permettent d’éviter une fermeture prématurée ou une syntaxe incorrecte.

• Le texte ne doit pas commencer par > ni par ->.
• Il ne doit pas contenir -->, qui correspond à la fermeture du commentaire.
• Il ne doit pas contenir --!>.
• Il ne doit pas se terminer par <!-.

La séquence <! est, en revanche, autorisée. Ces règles concernent le texte placé entre l’ouverture et la fermeture, et non les délimiteurs eux-mêmes.

Les commentaires ne s’imbriquent pas. Avant de commenter un grand bloc, vérifiez qu’il ne contient pas déjà un commentaire. Une fermeture présente à l’intérieur peut terminer le commentaire extérieur plus tôt que prévu et laisser une partie du balisage active. Dans ce cas, commentez séparément les portions concernées ou travaillez sur une copie du fichier.

Il faut aussi distinguer HTML et XML. MDN rappelle qu’en XML, notamment pour les documents SVG ou MathML traités comme XML, un commentaire ne peut pas contenir la séquence --. N’appliquez donc pas automatiquement les tolérances du HTML à un fichier XML.

Ne jamais confondre contenu invisible et information protégée

Un commentaire envoyé au navigateur reste consultable dans le code source du document. Il ne constitue donc pas un moyen de protéger un mot de passe, une clé d’accès, une information personnelle ou une note confidentielle destinée à votre équipe.

La distinction est essentielle : ne pas afficher une information ne signifie pas ne pas la transmettre. Si un contenu ne doit pas parvenir au visiteur, il faut l’exclure du document envoyé, et non simplement l’entourer de délimiteurs de commentaire.

Dans WordPress, vérifiez également que votre exemple est bien ajouté à un emplacement prévu pour le HTML, puis contrôlez la page publiée et son code source. Pour un essai de masquage, assurez-vous que le bloc attendu a disparu et que les éléments voisins restent correctement affichés. Gardez enfin les commentaires utiles à la compréhension du fichier, sans y stocker d’informations sensibles ni de contenu obsolète.