HTML balise commentaire  : syntaxe et usages pratiques

LES BALISES HTML

La balise de commentaire HTML  insère du texte dans le code source que le navigateur ignore complètement : il ne l'affiche pas à l'écran et ne l'exécute pas. Seul le développeur qui ouvre le fichier source peut le lire. C'est l'outil de base pour documenter une page, expliquer une structure complexe, ou désactiver temporairement un bloc de code sans le supprimer.

Étape 1 — Écrire un commentaire HTML : la syntaxe de base

Un commentaire HTML commence par . Tout ce qui se trouve entre ces deux marqueurs est ignoré par le navigateur, qu'il s'agisse d'une ligne ou de plusieurs.

Exemple — commentaire sur une ligne : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<body>

  <!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur. -->
  <p>Ceci est un paragraphe visible.</p>

</body>
</html>

Résultat attendu : le navigateur affiche uniquement « Ceci est un paragraphe visible. ». Le commentaire n'apparaît nulle part dans la page rendue. Il reste visible uniquement dans le code source (Ctrl+U dans Chrome et Firefox).

Étape 2 — Écrire un commentaire sur plusieurs lignes

Les marqueurs  peuvent encadrer autant de lignes que nécessaire. C'est utile pour décrire une section entière ou noter une explication longue.

Exemple — commentaire multi-lignes : 📋 Copier le code

<!--
  Section : navigation principale
  Mise à jour : juin 2025
  Remarque : le menu est généré dynamiquement via menu.php
-->
<nav>
  <a href="index.php">Accueil</a>
  <a href="contact.php">Contact</a>
</nav>

Résultat attendu : seul le menu de navigation s'affiche. Le bloc de commentaire sur quatre lignes est entièrement ignoré par le navigateur.

Étape 3 — Désactiver temporairement du code HTML

Commenter du code est une façon de le désactiver sans le perdre. C'est utile en phase de développement : on teste une variante d'affichage, on supprime un bloc temporairement, ou on compare deux versions d'une mise en page.

Exemple — désactiver un bloc : 📋 Copier le code

<p>Ce paragraphe est visible.</p>

<!--
<p>Ce paragraphe est désactivé temporairement.
   Il ne s'affichera pas tant qu'il reste dans le commentaire.</p>
-->

<p>Ce paragraphe est aussi visible.</p>

Résultat attendu : deux paragraphes s'affichent — le premier et le troisième. Le deuxième, encadré par les marqueurs de commentaire, est absent de la page rendue.

Étape 4 — Structurer un fichier HTML avec des repères visuels

Dans un fichier HTML long, les commentaires servent de séparateurs lisibles. Ils aident à retrouver rapidement une section dans un fichier de plusieurs centaines de lignes — sans aucun effet sur l'affichage.

Exemple — commentaires comme repères de structure : 📋 Copier le code

<!-- ============ EN-TÊTE ============ -->
<header>
  <h1>Mon site</h1>
</header>

<!-- ============ NAVIGATION ============ -->
<nav>
  <a href="index.php">Accueil</a>
</nav>

<!-- ============ CONTENU PRINCIPAL ============ -->
<main>
  <p>Contenu ici.</p>
</main>

<!-- ============ PIED DE PAGE ============ -->
<footer>
  <p>© 2025</p>
</footer>

Résultat attendu : la page s'affiche normalement avec l'en-tête, la navigation, le contenu et le pied de page. Les lignes de séparation en commentaires n'apparaissent pas à l'écran — elles ne servent qu'à la lisibilité du code source.

Étape 5 — Erreurs fréquentes à éviter

Deux erreurs reviennent souvent avec les commentaires HTML.

Erreur 1 — Imbriquer des commentaires. HTML n'autorise pas les commentaires imbriqués. Le premier --> rencontré ferme le commentaire, peu importe ce qui suit.

Exemple — imbrication incorrecte : 📋 Copier le code

<!-- Commentaire externe <!-- commentaire interne --> suite -->
 ferme tout. "suite -->" apparaît dans la page comme texte brut. -->

Résultat attendu : le texte « suite » et le --> final s'affichent dans la page comme du texte brut. Le commentaire s'est fermé trop tôt.

Erreur 2 — Utiliser -- à l'intérieur d'un commentaire. La séquence -- est réservée aux marqueurs de début et de fin. La mettre au milieu d'un commentaire cause un comportement imprévisible selon le parseur HTML.

<!-- Valeur min -- max -->


<!-- Valeur min / max -->

Résultat attendu : la deuxième forme ne pose aucun problème. La première peut produire un avertissement dans le validateur HTML du W3C.

Récapitulatif : les quatre usages essentiels

Script complet : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Commentaires HTML — exemples</title>
</head>
<body>

  <!-- 1. Commenter une ligne -->
  <p>Paragraphe visible.</p>

  <!--
    2. Commenter plusieurs lignes
    Auteur : carabde
    Date : juin 2025
  -->

  <!-- 3. Désactiver temporairement du code
  <p>Ce paragraphe est mis en veille.</p>
  -->

  <!-- ====== 4. Repère de section ====== -->
  <footer>
    <p>© 2025 oujood.com</p>
  </footer>

</body>
</html>

Résultat attendu : un seul paragraphe et le pied de page s'affichent. Les trois autres blocs — commentaire de documentation, code désactivé, repère de section — sont tous invisibles dans le rendu navigateur.