Docs HTML exécutables : Commentaire HTML

Q: Comment écrire un commentaire en HTML ?

Commencez-le par : . Tout ce qui se trouve entre les deux marqueurs est ignoré par le navigateur, balises comprises, donc la même syntaxe sert à commenter du code.

Q: Peut-on imbriquer des commentaires HTML ?

Non. Le premier --> termine le commentaire, donc dans c --> le texte c --> s'affiche sur la page. Pour commenter un bloc qui contient déjà un commentaire, supprimez ou modifiez d'abord le commentaire intérieur.

Q: Les commentaires HTML fonctionnent-ils dans le CSS ou le JavaScript ?

Non. Dans un élément , utilisez / ... /, et dans un , utilisez // ou / ... /. Un commentaire HTML dans un bloc de style ne masque pas les règles CSS qu'il contient.

Comment écrire un commentaire en HTML

Un commentaire HTML commence par . Le navigateur ignore tout ce qui se trouve entre les deux marqueurs, donc le texte n'apparaît jamais sur la page :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Seuls le titre et le paragraphe s'affichent. HTML a une seule syntaxe de commentaire, et elle fonctionne pour une ligne comme pour plusieurs.

Le raccourci dans VS Code et la plupart des éditeurs : sélectionnez des lignes et appuyez sur Ctrl + / (Cmd + / sur Mac). L'éditeur ajoute les marqueurs pour vous, et les mêmes touches les retirent.

Commenter du code

Comme le navigateur ignore les balises à l'intérieur d'un commentaire, entourer du balisage de  le masque sans le supprimer. C'est le moyen le plus rapide de tester une page sans un élément :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Supprimez  sur la ligne de la bannière et elle réapparaît. Le code commenté est quand même téléchargé avec la page, donc une fois sûr de ne plus en avoir besoin, supprimez-le.

On ne peut pas imbriquer les commentaires

Le premier --> ferme toujours le commentaire. Si le code que vous commentez contient déjà un commentaire, le commentaire extérieur se termine trop tôt et la suite déborde sur la page. Cet exemple donne des commentaires imbriqués à l'analyseur du navigateur et montre ce qui finit par être visible :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> s'affiche comme du texte. Avant de commenter un gros bloc, supprimez les commentaires qu'il contient (ou modifiez leur --> pour qu'il ne corresponde plus).

Quelques règles de plus : un commentaire ne peut pas commencer par , alors évitez les deux dans le texte du commentaire.

Les commentaires sont publics

Les commentaires font partie du HTML envoyé par le serveur, donc chaque visiteur peut les lire avec « Afficher le code source » ou les outils de développement. Un script peut aussi les lister :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Réservez les commentaires aux notes sur le code. Rien de privé (mots de passe, clés d'API, URL internes, données clients) ne doit jamais se trouver dans le HTML, commenté ou non. Les outils de build et les minificateurs retirent généralement les commentaires du HTML de production, ce qui économise aussi quelques octets.

Les commentaires en CSS et en JavaScript

Les commentaires HTML ne fonctionnent qu'en HTML. Dans <style> et <script>, on utilise la syntaxe de commentaire du langage concerné :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

Le titre devient bleu : le CSS ignore les marqueurs  eux-mêmes et applique quand même la règle placée entre eux. Seul /* ... */ désactive du CSS. La page sur les commentaires CSS présente cette syntaxe.

Les commentaires conditionnels

Du vieux code contient parfois . C'étaient des instructions pour Internet Explorer 9 et versions antérieures. Tous les navigateurs actuels les traitent comme des commentaires ordinaires : le contenu est ignoré et tout le bloc peut être supprimé.

Erreurs fréquentes

Imbriquer des commentaires. Le --> intérieur termine le commentaire extérieur. Retirez les commentaires intérieurs avant de commenter un bloc.
Mettre des secrets dans les commentaires. Les commentaires sont envoyés à chaque visiteur.
Un --> manquant. Tout ce qui suit <!-- jusqu'à la fin du fichier disparaît, comme si la moitié de la page s'était volatilisée.
Utiliser  dans du CSS. Cela ne désactive pas les règles. Utilisez /* */.
Utiliser // en HTML. // note s'affiche comme du texte. HTML ne comprend que .

Questions fréquentes

Comment écrire un commentaire en HTML ?

Commencez-le par  : . Tout ce qui se trouve entre les deux marqueurs est ignoré par le navigateur, balises comprises, donc la même syntaxe sert à commenter du code.

Comment faire un commentaire sur plusieurs lignes en HTML ?

HTML n'a qu'une seule syntaxe de commentaire, et elle peut s'étendre sur autant de lignes que vous voulez. Mettez  après la dernière.

Quel est le raccourci pour commenter en HTML ?

Dans VS Code et la plupart des éditeurs de code, sélectionnez les lignes et appuyez sur Ctrl + / (Windows et Linux) ou Cmd + / (Mac). L'éditeur entoure la sélection de , et les mêmes touches les retirent.

Peut-on imbriquer des commentaires HTML ?

Non. Le premier --> termine le commentaire, donc dans  c --> le texte c --> s'affiche sur la page. Pour commenter un bloc qui contient déjà un commentaire, supprimez ou modifiez d'abord le commentaire intérieur.

Les utilisateurs peuvent-ils voir les commentaires HTML ?

Ils ne sont pas affichés, mais ils sont envoyés au navigateur avec la page. N'importe qui peut les lire avec « Afficher le code source » ou les outils de développement, alors n'y mettez jamais de mots de passe, de clés ou de notes privées.

Les commentaires HTML fonctionnent-ils dans le CSS ou le JavaScript ?

Non. Dans un élément <style>, utilisez /* ... */, et dans un <script>, utilisez // ou /* ... */. Un commentaire HTML dans un bloc de style ne masque pas les règles CSS qu'il contient.

Concepts liés