{"id":5471,"date":"2024-08-27T20:32:27","date_gmt":"2024-08-27T20:32:27","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/contenu-aside-atouts-html-guide\/"},"modified":"2024-12-10T09:53:40","modified_gmt":"2024-12-10T09:53:40","slug":"contenu-aside-atouts-html-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/contenu-aside-atouts-html-guide\/","title":{"rendered":"11.9 Contenu aside Atouts en HTML : Guide Pratique"},"content":{"rendered":"\n\n\n<p><strong>Les balises <code>&lt;aside&gt;<\/code> en HTML<\/strong> sont essentielles pour structurer le contenu secondaire d&rsquo;une page web. Comprendre comment les utiliser peut grandement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et l&rsquo;organisation de votre site. Plongeons dans un guide pratique sur les balises <code>&lt;aside&gt;<\/code> avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Contenu aside Atouts<\/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\/586679695?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 <code>&lt;aside&gt;<\/code> est une balise s\u00e9mantique en HTML5 destin\u00e9e \u00e0 du contenu autonome qui est indirectement li\u00e9 au contenu principal. Ce contenu peut inclure des barres lat\u00e9rales, des widgets, des publicit\u00e9s ou des citations qui compl\u00e8tent l&rsquo;information principale de la page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples d&rsquo;utilisation du Contenu aside Atouts<\/h3>\n\n\n\n<p>Voyons quelques exemples de situations o\u00f9 la balise <code>&lt;aside&gt;<\/code> peut \u00eatre utilis\u00e9e pour structurer le contenu d\u2019une page web :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;article&gt;\n  &lt;h1&gt;Article Principal&lt;\/h1&gt;\n  &lt;p&gt;Ceci est le contenu principal de l'article.&lt;\/p&gt;\n  \n  &lt;aside&gt;\n    &lt;h2&gt;Barre Lat\u00e9rale&lt;\/h2&gt;\n    &lt;p&gt;Ceci est un contenu compl\u00e9mentaire comme des liens vers des articles connexes ou des annonces.&lt;\/p&gt;\n  &lt;\/aside&gt;\n&lt;\/article&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Meilleures pratiques pour utiliser le Contenu aside Atouts<\/h3>\n\n\n\n<p><p>Quelques bonnes pratiques pour utiliser correctement la balise <code>&lt;aside&gt;<\/code> :<\/p>\n<ul>\n    <li><strong>Positionnement :<\/strong> Placez le contenu de l&rsquo;<code>&lt;aside&gt;<\/code> de mani\u00e8re \u00e0 ce qu&rsquo;il compl\u00e8te et soit pertinent par rapport au contenu principal.<\/li>\n    <li><strong>Accessibilit\u00e9 :<\/strong> Assurez-vous que le contenu de l&rsquo;<code>&lt;aside&gt;<\/code> reste accessible \u00e0 tous les utilisateurs, y compris ceux qui utilisent des lecteurs d&rsquo;\u00e9cran.<\/li>\n    <li><strong>CSS :<\/strong> Utilisez des styles CSS pour diff\u00e9rencier visuellement le contenu de l&rsquo;<code>&lt;aside&gt;<\/code> du reste de la page.<\/li>\n<\/ul><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Styler le Contenu aside Atouts avec CSS<\/h3>\n\n\n\n<p>Pour rendre le contenu de l&rsquo;<code>&lt;aside&gt;<\/code> plus attrayant et distinct de l&rsquo;article principal, vous pouvez utiliser des styles CSS. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>aside {\n  background-color: #f9f9f9;\n  border: 1px solid #ddd;\n  padding: 10px;\n  margin: 10px 0;\n}\n\naside h2 {\n  font-size: 1.2em;\n  margin-top: 0;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Contenu aside Atouts pour les barres lat\u00e9rales<\/h3>\n\n\n\n<p>Un des usages les plus courants de la balise <code>&lt;aside&gt;<\/code> est pour les barres lat\u00e9rales. Ces barres peuvent inclure des liens de navigation suppl\u00e9mentaires, des actualit\u00e9s, des promotions, etc. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside&gt;\n  &lt;h2&gt;Actualit\u00e9s&lt;\/h2&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Nouvel Article sur HTML5&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Mise \u00e0 jour de CSS&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Introduction \u00e0 JavaScript&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/aside&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>&lt;aside&gt;<\/code> pour les citations et accroches<\/h3>\n\n\n\n<p>La balise <code>&lt;aside&gt;<\/code> peut \u00e9galement \u00eatre utilis\u00e9e pour mettre en valeur des citations, des accroches, ou des notes importantes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;article&gt;\n  &lt;h1&gt;Introduction aux Balises HTML&lt;\/h1&gt;\n  &lt;p&gt;Les balises HTML sont les \u00e9l\u00e9ments de base pour structurer une page web.&lt;\/p&gt;\n  \n  &lt;aside&gt;\n    &lt;blockquote&gt;\n      &lt;p&gt;\"HTML est le squelette de votre site web\"&lt;\/p&gt;\n      &lt;footer&gt;- Anonyme&lt;\/footer&gt;\n    &lt;\/blockquote&gt;\n  &lt;\/aside&gt;\n&lt;\/article&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples concrets de <code>&lt;aside&gt;<\/code> en production<\/h3>\n\n\n\n<p>Pour voir des exemples concrets de l&rsquo;utilisation de la balise <code>&lt;aside&gt;<\/code>, consultez des sites web populaires qui utilisent cette balise pour am\u00e9liorer la structure et l&rsquo;exp\u00e9rience utilisateur. Par exemple, <a href=\"https:\/\/www.mozilla.org\/fr\/\" rel=\"noopener\" target=\"_blank\">Mozilla<\/a> utilise souvent des balises <code>&lt;aside&gt;<\/code> pour leurs sections de contenu rejoint.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les balises <code>&lt;aside&gt;<\/code> en HTML sont essentielles pour organiser le contenu secondaire d&rsquo;une page web. En suivant ce guide pratique, vous pouvez am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et la lisibilit\u00e9 du contenu de votre site web. Pour plus de ressources sur l&rsquo;utilisation des balises HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">tutoriel sur la cr\u00e9ation de votre premi\u00e8re page HTML<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/devenir-un-d%C3%A9veloppeur-python\/144\">notre cours sur le d\u00e9veloppement Python<\/a>. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter pour ma\u00eetriser l&rsquo;utilisation des <code>&lt;aside&gt;<\/code> dans vos projets web. Vous pouvez \u00e9galement lire notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/forms-html-guide-pratique\">sur les formulaires en HTML<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/validation(code-html-w3c-tutoriel\">tutoriel sur la validation du code HTML avec le W3C<\/a>. Bon coding !<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Formation sur HTML et CSS\" id=\"learnify-banner\" title=\"\"><\/a><\/figure>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Les balises &lt;aside&gt; en HTML sont essentielles pour structurer le contenu secondaire d&rsquo;une page web. Comprendre comment les utiliser peut grandement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2711,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5471","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\/5471","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=5471"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5471\/revisions"}],"predecessor-version":[{"id":6085,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5471\/revisions\/6085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2711"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}