Comment mettre un commentaire dans son code HTML ?

Le commentaire HTML est introduit dans une balise < !-- commentaire -- > : le texte renseigné s'affiche dans le code, mais il n'est pas visible par le visiteur de la page web. C'est un moyen utile au développeur pour annoter son code, pour travailler dessus sans affecter l'affichage de la page web, pour garder en mémoire un historique des modifications ou encore pour isoler des lignes de code suspectes. Lorsque le site est développé dans le cadre d'un travail collaboratif, les commentaires HTML sont particulièrement utiles.

Exemple de commentaire HTML

Dans cet exemple, le développeur souhaite appliquer une mise en forme cohérente, pour faciliter la lecture et la rendre agréable. Il insère un commentaire pour se rappeler qu'à chaque élément « recette », le premier mot des étapes de la recette doit être mis en gras. Le cas échéant, son annotation est une information qui pourra en outre renseigner le développeur qui prend sa suite pour coder la page web. En tout état de cause, le commentaire HTML dûment inséré n'apparaît pas dans le texte de la page web.

See the Pen commentaire-html_exemple by HubSpot France (@HubSpot-France) on CodePen.

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus Télécharger le guide

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

Quel est l'intérêt des commentaires HTML ?

Les commentaires HTML, invisibles des visiteurs de la page web, s'affichent dans le code à destination de tous les développeurs amenés à travailler dessus. Insérer un commentaire HTML présente plusieurs intérêts :

• Au moment de développer le site web : le commentaire HTML sert de rappel ou d'explication, pour clarifier le code et faciliter ainsi le travail du développeur. Exemple : le développeur laisse une note pour se rappeler d'insérer les liens HTML sur les images et non sur le texte ; si un autre développeur prend le relais, il comprend la stratégie et l'applique.
• Pour résoudre un bug : le commentaire HTML permet de bloquer temporairement l'affichage d'une ligne de code par le navigateur, pour identifier d'où provient le bug sans supprimer le code. Les balises de commentaire sont introduites successivement au début et à la fin de chaque ligne de code : le développeur observe les résultats successifs affichés sur le navigateur, jusqu'à identifier le bug pour le résoudre.
• Pour tester l'ergonomie d'une page web : en utilisant la balise de commentaire HTML, le développeur peut activer et désactiver du code à son gré. La balise permet également de mettre en attente une ligne de code, la retirer ultérieurement débloque la ligne de code pour afficher le contenu sur le navigateur. Exemple : le développeur veut tester deux emplacements pour un bouton d'appel à l'action ; il introduit deux lignes de code à cet effet, et en place une entre les balises de commentaires HTML pour n'afficher qu'un bouton sur la page web ; il mesure le taux de conversion sur ce bouton, puis le désactive et active l'autre en retirant ses balises de commentaire ; il mesure le nouveau taux de conversion, et choisit le bouton le plus performant.
• Lors de la refonte du site web : le développeur qui restructure le site web peut décider de mettre en commentaire des portions de l'ancienne version du code, dans l'hypothèse où elles devraient être restaurées ultérieurement. Ces portions ne s'affichent pas dans le navigateur, mais restent visibles sur le code source de la page web.

Exemple d'insertion d'un commentaire HTML pour activer et désactiver facilement une offre promotionnelle périodique sur un site de e-commerce :

See the Pen commentaire-html_offre-active by HubSpot France (@HubSpot-France) on CodePen.

See the Pen commentaire-html_offre-inactive by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.