L’organisation et la structure d’un site web sont essentielles pour une expérience utilisateur optimale.
Sans une structure claire, les utilisateurs peuvent se sentir perdus, et les moteurs de recherche peuvent mal indexer le contenu.
Cet article explore comment les balises HTML, y compris celles de type block, inline, et sémantique, peuvent structurer efficacement vos pages pour une meilleure clarté et accessibilité.
Lancez votre carrière de développeur web avec une formation pratique.
Balises HTML block : Div et Section
Pour concevoir des sites web, il est important de les organiser et structurer afin de garantir une expérience utilisateur optimale. C’est pourquoi il est essentiel de savoir comment diviser le contenu d’une page web en des section logiques et distinctes, pour assurer une cohérence visuelle et une visibilité pour l’utilisateur. D’où l’intervention des balises de type bloc en HTML qui facilitent cette tâche, vous pouvez par exemple regrouper des paragraphes, de titres, images ou listes dans des sections distinctes. Il existe de nombreux balises de type bloc telle que <div>, <section>, <article>. En utilisant ces balises il est plus facile d’appliquer des styles CSS a des sections spécifiques du contenu afin d’améliorer l’apparence et la mise en page de votre site.
Dans cette partie on s’intéresse principalement sur la balise div qui est est une balise générique de type bloc , elle occupe toute la largeur disponible de son contenu parent et commence sur nouvelle ligne , vous ne pouvez pas faire deux balises div dans la même ligne . Tous les éléments qui suivent sont rendus en dessous , sauf si vous les stylisé d’un autre manière . La balise div peut contenir d’autres éléments HTML même d’autres balises div , ce qui permet de créer des structure de mise en page complexe et imbriqués .
Même si vous placez deux balises div sur la même ligne dans votre code , chacune va apparaitre sur une ligne distincte dans le navigateur.
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-eaab6c2b-7a95-4d93-b768-6b5fa52c037c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-eaab6c2b-7a95-4d93-b768-6b5fa52c037c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"eaab6c2b-7a95-4d93-b768-6b5fa52c037c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div>paragraphe1</div><div>paragraphe2</div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Balises HTML inline : Styliser avec Span
Les balises de type inline se trouve obligatoirement à l’intérieur d’une balise block . Ces balises sont utilisées pour formater des parties de texte ou de contenu sans retour à la ligne , elles n’occupent que l’espace nécessaire a son contenu et peuvent se trouver à l’intérieur des éléments de type bloc ou inline comme la balise <a> , <img> et <span> .
Voici un schema explicatif de la différence entre les balises inline et block .
La balise span est un élément de ce type, qui n’interrompt pas le flux du texte c’est à dire commence dans la même ligne, elle est généralement utilisée pour ajouter du style CSS ou des manipulation JavaScript au contenu.
<div><span>paragraphe1</span>paragraphe2</div>
Balises sémantiques en HTML5 : Header et Footer
HTML5 est la dernière version du langage de balisage HyperText qui inclut de nouvelles fonctionnalités, comme l’affichage de la vidéo et de l’audio directement, ainsi l’introduction des balises sémantiques pour la structuration du contenu web. D’où l’apparition des nouvelles balises (<article>, <header>, <nav>, <aside>, <footer>, <section>) qui visent à améliorer la clarté et l’organisation des pages web. Contrairement aux balises génériques comme <div>, utilisées pour organiser le contenu sans indiquer leur signification en particulier, les balises sémantiques permettent aux développeurs de décrire la fonction du contenu qu’elles contiennent. Ces éléments sont nécessaires pour l’introduction au langage CSS et la mise en page, car ils facilitent le ciblage des sections d’une page pour leur mise en style.
- La balise header :représente les éléments d’en-tête d’une page web ou d’une section. Généralement elle contient un groupe de contenu introductif qui peut inclure le titre, le logo, le nom d’auteur ou des éléments aidant à la navigation principale.
<body>
<header>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Logo du site" / width="" height="" data-lazy-src="logo.png"><noscript><img decoding="async" src="logo.png" alt="Logo du site" / width="" height=""></noscript>
<h1>Mon premier site web</h1>
</header>
</body>
- La balise nav :est utilisée pour définir la section de navigation dans une page web. Elle peut contenir des liens de navigation, menus, listes ou des tables de matières etc …
<nav>
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#acceuil">acceuil</a></li>
</ul>
</nav>
- La balise article :est souvent utilisé pour encadrer une portion de contenu autonome avec une entete, un titre et du texte. Elle peut être lue indépendamment du reste de la page. L’objectif est de regrouper tout ce qui appartient à une même unité de contenu. Par exemple, une nouvelle, un article de blog, un commentaire.
- La balise section :s’utilise pour grouper un ensemble de contenu thématiquement lié. Pour être valide , la section doit contenir un titre de section (h1, h2, h3…). Elle peut également contenir des articles et des images, etc . La balise <section> est utilisé pour regrouper des contenus liés sémantiquement, tandis que <div> est utilisé pour regrouper des éléments pour les styliser ou les organiser avec du CSS .
<section>
<h2 id="titre-1" class="rb-heading-index-5">Titre 1 </h2>
<p>Pragraphe1.</p>
</section>
<section>
<h2 id="titre-2" class="rb-heading-index-6">Titre 2</h2>
<p>Paragraphe 2.</p>
</section>
- La balise aside :« aparté » en français, représente une partie d’un document dont a un lien direct avec le contenu principal du document. Les apartés sont présentés sous la forme d’encadrés ou de boîtes de légende pour des éléments comme des blocs de citations, des publicités, ou des informations supplémentaires.
<article>
<h1>Titre de l'article</h1>
<p>Contenu principal de l'article.</p>
<aside>
<h2 id="informations-supplementaire" class="rb-heading-index-8">Informations supplémentaire</h2>
<p>Voici du contenu supplémentaire.</p>
</aside>
</article>
- La balise footer :représente le pied de la page d’un document ou d’une section. Elle contient des informations de clôture, comme les droits d’auteur, les liens vers d’autres pages, la date de publication ou l’auteur.
<footer>
<p>Publié par: Jean Dupont</p>
<p>© 2023 MonSite.Tous droits réservés.</p>
</footer>
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Dans ce chapitre vous avez explorer les balises HTML de type block, inline, et sémantique introduites avec HTML5. En assimilant la différence entre ces balises et leur utilisation correcte, vous serez en mesure de structurer efficacement le contenu de vos pages web. Les balises block comme <div> et <section> permettent de créer des sections distinctes pour une meilleure organisation visuelle, tandis que les balises inline comme <span> servent à styliser des parties spécifiques sans casser le flux du texte. Les balises sémantiques telles que <header>, <footer>, et <article> apportent une signification claire à chaque section, améliorant ainsi l’accessibilité et le référencement des pages web.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Quelles sont les balises block en HTML et comment les utiliser ?
Comment les balises inline diffèrent-elles des balises block ?
Quels sont les avantages des balises sémantiques en HTML5 ?
Pourquoi est-il important d'utiliser des balises HTML appropriées pour le SEO ?
Comment structurer efficacement une page web avec HTML ?
Conclusion
En comprenant les différentes balises HTML, vous pouvez structurer vos pages web de manière efficace et optimisée. Quel aspect du balisage HTML souhaitez-vous approfondir pour améliorer vos compétences en développement web ?
