Un commentaire HTML s’écrit entre <!-- et --> : tout ce qui se trouve à l’intérieur est ignoré par le navigateur et n’apparaît pas sur la page. Il reste en revanche parfaitement visible dans le code source, ce qui a des conséquences que l’on sous-estime souvent, y compris en matière de sécurité.
Voici comment les utiliser correctement, et ce qu’il faut penser de leur effet réel sur le référencement.

commentaires html seo

Comment écrire un commentaire en HTML

La syntaxe est la même depuis les origines du langage. Vous ouvrez avec <!--, vous fermez avec --> :

<!-- Menu principal -->
<nav class="menu">
<a href="/">Accueil</a>
</nav>

Le texte « Menu principal » ne sera jamais affiché par le navigateur. Il sert uniquement à vous, ou à la personne qui reprendra le code après vous.

Commenter plusieurs lignes

Il n’existe pas de syntaxe distincte pour les commentaires multilignes en HTML : la même paire de balises encadre autant de lignes que nécessaire.

<!--
Bloc tarifs
Mis à jour le 12/03
Ne pas supprimer : utilisé par la page d'accueil
-->

Vous pouvez aussi vous en servir pour désactiver temporairement un bloc sans l’effacer. C’est le réflexe le plus utile au quotidien : vous encadrez la section, vous rechargez la page, vous constatez. Pensez simplement à faire le ménage ensuite, j’y reviens plus bas.

Le raccourci clavier

Aucun éditeur sérieux ne vous demande de taper les balises à la main. Sélectionnez les lignes, puis :

  • VS Code, Sublime Text, PhpStorm, WebStorm : Ctrl + / (Windows et Linux) ou Cmd + / (macOS)
  • Notepad++ : Ctrl + Q
  • Dreamweaver : Ctrl + Shift + ,

Le raccourci fonctionne dans les deux sens : appuyez à nouveau pour retirer le commentaire. L’éditeur choisit automatiquement la bonne syntaxe selon le type de fichier, ce qui évite les erreurs quand vous passez du HTML au CSS dans la même journée.

Commenter en CSS, en JavaScript et en PHP

La syntaxe HTML ne fonctionne que dans le HTML. Dès que vous entrez dans une balise <style> ou <script>, elle change, et c’est une source d’erreurs quotidienne quand on passe d’un fichier à l’autre.

Le commentaire CSS

Le CSS ne connaît qu’une seule forme, valable aussi bien sur une ligne que sur plusieurs :

/* Couleur principale de la marque */
.bouton { background: #2790e6; }

/*
Bloc désactivé le 12/03
.promo { display: block; }
*/

Il n’existe pas d’équivalent CSS au // de JavaScript. Écrire // commentaire dans une feuille de style casse la règle qui suit, sans aucun message d’erreur, un grand classique des soirées perdues.

Le commentaire JavaScript

JavaScript accepte les deux formes :

// Commentaire sur une seule ligne

/*
Commentaire sur
plusieurs lignes
*/

Le commentaire PHP

PHP en accepte trois, dont deux héritées du C et une du shell :

// Commentaire sur une ligne
# Autre forme, sur une ligne également

/*
Commentaire sur plusieurs lignes
*/

Un point important en PHP : contrairement au HTML, le commentaire n’est jamais envoyé au navigateur. Il est retiré à l’exécution, côté serveur. C’est la raison pour laquelle une note technique sensible se place dans un commentaire PHP, jamais dans un commentaire HTML.

Le tableau récapitulatif

  • HTML : <!-- commentaire --> (visible dans le code source
  • CSS : /* commentaire */), visible dans le fichier servi
  • JavaScript : // ou /* */ (visible dans le fichier servi
  • PHP : //, # ou /* */), jamais transmis au navigateur

Les erreurs à éviter

La syntaxe paraît simple, mais trois pièges reviennent régulièrement.
Les commentaires ne s’imbriquent pas. Le premier --> rencontré ferme le commentaire, et tout ce qui suit réapparaît sur la page :

<!-- Bloc A <!-- Bloc B --> encore commenté ? Non. -->

Le double tiret est interdit à l’intérieur. Écrire <!-- Voir -- important --> produit un HTML invalide. Utilisez un tiret simple ou une autre ponctuation.
Un commentaire ne masque pas le contenu. Commenter un bloc empêche son affichage, mais le texte reste téléchargé par le navigateur et lisible par n’importe qui via un clic droit et « Afficher le code source ».

Les commentaires HTML ont-ils un impact sur le SEO ?

C’est la question qui revient le plus souvent, et la réponse courte est : non, pas directement. Voici le détail, parce que la nuance compte.

Google ne les indexe pas

Les moteurs de recherche n’analysent pas le contenu des commentaires HTML. Ce que vous y écrivez ne sera jamais pris en compte comme du contenu, ne ressortira dans aucun résultat, et n’améliorera aucun positionnement. Y glisser une liste de mots-clés est parfaitement inutile, cette vieille technique ne fonctionne plus depuis très longtemps.

Le poids du code : un faux problème dans la plupart des cas

On lit souvent que les commentaires alourdissent la page et dégradent les Core Web Vitals. C’est vrai sur le principe, mais l’ordre de grandeur mérite d’être posé.
Un commentaire de 80 caractères pèse environ 80 octets. Il en faudrait plusieurs milliers pour approcher le poids d’une seule image mal compressée de 200 Ko. Dans mes audits, je n’ai jamais vu de site ralenti par ses commentaires HTML : le problème est ailleurs, les images, les scripts tiers, le nombre de requêtes, un hébergement sous-dimensionné.
Ajoutez à cela que la minification supprime les commentaires à la volée en production. Si vous utilisez un plugin de cache, le HTML servi à vos visiteurs en est déjà largement débarrassé.

Le vrai risque est la sécurité, pas le référencement

Voilà le point que je considère comme réellement important, et qui est rarement évoqué.
Tout ce qui est en commentaire est public. J’ai déjà trouvé, en consultant le code source de sites en production : des identifiants de recette, des URLs d’administration personnalisées, des adresses e-mail internes, des chemins de serveur, des clés d’API en clair, et des notes du type « contournement provisoire de la vérification, à corriger ».
Ne mettez jamais dans un commentaire ce que vous ne mettriez pas sur votre page d’accueil.

Questions fréquentes

Comment commenter rapidement plusieurs lignes en HTML ?
Sélectionnez les lignes et utilisez Ctrl + / (ou Cmd + / sur Mac). Le même raccourci retire le commentaire.
Les commentaires HTML sont-ils visibles par les visiteurs ?
Pas sur la page affichée, mais oui dans le code source, accessible d’un clic droit. N’y placez aucune information sensible.
Faut-il supprimer les commentaires HTML pour améliorer le SEO ?
Non. Leur impact sur les performances est négligeable, et la minification s’en charge déjà en production. Concentrez vos efforts sur les images et les scripts.
Peut-on imbriquer deux commentaires HTML ?
Non. Le premier --> ferme le commentaire, et le reste du contenu redevient visible.
Quelle est la différence avec un commentaire CSS ?
Le CSS utilise /* commentaire */. La syntaxe HTML n’y fonctionne pas et casserait la règle suivante.

4.7/5 - (43 votes)

À lire aussi dans SEO

Annuaires SEO et référencement : liens entre un annuaire web et plusieurs sites
SEO

Les annuaires SEO sont-ils encore utiles ?

Annuaires SEO : ce qui a changé depuis Penguin, ce qui subsiste réellement, ce qui est devenu risqué et par quoi les remplacer.

4 min de lecture