Qu'est-ce qu'un commentaire HTML ?

Chapitre 9 • Commentaires HTML

Un commentaire HTML est une note que vous insérez dans votre code, invisible pour les visiteurs de votre site, mais bien visible pour vous (ou vos collègues développeurs) dans le code source.

Caractéristiques :

  • Invisible : N'apparaît pas dans le navigateur
  • Documentation : Aide à comprendre le code
  • Organisation : Permet de structurer le code
  • Débogage : Peut servir à désactiver du code temporairement
<!-- Exemple basique de commentaire -->

Syntaxe du commentaire

Chapitre 9 • Commentaires HTML

La syntaxe des commentaires HTML est simple et reconnaissable :

Syntaxe de base

<!-- Ceci est un commentaire -->

Obligatoire : ouvrir avec <!-- et fermer avec -->

Caractéristiques

  • Peut être placé n'importe où dans le code HTML
  • Peut contenir du texte ou des balises HTML
  • N'apparaît pas dans le rendu final

Attention

Ne pas confondre avec les commentaires CSS (/* */) ou JavaScript (// ou /* */).

À quoi servent les commentaires ?

Chapitre 9 • Commentaires HTML

Les commentaires ont plusieurs utilités essentielles dans le développement web :

Documentation

<!-- Section de navigation principale -->
<nav>...</nav>

Explique le rôle d'une section de code

Organisation

<!-- ========== HEADER ========== -->
<header>...</header>

Sépare visuellement les parties du code

Rappels

<!-- TODO: Optimiser cette section -->

Laisse des notes pour plus tard

Bon à savoir

Les commentaires sont particulièrement utiles dans les projets collaboratifs ou lorsque vous reviendrez sur votre code après plusieurs mois.

Commentaires multilignes

Chapitre 9 • Commentaires HTML

Vous pouvez écrire des commentaires sur plusieurs lignes entre les balises d'ouverture et de fermeture.

<!--
  Ce formulaire permet aux utilisateurs
  de s'inscrire à notre newsletter.
  À tester sur mobile aussi.
-->
<form>...</form>

Bonnes pratiques pour les commentaires longs :

  • Aligner les étoiles ou les tirets pour la lisibilité
  • Laisser une ligne vide avant et après le commentaire
  • Être concis mais complet dans les explications

Attention

Les commentaires HTML ne peuvent pas être imbriqués. Ceci provoquerait une erreur :

<!-- Commentaire <!-- imbriqué --> -->

Commentaires temporaires

Chapitre 9 • Commentaires HTML

Les commentaires peuvent servir à désactiver temporairement du code HTML sans le supprimer.

Désactiver du code

<!-- <div class="pub">Achetez mon e-book !</div> -->

La publicité ne s'affichera pas

Utilité

  • Débogage
  • Tests A/B
  • Mise en pause de fonctionnalités

Astuce

Utilisez des commentaires comme <!-- TODO: --> ou <!-- FIXME: --> pour marquer les sections à revenir voir plus tard.

Ne pas confondre

Chapitre 9 • Commentaires HTML

Il est important de ne pas confondre les commentaires avec le contenu visible de la page.

Commentaire (invisible)

<!-- Ceci est un message secret -->

N'apparaîtra pas dans la page

Contenu visible

<p>Ceci est un vrai paragraphe.</p>

S'affichera normalement

Sécurité

Les commentaires ne protègent pas le contenu ! Ils sont visibles dans le code source du navigateur. Ne mettez jamais d'informations sensibles dans des commentaires.

Bonnes pratiques

Chapitre 9 • Commentaires HTML

À faire

  • Commentez les zones complexes
  • Séparez les sections logiques
  • Utilisez des conventions (TODO, FIXME)
  • Soyez concis mais clair

À éviter

  • Commenter chaque ligne inutilement
  • Laisser des commentaires obsolètes
  • Écrire des commentaires trop vagues
  • Mettre des informations sensibles

Exemple de bonne organisation

<!-- ========== HEADER ========== -->
<header>
    <!-- Logo principal -->
    <div class="logo">...</div>
    
    <!-- Navigation principale -->
    <nav>...</nav>
</header>

<!-- TODO: Ajouter la bannière promo -->
<!-- <div class="promo-banner">...</div> -->

Erreurs fréquentes

Chapitre 9 • Commentaires HTML

Oublier de fermer

<!-- Mon commentaire ❌

Peut casser le rendu de la page

Imbrication

<!-- Commentaire <!-- imbriqué --> -->

Provoque une erreur

Confiance excessive

<!-- Mot de passe: 12345 -->

Visible dans le code source !

Comment éviter ces erreurs

  • Toujours vérifier la fermeture des commentaires
  • Ne jamais imbriquer les commentaires
  • Ne pas mettre d'informations sensibles
  • Utiliser un éditeur avec coloration syntaxique

En résumé

Chapitre 9 • Commentaires HTML

Définition

Notes invisibles dans le code

Syntaxe

<!-- commentaire -->

Multiligne

Plusieurs lignes possibles

Utilité

Documentation et organisation

Les commentaires HTML sont un outil puissant pour documenter et organiser votre code. Utilisés à bon escient, ils rendront votre code plus lisible et plus facile à maintenir, surtout lorsque vous ou d'autres développeurs y reviendrez après plusieurs mois. Dans le prochain chapitre, nous aborderons les formulaires HTML.