L’univers du développement web est jalonné de concepts majeurs, parmi lesquels les balises HTML tiennent une place prépondérante. Ces éléments de code sont les briques fondamentales qui structurent et donnent du sens aux pages web. Elles déterminent non seulement la hiérarchie de l’information mais aussi la manière dont le contenu est présenté aux utilisateurs. De la balise titre à l’élément de paragraphe, en passant par les liens hypertextes et les images, une maîtrise des balises HTML est indispensable pour tout aspirant développeur web. Aborder leur diversité et leur fonctionnement est donc essentiel pour édifier des sites internet robustes et accessibles.
Les bases du HTML et la structure d’une page web
Découvrez les fondements du Hypertext Markup Language (HTML), ce langage de balisage qui sert à écrire et organiser le contenu sur le web. Le document HTML débute par un ‘doctype html’ qui signale au navigateur la version du langage utilisée. La structure d’une page se déploie ensuite, ordonnée par des balises HTML qui dictent la disposition du contenu. Chaque balise a un rôle défini, servant à structurer les composants de la page, de l’en-tête au pied de page, en passant par les sections et les articles.
A voir aussi :
Iphone 8 et iphone 8 Plus : que faut-il savoir ?
Au cœur de cette architecture, les balises de premier niveau comme », » et » encadrent les informations essentielles et le contenu visible de la page. La balise » regroupe des éléments majeurs tels que les métadonnées, les liens vers les feuilles de style et les scripts. Au sein de », le contenu interactif prend forme, structuré par des balises sectionnantes et de texte. Ces éléments sont interdépendants : le HTML est composé de balises HTML qui, à leur tour, servent à la structure d’une page web.
La conception d’une page web efficace exige une compréhension claire de la fonction et de l’usage des diverses balises. Les balises d’en-tête comme ‘
‘, » ou » sont vitales pour le référencement et la liaison avec d’autres ressources les balises de structuration du texte, telles que ‘</p><p>
<strong><i>A lire en complément :</i></strong>
<a href="https://asknerd.net/les-signes-revelateurs-des-techniques-de-phishing-a-connaitre-absolument/" title="Les signes révélateurs des techniques de phishing à connaître absolument">Les signes révélateurs des techniques de phishing à connaître absolument</a>
</p>
<h1>‘ pour les titres ou ‘</p>
<p>‘ pour les paragraphes, organisent le contenu de manière logique pour l’utilisateur et les moteurs de recherche. La relation symbiotique entre les <strong>balises HTML</strong> et la <strong>structure d’une page web</strong> reflète la complexité et la beauté inhérentes au développement web.</p>
<h2><span id="Les-principales-balises-HTML-et-leur-fonction">Les principales balises HTML et leur fonction</span></h2>
<p>Abordons les <strong>balises HTML</strong> qui constituent le squelette d’une page web. Les <strong>balises de premier niveau</strong> comme , et forment la structure de base. accueille des balises <strong>d’en-tête</strong> telles que , , , et <title>, essentielles pour définir le comportement et l’apparence de la page ainsi que son interaction avec les moteurs de recherche et les navigateurs. Le , quant à lui, englobe le contenu visible par l’internaute. </p>
<p>Poursuivez avec les <strong>balises de structuration du texte</strong> : </p>
<h1> pour les titres principaux, </p>
<p> pour les paragraphes, <strong> et <em> pour mettre en exergue ou accentuer des portions de texte. Ces éléments contribuent à une hiérarchisation claire, facilitant la lecture et l’indexation par les moteurs de recherche. Les <strong>balises de liste</strong>, </p>
<ul> pour les listes non ordonnées, </p>
<ol> pour celles ordonnées et </p>
<li> pour chaque élément de liste, organisent les informations en points clés ou en séquences numériques.
<p>Considérez les <strong>balises de tableau</strong> : </p>
<table> définit un tableau, </p>
<tr> une ligne, </p>
<th> une cellule d’en-tête et </p>
<td> une cellule standard. Ces balises permettent la présentation de données complexes de manière structurée et accessible. Les <strong>balises de formulaire</strong> comme , et <label> sont déterminantes pour la collecte d’informations et l’interaction utilisateur. </p>
<p>les <strong>balises sectionnantes</strong> telles que </p>
<header>, </p>
<footer>, </p>
<section>, </p>
<article> et </p>
<aside> aident à découper le contenu en sections logiques, améliorant ainsi la navigation et la compréhension de la structure de la page. Les <strong>balises génériques</strong> </p>
<div> et <span>, quant à elles, offrent une flexibilité supplémentaire pour le groupement et la mise en forme du contenu sans impliquer de signification sémantique spécifique. Ces éléments sont la toile sur laquelle les développeurs tissent l’expérience web, chaque balise jouant sa partition spécifique dans la symphonie du développement web.</p>
<h2><span id="Lrsquoimportance-des-balises-HTML-dans-le-developpement-web">L’importance des balises HTML dans le développement web</span></h2>
<p>Les <strong>balises HTML</strong> incarnent le fondement du développement web. Sans elles, impossible d’imaginer le moindre site internet. Chaque balise, précise et fonctionnelle, joue un rôle déterminant dans la <strong>structure d’une page web</strong>. Le HTML, ou Hypertext Markup Language, n’est pas qu’un simple langage de programmation ; c’est le tissu conjonctif qui relie les éléments entre eux, permettant la création de contenus dynamiques et interactifs. </p>
<p>Dans cette architecture numérique, les <strong>balises de premier niveau</strong> comme , et définissent le canevas de base sur lequel s’articulent toutes les autres balises. Ce sont les fondations qui soutiennent l’édifice complexe du contenu web. Leur présence est non négociable, chaque document HTML débutant par une déclaration de type de document pour s’assurer de sa compatibilité avec les navigateurs. </p>
<p>Les <strong>balises d’en-tête</strong>, telles que , , , et <title>, influencent directement l’optimisation pour les moteurs de recherche. Elles orientent le référencement, affectent la charge des ressources et déterminent le comportement de la page. Leur configuration astucieuse est un levier puissant pour améliorer la visibilité en ligne et l’expérience utilisateur. </p>
<p>Les <strong>balises de structuration du texte</strong> et les <strong>balises sectionnantes</strong>, par exemple </p>
<h1>, </p>
<p>, </p>
<header> ou </p>
<footer>, ne sont pas en reste. Elles structurent l’information, lui donnent du sens et guident l’internaute dans sa navigation. De manière similaire, les <strong>balises de liste</strong> et les <strong>balises de tableau</strong> organisent les données, les rendant plus digestes et accessibles. Ces balises, par leur simplicité d’emploi et leur impact direct sur la mise en page, sont indispensables pour les développeurs soucieux de construire des sites web clairs et efficaces.</p>
<h2><span id="Comment-utiliser-les-balises-HTML-dans-la-pratique">Comment utiliser les balises HTML dans la pratique</span></h2>
<p>Entrons dans le vif du sujet : la mise en pratique des <strong>balises HTML</strong> dans la rédaction web. Une bonne maîtrise des balises génériques s’avère essentielle. Prenons </p>
<div> et <span>, des balises omniprésentes qui agissent comme des conteneurs pour d’autres éléments ou pour appliquer des styles spécifiques. Leur force réside dans leur flexibilité et leur capacité à s’intégrer harmonieusement au sein de la structure d’une page web. </p>
<p>Focus sur les <strong>attributs des balises</strong> qui, bien employés, décuplent l’efficacité du code. Les attributs ‘class’ et ‘id’, par exemple, sont majeurs pour identifier des éléments au sein du CSS et du JavaScript, permettant une personnalisation et une manipulation précises. L’attribut ‘style’, quant à lui, insère des règles CSS directement dans une balise, bien que son usage soit à limiter en faveur de feuilles de style externes pour une meilleure maintenance du code. </p>
<p>Abordons les <strong>balises spécifiques</strong> comme <img> et <a>, qui requièrent des attributs tels que ‘src’ pour les images et ‘href’ pour les liens. L’attribut ‘alt’, indispensable pour les images, fournit une description textuelle qui améliore l’accessibilité et le référencement. Ces balises enrichissent le contenu en y intégrant des ressources externes et en facilitant la navigation. </p>
<p>La précision dans l’utilisation des <strong>balises de formulaire</strong> est capitale pour recueillir des informations utilisateur. définit le début et la fin d’un formulaire, tandis que les balises , <textarea> et <button> déclinent les divers champs interactifs. Leur association avec les attributs ‘name’ et ‘type’ garantit leur bon fonctionnement et une collecte de données structurée. </p>
<p>Maîtrisez ces éléments, et le langage HTML n’aura plus de secrets pour vous. Le développement de sites web élégants, fonctionnels et optimisés s’offre alors à ceux qui savent jongler avec les balises et leurs attributs.</p>
</div><!-- .post-content -->
</div>
</div>
</article>
<section class="navigate-posts">
<div class="previous"><span class="main-color title"><i class="fa fa-chevron-left"></i> Article précédent</span><span class="link"><a href="https://asknerd.net/les-secrets-du-reveil-connecte-pour-optimiser-votre-routine-matinale/" rel="prev">Les secrets du réveil connecté pour optimiser votre routine matinale</a></span> </div>
<div class="next"><span class="main-color title">Article suivant <i class="fa fa-chevron-right"></i></span><span class="link"><a href="https://asknerd.net/vitesse-de-processeur-ideale-criteres-pour-performances-pc-optimales/" rel="next">Vitesse de processeur idéale : critères pour performances PC optimales</a></span> </div>
</section>
</div>
<aside class="col-4 sidebar">
<div class="">
<ul>
<li id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://asknerd.net/">
<label>
<span class="screen-reader-text">Rechercher :</span>
<input type="search" class="search-field" placeholder="Rechercher…" value="" name="s" />
</label>
<input type="submit" class="search-submit" value="Rechercher" />
</form></li>
<li id="categories-2" class="widget widget_categories"><div class="widgettitle">Catégories</div>
<ul>
<li class="cat-item cat-item-3"><a href="https://asknerd.net/bureautique/">Bureautique</a>
</li>
<li class="cat-item cat-item-4"><a href="https://asknerd.net/high-tech/">Hardware</a>
</li>
<li class="cat-item cat-item-5"><a href="https://asknerd.net/informatique/">Informatique</a>
</li>
<li class="cat-item cat-item-6"><a href="https://asknerd.net/marketing/">Marketing</a>
</li>
<li class="cat-item cat-item-1"><a href="https://asknerd.net/actu/">News</a>
</li>
<li class="cat-item cat-item-7"><a href="https://asknerd.net/securite/">Sécurité</a>
</li>
<li class="cat-item cat-item-8"><a href="https://asknerd.net/seo/">SEO</a>
</li>
<li class="cat-item cat-item-9"><a href="https://asknerd.net/web/">Web</a>
</li>
</ul>
</li>
<li id="media_image-2" class="widget widget_media_image"><img width="400" height="267" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20267'%3E%3C/svg%3E" class="image wp-image-229 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" decoding="async" data-lazy-srcset="https://asknerd.net/wp-content/uploads/Image1.jpg.webp 400w,https://asknerd.net/wp-content/uploads/Image1-300x200.jpg.webp 300w" data-lazy-sizes="(max-width: 400px) 100vw, 400px" data-lazy-src="https://asknerd.net/wp-content/uploads/Image1.jpg.webp" /><noscript><img width="400" height="267" src="https://asknerd.net/wp-content/uploads/Image1.jpg.webp" class="image wp-image-229 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" decoding="async" srcset="https://asknerd.net/wp-content/uploads/Image1.jpg.webp 400w,https://asknerd.net/wp-content/uploads/Image1-300x200.jpg.webp 300w" sizes="(max-width: 400px) 100vw, 400px" /></noscript></li>
<li id="bunyad-latest-posts-widget-2" class="widget latest-posts">
<div class="widgettitle">Articles récents</div>
<ul class="posts-list">
<li>
<a href="https://asknerd.net/messagerie-libre-pourquoi-nommer-une-alternative-a-facebook-messenger/"><img width="110" height="96" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2096'%3E%3C/svg%3E" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Messagerie libre : pourquoi nommer une alternative à Facebook Messenger" decoding="async" data-lazy-src="https://asknerd.net/wp-content/uploads/out-0-3-110x96.webp" /><noscript><img width="110" height="96" src="https://asknerd.net/wp-content/uploads/out-0-3-110x96.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Messagerie libre : pourquoi nommer une alternative à Facebook Messenger" decoding="async" /></noscript>
</a>
<div class="content">
<div class="cf listing-meta meta above">
<time datetime="2024-10-21T02:17:00+02:00" class="meta-item">octobre 21, 2024</time>
</div>
<a href="https://asknerd.net/messagerie-libre-pourquoi-nommer-une-alternative-a-facebook-messenger/" title="Messagerie libre : pourquoi nommer une alternative à Facebook Messenger">
Messagerie libre : pourquoi nommer une alternative à Facebook Messenger</a>
</div>
</li>
<li>
<a href="https://asknerd.net/formation-en-cybersecurite-et-cyberentrainement-un-imperatif-pour-les-entreprises/"><img width="110" height="96" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2096'%3E%3C/svg%3E" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Formation en cybersécurité et cyber-entraînement : un impératif pour les entreprises" decoding="async" data-lazy-src="https://asknerd.net/wp-content/uploads/165048SysDream-lentreprise-de-cyberscurit676e8c-110x96.jpg" /><noscript><img width="110" height="96" src="https://asknerd.net/wp-content/uploads/165048SysDream-lentreprise-de-cyberscurit676e8c-110x96.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Formation en cybersécurité et cyber-entraînement : un impératif pour les entreprises" decoding="async" /></noscript>
</a>
<div class="content">
<div class="cf listing-meta meta above">
<time datetime="2024-10-15T17:48:08+02:00" class="meta-item">octobre 15, 2024</time>
</div>
<a href="https://asknerd.net/formation-en-cybersecurite-et-cyberentrainement-un-imperatif-pour-les-entreprises/" title="Formation en cybersécurité et cyber-entraînement : un impératif pour les entreprises">
Formation en cybersécurité et cyber-entraînement : un impératif pour les entreprises</a>
</div>
</li>
<li>
<a href="https://asknerd.net/prix-imprimante-3d-quels-facteurs-influencent-le-cout-des-modeles-professionnels/"><img width="110" height="96" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2096'%3E%3C/svg%3E" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Prix imprimante 3D : quels facteurs influencent le coût des modèles professionnels ?" decoding="async" data-lazy-src="https://asknerd.net/wp-content/uploads/out-0-2-110x96.webp" /><noscript><img width="110" height="96" src="https://asknerd.net/wp-content/uploads/out-0-2-110x96.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Prix imprimante 3D : quels facteurs influencent le coût des modèles professionnels ?" decoding="async" /></noscript>
</a>
<div class="content">
<div class="cf listing-meta meta above">
<time datetime="2024-10-14T04:01:00+02:00" class="meta-item">octobre 14, 2024</time>
</div>
<a href="https://asknerd.net/prix-imprimante-3d-quels-facteurs-influencent-le-cout-des-modeles-professionnels/" title="Prix imprimante 3D : quels facteurs influencent le coût des modèles professionnels ?">
Prix imprimante 3D : quels facteurs influencent le coût des modèles professionnels ?</a>
</div>
</li>
<li>
<a href="https://asknerd.net/record-mondial-jusqua-quel-niveau-un-joueur-a-t-il-atteint-dans-candy-crush/"><img width="110" height="96" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2096'%3E%3C/svg%3E" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Record mondial : jusqu’à quel niveau un joueur a-t-il atteint dans Candy Crush ?" decoding="async" data-lazy-src="https://asknerd.net/wp-content/uploads/out-0-1-110x96.webp" /><noscript><img width="110" height="96" src="https://asknerd.net/wp-content/uploads/out-0-1-110x96.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Record mondial : jusqu’à quel niveau un joueur a-t-il atteint dans Candy Crush ?" decoding="async" /></noscript>
</a>
<div class="content">
<div class="cf listing-meta meta above">
<time datetime="2024-10-12T01:28:00+02:00" class="meta-item">octobre 12, 2024</time>
</div>
<a href="https://asknerd.net/record-mondial-jusqua-quel-niveau-un-joueur-a-t-il-atteint-dans-candy-crush/" title="Record mondial : jusqu’à quel niveau un joueur a-t-il atteint dans Candy Crush ?">
Record mondial : jusqu’à quel niveau un joueur a-t-il atteint dans Candy Crush ?</a>
</div>
</li>
<li>
<a href="https://asknerd.net/decryptage-des-erreurs-dauthentification-de-la-freebox-en-cours/"><img width="110" height="96" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2096'%3E%3C/svg%3E" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Décryptage des erreurs d’authentification de la Freebox en cours" decoding="async" data-lazy-src="https://asknerd.net/wp-content/uploads/out-0-110x96.webp" /><noscript><img width="110" height="96" src="https://asknerd.net/wp-content/uploads/out-0-110x96.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" title="Décryptage des erreurs d’authentification de la Freebox en cours" decoding="async" /></noscript>
</a>
<div class="content">
<div class="cf listing-meta meta above">
<time datetime="2024-10-09T00:01:00+02:00" class="meta-item">octobre 9, 2024</time>
</div>
<a href="https://asknerd.net/decryptage-des-erreurs-dauthentification-de-la-freebox-en-cours/" title="Décryptage des erreurs d’authentification de la Freebox en cours">
Décryptage des erreurs d’authentification de la Freebox en cours</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</aside>
</div> <!-- .row -->
</div> <!-- .main -->
<footer class="main-footer">
<div class="wrap">
<ul class="widgets row cf">
<li class="widget col-4 widget_text"> <div class="textwidget"><p>asknerd.net © 2023</p>
</div>
</li> </ul>
</div>
<div class="lower-foot">
<div class="wrap">
<div class="widgets">
<div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-1193" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1193"><a href="https://asknerd.net/contact/">Contact</a></li>
<li id="menu-item-1194" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1194"><a href="https://asknerd.net/mentions-legales/">Mentions Légales</a></li>
<li id="menu-item-1195" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1195"><a href="https://asknerd.net/sitemap/">Sitemap</a></li>
</ul></div> </div>
</div>
</div>
</footer>
</div> <!-- .main-wrap -->
<script type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","headline":"Comprendre les balises HTML : types essentiels et leur utilisation","url":"https:\/\/asknerd.net\/comprendre-les-balises-html-types-essentiels-et-leur-utilisation\/","image":{"@type":"ImageObject","url":"https:\/\/asknerd.net\/wp-content\/uploads\/a61bbca5-642c-45c3-ba0d-913ecca8da6b-1-702x336.png","width":702,"height":336},"datePublished":"2024-02-28T01:35:00+01:00","dateModified":"2024-03-07T12:58:54+01:00","author":{"@type":"Person","name":"Watson"},"publisher":{"@type":"Organization","name":"Ask Nerd","logo":{"@type":"ImageObject","url":"https:\/\/asknerd.net\/wp-content\/uploads\/asknerd.net_.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/asknerd.net\/comprendre-les-balises-html-types-essentiels-et-leur-utilisation\/"}}</script>
<script type="text/javascript" src="https://asknerd.net/wp-content/plugins/table-of-contents-plus/front.min.js?ver=2302" id="toc-front-js" data-rocket-defer defer></script>
<script type="text/javascript" id="rocket_lazyload_css-js-extra">
/* <![CDATA[ */
var rocket_lazyload_css_data = {"threshold":"300"};
/* ]]> */
</script>
<script type="text/javascript" id="rocket_lazyload_css-js-after">
/* <![CDATA[ */
!function o(n,c,a){function u(t,e){if(!c[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(s)return s(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=c[t]={exports:{}},n[t][0].call(r.exports,function(e){return u(n[t][1][e]||e)},r,r.exports,o,n,c,a)}return c[t].exports}for(var s="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,t,r){"use strict";{const c="undefined"==typeof rocket_pairs?[]:rocket_pairs,a=(("undefined"==typeof rocket_excluded_pairs?[]:rocket_excluded_pairs).map(t=>{var e=t.selector;document.querySelectorAll(e).forEach(e=>{e.setAttribute("data-rocket-lazy-bg-"+t.hash,"excluded")})}),document.querySelector("#wpr-lazyload-bg-container"));var o=rocket_lazyload_css_data.threshold||300;const u=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&c.filter(e=>t.target.matches(e.selector)).map(t=>{var e;t&&((e=document.createElement("style")).textContent=t.style,a.insertAdjacentElement("afterend",e),t.elements.forEach(e=>{u.unobserve(e),e.setAttribute("data-rocket-lazy-bg-"+t.hash,"loaded")}))})})},{rootMargin:o+"px"});function n(){0<(0<arguments.length&&void 0!==arguments[0]?arguments[0]:[]).length&&c.forEach(t=>{try{document.querySelectorAll(t.selector).forEach(e=>{"loaded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&"excluded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&(u.observe(e),(t.elements||=[]).push(e))})}catch(e){console.error(e)}})}n(),function(){const r=window.MutationObserver;return function(e,t){if(e&&1===e.nodeType)return(t=new r(t)).observe(e,{attributes:!0,childList:!0,subtree:!0}),t}}()(document.querySelector("body"),n)}},{}]},{},[1]);
/* ]]> */
</script>
<script type="text/javascript" id="bunyad-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"ajaxurl":"https:\/\/asknerd.net\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script data-minify="1" type="text/javascript" src="https://asknerd.net/wp-content/cache/min/1/wp-content/themes/smart-mag-child/js/bunyad-theme.js?ver=1729329848" id="bunyad-theme-js" data-rocket-defer defer></script>
<script type="text/javascript" src="https://asknerd.net/wp-content/themes/smart-mag-child/js/jquery.flexslider-min.js?ver=3.1.0" id="flex-slider-js" data-rocket-defer defer></script>
<script type="text/javascript" src="https://asknerd.net/wp-content/themes/smart-mag-child/js/jquery.sticky-sidebar.min.js?ver=3.1.0" id="sticky-sidebar-js" data-rocket-defer defer></script>
<script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://asknerd.net/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt,l){var t='<img data-lazy-src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi_webp/ID/hqdefault.webp" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading="lazy"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?"":"&"+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var exclusions=[];var e,t,p,u,l,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)(e=document.createElement("div")),(u='https://i.ytimg.com/vi_webp/ID/hqdefault.webp'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query",a[t].dataset.query),e.setAttribute("data-src",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(".play")),(p.onclick=lazyLoadYoutubeIframe)});</script><script type="text/javascript">
var sc_project=11969566;
var sc_invisible=1;
var sc_security="edc77dcc";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/asknerd.net\/wp-admin\/admin-ajax.php","nonce":"5a93a23693","url":"https:\/\/asknerd.net\/comprendre-les-balises-html-types-essentiels-et-leur-utilisation","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://asknerd.net/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html><!-- Rocket has webp --> 
