{"id":5461,"date":"2024-08-27T20:13:13","date_gmt":"2024-08-27T20:13:13","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/barre-navigation-html-utiliser-nav\/"},"modified":"2024-08-27T20:13:16","modified_gmt":"2024-08-27T20:13:16","slug":"barre-navigation-html-utiliser-nav","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/barre-navigation-html-utiliser-nav\/","title":{"rendered":"11.4 Barre de Navigation en HTML : Utiliser nav"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Utiliser la barre de navigation en HTML avec &lt;nav&gt;<\/strong> est crucial pour la cr\u00e9ation de sites Web modernes. La balise &lt;nav&gt; permet de structurer des sections de liens de navigation, ce qui am\u00e9liore \u00e0 la fois l&rsquo;accessibilit\u00e9 et le r\u00e9f\u00e9rencement. D\u00e9couvrons comment mettre en place une barre de navigation efficace en utilisant la balise &lt;nav&gt; gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Barre de Navigation 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\/586679334?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) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\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(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La balise &lt;nav&gt; en HTML est utilis\u00e9e pour d\u00e9finir un ensemble de liens de navigation. Cette balise est particuli\u00e8rement utile pour les menus principaux de sites Web, les barres lat\u00e9rales de navigation, ou toute autre collection de liens de navigation. L&rsquo;utilisation correcte de &lt;nav&gt; contribue \u00e0 une meilleure s\u00e9mantique HTML et am\u00e9liore l&rsquo;exp\u00e9rience utilisateur ainsi que le SEO. Pour plus d&rsquo;informations sur la semantique HTML, visitez cet <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\">guide de r\u00e9daction CSS pour HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une Barre de Navigation de Base<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er une barre de navigation simple \u00e0 l&rsquo;aide de la balise &lt;nav&gt; et des \u00e9l\u00e9ments de liste non ordonn\u00e9e &lt;ul&gt; et &lt;li&gt;. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Barre de Navigation de Base&lt;\/title&gt;\n    &lt;style&gt;\n        nav ul {\n            list-style-type: none;\n        }\n        nav ul li {\n            display: inline;\n            margin-right: 20px;\n        }\n        nav a {\n            text-decoration: none;\n            color: #333;\n        }\n<\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;nav&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 Propos&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#services\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/nav&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Styliser la Barre de Navigation<\/h3>\n\n\n\n<p>Pour am\u00e9liorer l'apparence de notre barre de navigation, nous allons ajouter un peu plus de CSS pour la rendre plus attrayante et dynamique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Barre de Navigation Stylis\u00e9e&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n        nav {\n            background-color: #333;\n            padding: 10px;\n        }\n        nav ul {\n            list-style: none;\n            padding: 0;\n        }\n        nav ul li {\n            display: inline;\n            margin-right: 15px;\n        }\n        nav a {\n            text-decoration: none;\n            color: white;\n            font-weight: bold;\n        }\n        nav a:hover {\n            color: #ff6347;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;nav&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 Propos&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#services\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/nav&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre la Barre de Navigation Responsive<\/h3>\n\n\n\n<p>Pour que votre site Web soit accessible sur tous les appareils, il est essentiel de rendre la barre de navigation responsive. Utilisons @media queries pour adapter le menu \u00e0 diff\u00e9rentes tailles d'\u00e9cran. Pour en savoir plus sur les @media queries, consultez ce <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\">guide sur les m\u00e9dias queries<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Barre de Navigation Responsive&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n        nav {\n            background-color: #333;\n            padding: 10px;\n        }\n        nav ul {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            justify-content: space-around;\n        }\n        nav a {\n            text-decoration: none;\n            color: white;\n            font-weight: bold;\n        }\n        nav a:hover {\n            color: #ff6347;\n        }\n        @media (max-width: 768px) {\n            nav ul {\n                flex-direction: column;\n                align-items: center;\n            }\n            nav ul li {\n                margin-bottom: 10px;\n            }\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;nav&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 Propos&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#services\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/nav&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter un Menu Hamburger pour Mobile<\/h3>\n\n\n\n<p>Pour am\u00e9liorer encore l'exp\u00e9rience des utilisateurs mobiles, nous allons ajouter un menu hamburger qui se d\u00e9clenche sur les petits \u00e9crans. Ce type de menu est tr\u00e8s populaire gr\u00e2ce \u00e0 sa simplicit\u00e9 et son efficacit\u00e9. Pour des instructions compl\u00e8tes sur la conception de barre de navigation, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/souscription-hebergeur-site-html\">guide de souscription pour h\u00e9bergeur HTML<\/a>.<\/p>\n<p>Voici un exemple de code entier pour une barre de navigation avec un menu hamburger :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Barre de Navigation avec Menu Hamburger&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            margin: 0;\n            padding: 0;\n        }\n        nav {\n            background-color: #333;\n            padding: 10px;\n            position: relative;\n        }\n        nav ul {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            display: flex;\n            justify-content: space-around;\n        }\n        nav a {\n            text-decoration: none;\n            color: white;\n            font-weight: bold;\n        }\n        nav a:hover {\n            color: #ff6347;\n        }\n        .hamburger {\n            display: none;\n            flex-direction: column;\n            cursor: pointer;\n        }\n        .hamburger div {\n            width: 25px;\n            height: 3px;\n            background-color: white;\n            margin: 4px 0;\n        }\n        @media (max-width: 768px) {\n            nav ul {\n                display: none;\n                flex-direction: column;\n                align-items: center;\n            }\n            nav ul li {\n                margin-bottom: 10px;\n            }\n            .hamburger {\n                display: flex;\n            }\n        }\n        nav.active ul {\n            display: flex;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;nav&gt;\n    &lt;div class=\"hamburger\"&gt;\n        &lt;div&gt;&lt;\/div&gt;\n        &lt;div&gt;&lt;\/div&gt;\n        &lt;div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#home\"&gt;Accueil&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#about\"&gt;\u00c0 Propos&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#services\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/nav&gt;\n\n&lt;script&gt;\n    document.querySelector('.hamburger').addEventListener('click', function() {\n        document.querySelector('nav').classList.toggle('active');\n    });\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La balise &lt;nav&gt; est essentielle pour cr\u00e9er des barres de navigation accessibles et optimis\u00e9es pour le SEO. En combinant HTML et CSS, vous pouvez styliser et rendre vos menus responsives, offrant ainsi une meilleure exp\u00e9rience utilisateur sur tous les appareils. Continuez \u00e0 explorer et exp\u00e9rimenter avec ces concepts pour perfectionner vos comp\u00e9tences en d\u00e9veloppement web. Pour en savoir plus sur la cr\u00e9ation de mise en page, visitez ce <a href=\"https:\/\/wikiform.fr\/codespace\/disposition-contenu-grid-css-layout\">guide sur les dispositions en CSS Grid<\/a> et sur la gestion des polices, consultez cet <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-progress-mozilla-firefox-html\">article sur l'utilisation des polices CSS<\/a>.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Utiliser la barre de navigation en HTML avec &lt;nav&gt; est crucial pour la cr\u00e9ation de sites Web modernes. La balise &lt;nav&gt; permet de structurer&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5461","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\/5461","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5461"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5461\/revisions"}],"predecessor-version":[{"id":5462,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5461\/revisions\/5462"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2705"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}