{"id":5455,"date":"2024-08-27T20:00:56","date_gmt":"2024-08-27T20:00:56","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/nouveaux-elements-html5-guide\/"},"modified":"2024-12-05T16:33:27","modified_gmt":"2024-12-05T16:33:27","slug":"nouveaux-elements-html5-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/nouveaux-elements-html5-guide\/","title":{"rendered":"11.1 Nouveaux \u00c9l\u00e9ments HTML5 : Guide et Utilisation"},"content":{"rendered":"\n\n\n<p><strong>Nouveaux \u00c9l\u00e9ments HTML5 : Guide et Utilisation<\/strong> sont des \u00e9l\u00e9ments qui apportent de la s\u00e9mantique et des fonctionnalit\u00e9s \u00e9tendues \u00e0 vos sites web. Ma\u00eetriser ces nouveaux \u00e9l\u00e9ments peut transformer votre mani\u00e8re de d\u00e9velopper en rendant votre code plus clair, plus structur\u00e9 et plus performant. Apprenons comment les utiliser gr\u00e2ce \u00e0 des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Nouveaux \u00c9l\u00e9ments HTML5<\/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\/586679168?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>Avec l&rsquo;\u00e9volution du web, HTML5 a introduit de nombreux nouveaux \u00e9l\u00e9ments qui apportent plus de s\u00e9mantique et de puissance aux d\u00e9veloppeurs web. Ces \u00e9l\u00e9ments facilitent la structuration du contenu et l&rsquo;int\u00e9gration des fonctionnalit\u00e9s avanc\u00e9es sans n\u00e9cessiter de plug-ins externes. Dans ce guide, nous allons explorer certains de ces nouveaux \u00e9l\u00e9ments et voir comment ils peuvent \u00eatre utilis\u00e9s efficacement.<\/p>\n\n\n\n<p>Pour approfondir vos connaissances sur HTML, consultez notre guide sur le <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">fonctionnement des navigateurs web avec HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments de Structure<\/h3>\n\n\n\n<p>Les \u00e9l\u00e9ments de structure HTML5 apportent une meilleure organisation et compr\u00e9hension du contenu de votre page. Voici quelques-uns des plus importants :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;header&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;header&gt;<\/code> repr\u00e9sente un en-t\u00eate pour un document ou une section. Il contient g\u00e9n\u00e9ralement des titres, logos, et d&rsquo;autres informations introductives.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;header&gt;\n    &lt;h1&gt;Bienvenue sur Mon Site&lt;\/h1&gt;\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=\"#contact\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/nav&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;article&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;article&gt;<\/code> est utilis\u00e9 pour des contenus autonomes, comme des articles de blog ou des entr\u00e9es de forum. Chaque <code>&lt;article&gt;<\/code> devrait \u00eatre capable d&rsquo;exister par lui-m\u00eame ind\u00e9pendamment du reste du site.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;article&gt;\n    &lt;h2&gt;Les Nouveaut\u00e9s de HTML5&lt;\/h2&gt;\n    &lt;p&gt;HTML5 apporte de nombreuses nouvelles fonctionnalit\u00e9s qui facilitent le d\u00e9veloppement de pages web dynamiques et interactives.&lt;\/p&gt;\n&lt;\/article&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;footer&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;footer&gt;<\/code> repr\u00e9sente un pied de page pour un document ou une section. Il contient g\u00e9n\u00e9ralement des informations sur l&rsquo;auteur, des liens vers des conditions d&rsquo;utilisation, des notes de copyright, etc.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;footer&gt;\n    &lt;p&gt;\u00a9 2023 Mon Site. Tous droits r\u00e9serv\u00e9s.&lt;\/p&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments Multim\u00e9dias<\/h3>\n\n\n\n<p>HTML5 a \u00e9galement introduit des \u00e9l\u00e9ments utiles pour l&rsquo;int\u00e9gration de contenu multim\u00e9dia sans n\u00e9cessiter de plug-ins externes comme Flash. Voici les principaux \u00e9l\u00e9ments :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;audio&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;audio&gt;<\/code> permet d&rsquo;int\u00e9grer des fichiers audio. Vous pouvez fournir plusieurs sources audio pour une meilleure compatibilit\u00e9 avec diff\u00e9rents navigateurs.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;audio controls&gt;\n    &lt;source src=\"audio-file.mp3\" type=\"audio\/mp3\"&gt;\n    &lt;source src=\"audio-file.ogg\" type=\"audio\/ogg\"&gt;\n    Votre navigateur ne supporte pas l'\u00e9l\u00e9ment audio.\n&lt;\/audio&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;video&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;video&gt;<\/code> permet d&rsquo;int\u00e9grer des fichiers vid\u00e9o. Tout comme l&rsquo;\u00e9l\u00e9ment <code>&lt;audio&gt;<\/code>, vous pouvez fournir plusieurs sources pour garantir la compatibilit\u00e9 avec diff\u00e9rents navigateurs.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;video controls width=\"600\"&gt;\n    &lt;source src=\"video-file.mp4\" type=\"video\/mp4\"&gt;\n    &lt;source src=\"video-file.ogg\" type=\"video\/ogg\"&gt;\n    Votre navigateur ne supporte pas l'\u00e9l\u00e9ment vid\u00e9o.\n&lt;\/video&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments de Formulaire Am\u00e9lior\u00e9s<\/h3>\n\n\n\n<p>HTML5 a enrichi les \u00e9l\u00e9ments de formulaire en ajoutant de nouveaux types d&rsquo;entr\u00e9es et attributs. Ces am\u00e9liorations facilitent la validation et la saisie de donn\u00e9es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;input&gt; avec types HTML5<\/code><\/h4>\n\n\n\n<p>HTML5 introduit de nouveaux types d&rsquo;entr\u00e9es comme <code>email<\/code>, <code>url<\/code>, <code>tel<\/code>, <code>date<\/code>, et bien d&rsquo;autres. Ces types de champs s&rsquo;accompagnent de validations et comportements par d\u00e9faut.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;form&gt;\n    &lt;label for=\"email\"&gt;Email : &lt;\/label&gt;\n    &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n\n    &lt;label for=\"date\"&gt;Date de Naissance : &lt;\/label&gt;\n    &lt;input type=\"date\" id=\"date\" name=\"date\"&gt;\n\n    &lt;input type=\"submit\" value=\"Envoyer\"&gt;\n&lt;\/form&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;datalist&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;datalist&gt;<\/code> associ\u00e9 \u00e0 un \u00e9l\u00e9ment <code>&lt;input&gt;<\/code> permet de fournir une liste d&rsquo;options pr\u00e9d\u00e9finies \u00e0 partir desquelles l&rsquo;utilisateur peut s\u00e9lectionner une valeur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;label for=\"langages\"&gt;Choisissez un langage : &lt;\/label&gt;\n&lt;input list=\"langages\" name=\"langage\" id=\"langage\"&gt;\n&lt;datalist id=\"langages\"&gt;\n    &lt;option value=\"HTML\"&gt;\n    &lt;option value=\"CSS\"&gt;\n    &lt;option value=\"JavaScript\"&gt;\n    &lt;option value=\"Python\"&gt;\n    &lt;option value=\"Java\"&gt;\n&lt;\/datalist&gt;\n<\/code><\/pre>\n\n\n\n<p>Pour apprendre \u00e0 cr\u00e9er votre premi\u00e8re page HTML, visitez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">tutoriel facile pour cr\u00e9er une premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nouvel \u00c9l\u00e9ments S\u00e9mantiques<\/h3>\n\n\n\n<p>HTML5 a introduit de nouveaux \u00e9l\u00e9ments s\u00e9mantiques qui permettent de structurer davantage le document et d&rsquo;am\u00e9liorer l&rsquo;accessibilit\u00e9 et le r\u00e9f\u00e9rencement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;aside&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;aside&gt;<\/code> repr\u00e9sente une partie du contenu qui est indirectement reli\u00e9e au contenu principal. Il est souvent utilis\u00e9 pour des barres lat\u00e9rales, des panneaux d&rsquo;info, ou d&rsquo;autres types de contenus suppl\u00e9mentaires.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;aside&gt;\n    &lt;h2&gt;Articles connexes&lt;\/h2&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#article1\"&gt;Article 1&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#article2\"&gt;Article 2&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#article3\"&gt;Article 3&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/aside&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><code>&lt;figure&gt; et &lt;figcaption&gt;<\/code><\/h4>\n\n\n\n<p>L&rsquo;\u00e9l\u00e9ment <code>&lt;figure&gt;<\/code> est utilis\u00e9 pour encapsuler du contenu, g\u00e9n\u00e9ralement des images, avec une l\u00e9gende gr\u00e2ce \u00e0 l&rsquo;\u00e9l\u00e9ment <code>&lt;figcaption&gt;<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;figure&gt;\n    &lt;img src=\"montagne.jpg\" alt=\"Photo d'une montagne\"&gt;\n    &lt;figcaption&gt;Une magnifique montagne en \u00e9t\u00e9&lt;\/figcaption&gt;\n&lt;\/figure&gt;\n<\/code><\/pre>\n\n\n\n<p>Pour plus d&rsquo;informations sur l&rsquo;utilisation des balises s\u00e9mantiques, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">guide complet sur les \u00e9l\u00e9ments du head HTML<\/a>.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Nouveaux \u00c9l\u00e9ments HTML5 : Guide et Utilisation sont des \u00e9l\u00e9ments qui apportent de la s\u00e9mantique et des fonctionnalit\u00e9s \u00e9tendues \u00e0 vos sites web. Ma\u00eetriser ces&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5455","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\/5455","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=5455"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5455\/revisions"}],"predecessor-version":[{"id":6079,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5455\/revisions\/6079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2750"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}