Apprendre HTML : Balises de Structuration
En-tête, pied de page, section… Ce chapitre est dédié à l'apprentissage des balises HTML principales pour structurer sa page web.
Conteneurs sémantiques
Les conteneurs sémantiques sont des balises un peu particulières apparues avec la version HTML5. Leur rôle est de structurer la page web en définissant des zones bien spécifiques. Ces conteneurs vont, de par leur nature, donner des indications sur le contenu qu’elles contiennent.
Il peut par exemple s’agir :
- D’une en-tête
- D’un pied de page
- D’un regroupement de liens de navigation
- D’une section avec une thématique propre au sein d’une page web
- …
En découpant votre page en faisant usage de ces balises, vous montrez à l’algorithme des moteurs de recherche comment est structurée votre page et où se trouve le contenu important.
Cela présente deux avantages non négligeables :
- Vous économisez du travail de compréhension de votre page par moteurs de recherche, et ils aiment ça ! Ce qui impacte positivement votre SEO.
- Vous contrôlez la compréhension de vos pages par les robots.
En-tête <header>
La balise <header> délimite l’en-tête de l’élément dans lequel elle est imbriquée.
- Si cette balise est imbriquée directement dans la balise
<body>, alors il s’agit de l’en-tête de la page. - Si elle est imbriquée au sein d’une autre balise, alors elle définira l’en-tête de la balise en question.
<header>...</header>
Pied <footer>
La balise <footer> délimite le pied de l’élément dans lequel elle est imbriquée.
- Si cette balise est imbriquée directement dans la balise
<body>, alors il s’agit du pied de la page. - Si elle est imbriquée au sein d’une autre balise, alors elle définira le pied de la balise en question.
<footer>...</footer>
Contenu principal <main>
La balise <main> représente le contenu principal d’une page.
Le contenu de la balise doit être unique et ne pas dupliquer les mêmes blocs que ceux utilisés dans d’autres documents, tels que l’en-tête du site, le pied de page, le menu, la barre de recherche, les informations de copyright, etc.
<main>...</main>
Navigation <nav>
La balise <nav> représente une section destinée à la navigation. Elle regroupe un ensemble de liens.
Il peut par exemple s’agir de :
- Menu (header ou footer)
- Table des matières
- Fil d’Ariane
- …
<nav>
<a href="...">Lien 1</a>
<a href="...">Lien 2</a>
<a href="...">Lien 3</a>
</nav>
Section <section>
La balise <section> représente une section thématique d’un document. Une section commence généralement avec un titre.
<h1>Portfolio de John Doe</h1>
<section>
<h2>Compétences</h2>
...
</section>
<section>
<h2>Mes projets</h2>
...
</section>
<section>
<h2>Contactez-moi</h2>
...
</section>
Article <article>
La balise <article> s’apparente à la section, mais pour un contenu « autonome », autrement dit, pour lequel le contexte ne dépend pas de celui de la page. Il doit pouvoir être traité indépendamment des autres parties du document.
Il vise à baliser des blocs de contenu que l’on pourrait extraire du document tout en conservant leur sens et leurs informations. Il s’agit essentiellement de :
- Fiches produits
- Articles de blog
- …
<article>
<h2>Nom du produit</h2>
<p>Description du produit...</p>
<a href="#">Acheter</a>
</article>
Aparté <aside>
La balise <aside> représente un contenu qui n’a qu’un rapport indirect avec le contenu dans lequel il est placé. Elle est utilisée pour encapsuler du contenu complémentaire ou des informations connexes.
Même si on l’utilise généralement pour délimiter la sidebar d’un site, on peut l’utiliser pour n’importe quel contenu en aparté. Exemple : définir un terme, une biographie de l’auteur d’un article, un glossaire, préciser des sources, une liste d’articles en relation, etc.
<main>
<h1>Apprendre le HTML</h1>
<p>...</p>
<p>...</p>
<aside>
<!-- Biographie de l'auteur... -->
</aside>
</article>
Balises génériques
Contrairement aux conteneurs sémantiques, <div> et <span> sont des conteneurs dits génériques.
Leur particularité est qu’elles n’ont pas de valeur sémantique vis-à-vis de leur contenu ; elles ne donnent alors aucune indications sur le type de contenu qu’elles contiennent. On les utilise pour structurer nos pages selon un modèle de boîtes.
Etant dépourvue de sémantique, les balises <div> et <span> présentent un véritable intérêt lorsqu’elles sont couplées aux langages CSS et/ou JavaScript, en vue d’un traitement spécifique.
Conteneur block <div>
La balise <div> est une balise générique de type block.
- Elle prend toute la place qui lui est allouée par son parent. La boîte occupe sa propre nouvelle ligne et crée un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d’après.
- C’est un conteneur que l’on utilise pour créer des sections contenant plusieurs autres éléments.
<article class="product">
<div class="product-image">
<img src="..." alt="...">
</div>
<div class="product-infos">
<h3>Nom produit</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</article>
La balise <div> permet de structurer efficacement notre HTML à des fins de mise en forme / de traitement en JS.
Conteneur inline <span>
La balise <span> est une balise générique de type inline.
- Elle prend uniquement la place nécessaire par son contenu.
- C’est une sous-division au sein d’un paragraphe, permettant de styliser un élément textuel.
<p>Je suis un paragraphe dans lequel certains mots comme <span class="highlight">lui</span> ou encore <span class="highlight">lui</span> pourront être ciblés précisemment.</p>
La balise <span> permet de cibler une portion de texte à des fins de mise en forme / de traitement en JS.
Séparateurs
Saut de ligne <br>
La balise <br> (« BReakline ») sert à créer un saut de ligne.
Elle ne doit pas être utilisée dans un autre contexte que dans un bloc de texte. L’espacement d’éléments dans un but stylistique sera géré par le langage CSS.
<p>
Je suis sur la ligne 1.
<br>
Et moi sur la ligne 2.
</p>
Ligne horizontale <hr>
La balise <hr> (« Horizontal Rule ») sert à créer une ligne horizontale pour séparer des paragraphes.
Historiquement cette balise servait à des fins de mise en forme. Aujourd’hui, elle possède une signification sémantique indiquant un changement thématique entre des paragraphes. La création d’un séparateur purement esthétique sera gérée par le langage CSS.
<p>Je suis le premier paragraphe. Je parle de la pluie et du beau temps.</p>
<hr>
<p>Je suis le second paragraphe, et personnellement, je préfère largement parler de dev.</p>