Les commentaires html : Tout savoir

5/5 - (1 vote)

Table des matières

Qu’est-ce qu’un commentaire html ?

Un commentaire html, c’est un moyen d’ajouter des remarques dans le code source sans que celles-ci soient prises en compte par le navigateur. Ça sert, par exemple, pour expliquer ou désactiver temporairement des parties de code. Ils sont particulièrement utiles lors de la collaboration entre développeurs.

Ils permettent d’ajouter des explications sur le fonctionnement du code, de laisser des messages pour les collègues ou de se rappeler pourquoi certaines décisions ont été prises. Pour insérer un commentaire HTML, on utilise la syntaxe suivante : . Ainsi, tout ce qui se trouve entre ces balises est ignoré par le navigateur et n’affecte pas l’affichage de la page.

Exemple de commentaire explicatif en html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de page HTML avec commentaire</title>
</head>
<body>
    <!-- Voici un commentaire expliquant que la section suivante contient un titre et un paragraphe -->
    <h1>Titre de la page</h1>
    <p>Ceci est un exemple de paragraphe dans une page HTML.</p>
</body>
</html>

Résultat du commentaire html explicatif en production

Exemple de commentaire en html lorsque vous réalisez des tests

	<!-- <form action="/process-form.php" method="post">
		<label for="nom">Nom :</label>
		<input type="text" id="nom" name="nom"><br><br>

		<label for="email">E-mail :</label>
		<input type="email" id="email" name="email"><br><br>

		<label for="message">Message :</label>
		<textarea id="message" name="message"></textarea><br><br>

		<input type="submit" value="Envoyer">
	</form> -->

Dans cet exemple, nous avons commenté le formulaire dans son entièreté, cela peut servir lorsque vous faites des tests. Que vous essayez de débuguer du code en production.

Comment bien commenter un code ?

Pour bien commenter un code, il est important de suivre quelques bonnes pratiques. D’abord, il faut être clair et concis dans les explications, en évitant d’être trop verbeux. Ensuite, il est utile d’expliquer le “pourquoi” derrière le code plutôt que le “comment”, car cela aide les autres développeurs à comprendre les intentions et les raisonnements. N’hésitez pas à mettre en évidence les parties complexes ou les astuces utilisées pour résoudre un problème.

Pensez également à commenter les fonctions, les classes et les variables, en indiquant leur rôle, leur type et leur portée. Utilise des conventions de nommage claires et cohérentes pour faciliter la compréhension du code (surtout avec les autres langages du type JS, PHP, Python etc …).

Enfin, évitez de commenter l’évidence, car cela peut alourdir le code et rendre la lecture plus difficile. Par contre, fais en sorte de mettre à jour les commentaires lorsque le code évolue, afin de maintenir une documentation à jour et cohérente.

Commenter du code html dans du code PHP


// Début du code PHP

// Définition d'une variable
$nom = "Dupont";

// Début du code HTML
echo "<p>Bienvenue sur mon site web</p>";
// La ligne suivante est une ligne commentée en HTML
echo "<!-- Cette ligne est un commentaire HTML -->";
echo "<p>Mon nom est " . $nom . "</p>";
// Fin du code HTML

// Fin du code PHP

Dans cet exemple, nous faisons un echo du commentaire html de façon à pouvoir l’afficher avec PHP.

Résultat du commentaire html dans PHP en production

Est-ce que les commentaires html ont un impact sur le référencement naturel (SEO) ?

Dans un premier temps, je vous dirai que non, cela n’a aucun impact direct sur votre référencement et vos positions dans les résultats de recherche Google car les commentaires ne sont pas interprétés par les moteurs de recherche.

Cependant, d’une certaine manière, cela pourrait tout de même influencer le SEO. Par exemple, un code bien structuré et documenté à l’aide de commentaires pertinents peut aider les développeurs à créer des sites Web plus rapides et plus réactifs, ce qui peut améliorer l’expérience utilisateur et avoir un impact positif sur le SEO .

D’un autre côté, l’utilisation excessive de commentaires inutiles peut augmenter la taille du fichier HTML, ce qui peut entraîner des temps de chargement plus longs pour les pages. Les moteurs de recherche, tels que Google, prennent en compte la vitesse de chargement des pages (PageSpeed Insights) lors de l’évaluation des sites Web, et un temps de chargement plus long peut avoir un impact négatif sur le référencement (augmentation du taux de rebond).

En résumé, bien que les commentaires HTML n’aient pas d’impact direct sur le SEO, leur utilisation appropriée peut contribuer à un site Web bien conçu et performant, ce qui peut indirectement améliorer le référencement naturel.