Commentaire HTML

17 Juil 2021 | Tutoriel, Web

Un commentaire en HTML s’adresse aux développeurs et n’est pas affiché par les navigateurs (n’apparais donc pas sur la page internet). Ils sont mis directement dans le code et permettent d’indiquer ou d’apporter des précisions sur un élément, sur une ou plusieurs lignes.

Ils permettent d’expliquer une partie de code, pour pouvoir comprendre son utilité en cas de travail d’équipe ou de maintenance sur des pages anciennes.

Dans la spécification W3C, un commentaire en HTML :

Commence par <!-- et se termine par -->

Et tout ce qui se trouve entre ces 2 balises sera considéré comme un commentaire. La plupart des IDE (éditeur de code source/débogueur) changent alors la couleur du texte en gris.

Voici un exemple de commentaire HTML (avec l’IDE Visual Studio Code) :

commentaire html exemple utilité

On peut remarquer un commentaire d’une ligne à la ligne 5 et un commentaire sur plusieurs lignes en ligne 9 et 10.

Nous allons maintenant voir ensemble les particularités aux commentaires en HTML.

 

Commentaire HTML conditionnel

En insérant du code dans un commentaire conditionnel, le navigateur va pouvoir interpréter ou non le code en question en fonction de la condition.

Il existe deux types de commentaires conditionnels :

– Ceux dont le contenu est ignoré par les navigateurs qui n’interprètent pas l’expression conditionnelle.
– Ceux dont le contenu sera toujours pris en compte.

Commentaire dont le contenu doit être ignoré par les autres navigateurs

Les commentaires peuvent également servir à apporter des éléments de code différents en fonction du navigateur, pour palier à un défaut d’affichage ou d’une incompatibilité avec un ancien ou déplaisant navigateur (IE).

<div>Titre</div>
<!--[if expression]>
      CODE HTML exécuté uniquement si la condition est remplie (true)
<![endif]-->
<p>Texte lorem ipsmu</p>

Expressions qui s’exécute uniquement si le navigateur utilisé :

  • [if IE]  est IE (Internet Explorer).
  • [if IE 8] est Internet Explorer en version 8.
  • [if lte IE 8] est Internet Explorer en version inférieur ou égal à 8.
  • [if gte IE 8] est Internet Explorer en version supérieur ou égal à 8.
  • [if !IE] n’est PAS Internet Explorer.
  • [if true] accepte les commentaires conditionnels.

Démonstrations :

Code pour Internet Explorer 7 et suivants :

<div>Titre</div>
<!--[if gte IE 7]>
 <p>Ce paragraphe s'affiche uniquement pour les navigateurs à partir d'Internet Explorer 7.</p>
<![endif]--> 
<p>Texte lorem ipsmu</p>

S’exécute uniquement si le navigateur utilisé accepte les commentaires conditionnels :

<div>Titre</div>
<!--[if true]> 
  <p>Ce paragraphe s'affiche si le navigateur reconnaît les commentaires conditionnels.</p>
<![endif]-->
 <p>Texte lorem ipsmu</p>

Retrouvez notre article dédié aux commentaires en Javascript pour être incollable sur les commentaires.
Marre de perdre votre temps ? Contactez notre agence pour tout besoin en développement.

Pour aller plus loin

Juin 21 2022

Comment créer une application web ?

Les web apps (ou application web) sont aujourd’hui devenues incontournables et servent de nombreux objectifs. Elles sont un excellent moyen de développer des outils en...
Infographie sur les résultats des géants du web
Mar 11 2022

[Infographie] Chiffres clés des géants de l’internet en 2022

Les réseaux sociaux et services du web ne font qu'augmenter depuis ces 10 dernières années, retrouvez ici dans cette infographie ce qu'ils représentent : Chiffres clés...
particularité des liens sur Internet.
Mar 02 2022

Guide 2022 complet des liens (links)

Il y a beaucoup à apprendre sur les liens en HTML. De l'implémentation du balisage et les attributs associés, les meilleures pratiques de style aux choses à éviter, et...
Développements sur mesure agence web Openmydiv
Déc 06 2021

Les pour et les contre du long défilement (Long Scrolling)

Les concepteurs de sites Web adoptent la tendance des sites à long défilement pour leurs divers avantages. Mais un site Web à page unique n'est peut-être pas le bon...
Rédiger une documentation utilisateur pour site web
Oct 14 2021

Documentation utilisateur site web

Qu'est-ce qu'une documentation utilisateur ? Une documentation utilisateur, c'est un support qui décrit l'ensemble du fonctionnement d'une solution d'un point de vue...
Rédiger une documentation technique pour site web
Oct 13 2021

Documentation technique site web

À quoi sert la documentation technique d'un site web ? La documentation technique va permettre d'aborder tous les aspects techniques d'un projet web. Elle va décrire...
Audit réalisé avec Ligthouse d'un site optimisé et performant
Oct 13 2021

À quelle vitesse un site doit-il charger en 2021 ?

Voici des conseils pour booster votre site internet. Le chargement rapide est primordial pour l’expérience utilisateur, mais également pour les moteurs de recherche....
Développements sur mesure agence web OpenMyDiv
Sep 10 2021

Pourquoi avoir un site Internet est-il si important ?

Un site Internet a une importance capitale pour les entreprises (de toutes les tailles) car donne beaucoup d’avantages marketing que nous allons détailler dans cet...
Développements d'application et de site sur mesure
Juil 17 2021

Commentaire JavaScript

Un commentaire JavaScript permet aux développeurs de ne pas faire afficher une partie de code. Ainsi, cette partie ne sera pas interprétée par le navigateur. Ils sont...
Optimisation site agence web OpenMyDiv
Juil 09 2021

6 choses à savoir sur WordPress

Voici une infographie concernant les avantages que représente la solution Wordpress (CMS le plus utilisé dans le monde) Référencement naturel (SEO), tarifs, chiffres...