{"id":5323,"date":"2024-08-27T15:37:13","date_gmt":"2024-08-27T15:37:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/commentaires-html-utilisation\/"},"modified":"2024-08-27T15:37:16","modified_gmt":"2024-08-27T15:37:16","slug":"commentaires-html-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/commentaires-html-utilisation\/","title":{"rendered":"2.9 Les Commentaires en HTML : Utilisation"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les Commentaires en HTML<\/strong> sont des outils essentiels pour tout d\u00e9veloppeur web. Ils permettent de documenter le code, de d\u00e9sactiver temporairement des sections de code et d&rsquo;organiser le d\u00e9veloppement de projets complexes. Apprenons comment les utiliser de mani\u00e8re efficace pour cr\u00e9er du contenu soign\u00e9 et maintenable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Commentaires en HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586254451?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play();\n    }\n});\n<\/script>\n\n\n\n<p>Les commentaires en HTML ne sont pas affich\u00e9s par les navigateurs web puisque leur fonction principale est de fournir des explications ou des notes aux d\u00e9veloppeurs travaillant sur le code. Ils peuvent \u00e9galement \u00eatre utilis\u00e9s pour d\u00e9sactiver temporairement des sections du code sans les supprimer. D\u00e9couvrons comment \u00e9crire et utiliser les commentaires en HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9crire des Commentaires en HTML<\/h3>\n\n\n\n<p>Pour ajouter un commentaire en HTML, il suffit de placer le texte que vous souhaitez commenter entre les balises <code>&lt;!--<\/code> et <code>--&gt;<\/code>. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&#x3C;!-- Ceci est un commentaire en HTML --&#x3E;<\/code><\/pre>\n\n\n\n<p>Les commentaires peuvent \u00eatre pr\u00e9sents partout dans le code HTML. Ils peuvent \u00eatre plac\u00e9s \u00e0 l&rsquo;int\u00e9rieur des balises, \u00e0 la fin des lignes de code ou entre les \u00e9l\u00e9ments HTML pour fournir des explications suppl\u00e9mentaires.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Commentaires pour Documenter le Code<\/h3>\n\n\n\n<p>Les commentaires sont extr\u00eamement utiles pour documenter le code, ce qui aide \u00e0 comprendre la logique du d\u00e9veloppement, surtout lorsque plusieurs d\u00e9veloppeurs sont impliqu\u00e9s dans un projet. Voici un exemple de documentation de code \u00e0 l&rsquo;aide de commentaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&#x3C;!-- D\u00e9but de la section de l'en-t\u00eate --&#x3E;\n&#x3C;header&#x3E;\n    &#x3C;!-- Logo du site --&#x3E;\n    &#x3C;img src=\"logo.png\" alt=\"Logo\"&#x3E;\n    \n    &#x3C;!-- Menu de navigation principal --&#x3E;\n    &#x3C;nav&#x3E;\n        &#x3C;ul&#x3E;\n            &#x3C;li&#x3E;&#x3C;a href=\"#home\"&#x3E;Accueil&#x3C;\/a&#x3E;&#x3C;\/li&#x3E;\n            &#x3C;li&#x3E;&#x3C;a href=\"#about\"&#x3E;\u00c0 Propos&#x3C;\/a&#x3E;&#x3C;\/li&#x3E;\n            &#x3C;li&#x3E;&#x3C;a href=\"#contact\"&#x3E;Contact&#x3C;\/a&#x3E;&#x3C;\/li&#x3E;\n        &#x3C;\/ul&#x3E;\n    &#x3C;\/nav&#x3E;\n&#x3C;\/header&#x3E;\n&#x3C;!-- Fin de la section de l'en-t\u00eate --&#x3E;<\/code><\/pre>\n\n\n\n<p>Ce type de commentaire peut \u00eatre particuli\u00e8rement utile pour sectionner le code en parties logiques, ce qui est facile \u00e0 suivre et \u00e0 maintenir. Cela facilite \u00e9galement le travail des d\u00e9veloppeurs qui reprennent le projet plus tard. Vous pouvez explorer davantage sur les <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">bases des navigateurs web<\/a> pour comprendre comment les navigateurs traitent de tels \u00e9l\u00e9ments. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9sactiver Temporairement des Sections de Code<\/h3>\n\n\n\n<p>Il est parfois n\u00e9cessaire de d\u00e9sactiver temporairement une section de code sans la supprimer. Utiliser des commentaires pour cela est une m\u00e9thode rapide et s\u00fbre. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&#x3C;div class=\"contenu\"&#x3E;\n    &#x3C;!--\n    &#x3C;p&#x3E;Ce contenu est actuellement d\u00e9sactiv\u00e9.&#x3C;\/p&#x3E;\n    --&#x3E;\n    &#x3C;p&#x3E;Ce contenu est actif.&#x3C;\/p&#x3E;\n&#x3C;\/div&#x3E;<\/code><\/pre>\n\n\n\n<p>Dans l&rsquo;exemple ci-dessus, le paragraphe d\u00e9sactiv\u00e9 ne sera pas affich\u00e9 par le navigateur. Cela permet aux d\u00e9veloppeurs de tester ou de retirer temporairement du code sans le supprimer de mani\u00e8re permanente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Meilleures Pratiques pour Utiliser les Commentaires en HTML<\/h3>\n\n\n\n<p>Voici quelques meilleures pratiques pour utiliser les commentaires en HTML :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Utilisez des commentaires pour expliquer les sections de code complexestes de sorte que d&rsquo;autres d\u00e9veloppeurs puissent facilement comprendre votre logique.<\/li>\n<li>Ne commentez pas chaque ligne de code. Concentrez-vous sur les sections importantes ou complexes.<\/li>\n<li>Utilisez un langage clair et concis dans vos commentaires.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples de Situations d&rsquo;Utilisation des Commentaires<\/h3>\n\n\n\n<p>Voici des exemples concrets o\u00f9 les commentaires HTML peuvent \u00eatre utiles :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Explication de Sections de Code Complexes<\/h4>\n\n\n\n<p>Les commentaires peuvent aider \u00e0 clarifier des blocs de code complexes. Par exemple, si vous avez une logique JavaScript incluse dans votre HTML, expliquer ce que fait chaque section peut \u00eatre tr\u00e8s utile :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&#x3C;!-- D\u00e9but de la section des scripts --&#x3E;\n&#x3C;script&#x3E;\n    &#x3C;!-- Initialisation du formulaire de contact --&#x3E;\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ Valider les emails\n        var emailInput = document.getElementById('email');\n        emailInput.addEventListener('input', function() {\n            var email = emailInput.value;\n            if (!validateEmail(email)) {\n                emailInput.classList.add('invalid');\n            } else {\n                emailInput.classList.remove('invalid');\n            }\n        });\n    });\n\n    &#x3C;!-- Fonction de validation de l'email --&#x3E;\n    function validateEmail(email) {\n        var re = \/^(([^&#x3C;>()\\\\[\\\\]\\\\\\\\.,;:\\\\s@\\\\\"]+(\\\\.[^&#x3C;>()\\\\[\\\\]\\\\\\\\.,;:\\\\s@\\\\\"]+)*)|(\\\\\\\".+\\\\\\\"))@((\\\\[[0-9]{1,3}\\\\.[0,0]{1,3}\\\\.[0-0]{1,3}\\\\.[0-9]{1,0}\\\\])|(([a-zA-Z\\\\-0-9]+\\\\.)+[a-zA-Z]{2,}))$\/;\n        return re.test(String(email).toLowerCase());\n    }\n&#x3C;\/script&#x3E;\n&#x3C;!-- Fin de la section des scripts --&#x3E;<\/code><\/pre>\n\n\n\n<p>Pour plus d&rsquo;informations sur l&rsquo;initialisation de formulaires, vous pouvez consulter cet <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">article sur comment cr\u00e9er votre premi\u00e8re page HTML<\/a>. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9sactiver du Code Non Utilis\u00e9<\/h4>\n\n\n\n<p>Si une section de votre code HTML est temporairement inutilis\u00e9e, vous pouvez la commenter pour la d\u00e9sactiver sans la supprimer :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&#x3C;!--\n&#x3C;div class=\"promo\"&#x3E;\n    &#x3C;h2&#x3E;Promotion sp\u00e9ciale&#x3C;\/h2&#x3E;\n    &#x3C;p&#x3E;Obtenez 50% de r\u00e9duction sur tous nos produits!&#x3C;\/p&#x3E;\n&#x3C;\/div&#x3E;\n--&#x3E;<\/code><\/pre>\n\n\n\n<p>Pour plus de d\u00e9tails sur comment g\u00e9rer les promotions ou des \u00e9l\u00e9ments HTML de ce type, visitez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/tableaux-html-creer-utiliser\">la cr\u00e9ation et l&rsquo;utilisation des tableaux en HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">S\u00e9parer des Sections de Code<\/h4>\n\n\n\n<p>Utiliser des commentaires pour s\u00e9parer les diff\u00e9rentes sections de votre code peut aider \u00e0 maintenir une organisation claire. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&#x3C;!-- Section En-t\u00eate --&#x3E;\n&#x3C;header&#x3E;\n    &#x3C;h1&#x3E;Mon Site Web&#x3C;\/h1&#x3E;\n&#x3C;\/header&#x3E;\n\n&#x3C;!-- Section Contenu Principal --&#x3E;\n&#x3C;main&#x3E;\n    &#x3C;p&#x3E;Bienvenue sur mon site web!&#x3C;\/p&#x3E;\n&#x3C;\/main&#x3E;\n\n&#x3C;!-- Section Pied de Page --&#x3E;\n&#x3C;footer&#x3E;\n    &#x3C;p&#x3E;Contactez-nous: info@monsite.com&#x3C;\/p&#x3E;\n&#x3C;\/footer&#x3E;<\/code><\/pre>\n\n\n\n<p>Pour savoir plus sur comment organiser vos sections HTML, consultez notre tutoriel sur les <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">\u00e9l\u00e9ments HTML<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>commentaires en HTML<\/strong> sont un outil p\u00e9dagogique et organisationnel important pour les d\u00e9veloppeurs web. Ils facilitent la compr\u00e9hension et la maintenance du code, tout en offrant une m\u00e9thode simple pour d\u00e9sactiver temporairement des sections de code. En suivant les bonnes pratiques, vous pouvez tirer pleinement parti des commentaires pour am\u00e9liorer vos projets web. Pour plus de tutoriels sur HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les Commentaires en HTML sont des outils essentiels pour tout d\u00e9veloppeur web. Ils permettent de documenter le code, de d\u00e9sactiver temporairement des sections de&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2709,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5323"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5323\/revisions"}],"predecessor-version":[{"id":5324,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5323\/revisions\/5324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2709"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}