11. Les Balises de structure¶
Le contenu de votre page web ne fait pas tout. Il est souvent agrémenté d'un menu, d'une side-barre et d'un pied de page. Il peut contenir des lanceurs vers d'autres pages ou bien des articles. Tous ces ensembles peuvent (et doivent) être comprises dans des balises qui vont structurer notre page.
Pourquoi?¶
Bonification des fonctionnalités
Une bonne sémantique permet d'améliorer l'expérience de ses usagers de plusieurs façons.
Par exemple, certaines personnes ont recours à un assistant vocal (Siri, Alexa, L'assistant Google, etc.) leur permettant de se faire narrer le contenu des pages sur lesquelles ils naviguent alors qu'ils s'adonnent à d'autres tâches (cuisine, conduite, ménage, etc.). D'autres, atteints d'une déficience visuelle, utilisent pour leur part un lecteur d'écran (Jaws, VoiceOver, eSpeak, etc.) afin de leur permettre de naviguer de façon auditive le web 🔊.
Imaginons un instant que nous sommes l'une de ces personnes et que nous consultons tous les matins LaPresse.ca 📰. Heureusement pour nous, les assistants vocaux et lecteurs d'écran reconnaissent les balises <header> et nous offrent de les sauter. Cette option serait impossible si une balise <div> était utilisée. Il faudrait donc écouter en entier la narration de l'entête de La Presse à chaque fois que nous consultons un article 😩.
Cet exemple n'est que l'une des nombreuses fonctionnalités avantageuses permises par l'usage d'une sémantique adéquate.
Performance sur les moteurs de recherche
Une sémantique adéquate permet aux différents moteurs de recherche (Google, Bing, Yahoo, etc.) de mieux comprendre et d'analyser le contenu d'une page afin de mieux l'indexer.
Par exemple, il est possible de modifier l'apparence d'un texte dans un <div> avec du CSS afin de l'afficher en plus gros que le texte régulier. Bien que cette approche permette aux lecteurs de comprendre qu'il s'agit d'un titre, il n'en va pas de même pour les moteurs de recherche qui ne seront pas à même de faire cette nuance. Par contre, si une balise <h1> est utilisée à la place d'une balise <div>, il devient soudainement plus évident pour ces moteurs que cet extrait de texte devrait être utilisé pour présenter cette page dans un résultat de recherche.
Simplification du développement
Une bonne sémantique permet de simplifier le développement pour soi et pour les individus qui pourraient être amenés à interagir avec notre code. Il est plus simple de repérer des ouverture et fermeture de balises lorsqu’elles correspondent à des éléments tangibles dans une page.
Par exemple, si une dizaine de balises se ferment une à la suite de l'autre, il peut-être ardu au premier regard de déterminer laquelle correspond à la fin de l'entête d'un site si toutes ces balises sont des </div>. Cependant, si dans le lot une fermeture de balise </header> est utilisée, il devient soudainement évident où l'entête se termine.
À gauche, sans balises sémantiques. À droite, avec balises sémantiques.
Les 'header' et 'footer'¶
Une page est généralement composée d'une en-tête "header" et d'un pied de page "footer".
Le header peut comprendre (liste non exhaustive) :
- un menu,
- un logo,
- des liens vers des réseaux sociaux,
- etc,
Attention !
La balise utilisée est <header>, de type bloc. Attention à le pas la confondre ave la balise <head> !
Elle pourrait aussi être utilisée pour représenter l'entête d'un article incluant le nom de l'article, son auteur, sa date de publication, etc.
Bref, plusieurs possibilités existent. Il est donc possible d'avoir plusieurs balises <header> sur une même page.
Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines pages qui ne sont pas listées dans le menu principal :
Elle pourrait aussi être utilisée pour représenter le pied de page d'un article incluant des liens de partage sur les réseaux sociaux, un rappel de l'auteur, etc.
Bref, plusieurs possibilités existent. Il est donc possible d'avoir plusieurs balises <footer> sur une même page.
La navigation¶
La navigation consiste en une liste d'éléments permettant de naviguer entre plusieurs pages de notre site, ou bien vers plusieurs sections d'une même page. On utilise pour cela la balise <nav> contenant une balise <ul> ou <ol> pour former une liste de liens :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="prortfolio.html">Portfolio</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Le contenu et les sections¶
Le contenu principal de la page internet est compris dans la balise <main>.
Elle ne doit pas contenir les éléments qui se répètent d'une page à l'autre, par exemple l'entête et le pied de page d'un site.
Il est impossible d'avoir plus d'une balise <main> sur une même page, puisqu'il ne peut y avoir qu'un seul contenu principal.
Il est possible de segmenter le contenu en plusieurs sections via la balise <section>.
<main>
<p>
Texte d'introduction de mon contenu.
</p>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section.
</p>
</section>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section.
</p>
</section>
</main>
Attention !
La balise <main> ne devrait pas être enfant des balises sémantique <article>, <aside>, <footer>, <header> ou <nav>.
Les articles¶
La balise <article> permet d'incorporer à notre page du contenu annexe, comme par exemple :
- des articles de blog,
- des produits,
- des commentaires,
- etc,
<main>
<p>
Texte de mon contenu. Voilà des articles liés à ma page :
</p>
<div>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
</div>
</main>
La side-barre¶
La balise <aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvent représenté comme une side-barre :
<main>
<p>
Texte de mon contenu.
</p>
<aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</main>
La balise 'details'¶
Nouveauté dans la version HTML5, la balise <details> permet de faire apparaître ou disparaître une zone de contenu, plus communément appelé accordion. La balise <details> est accompagnée de la balise <summary> qui correspond au titre qui permettra de déplier et replier le bloc de contenu. Comme toujours, nous allons apprécier la mise en forme par défaut du navigateur.
<details>
<summary>Cuba libre</summary>
<p>Ingrédients :</p>
<ul>
<li><strong>6 cl</strong> de rhum cubain</li>
<li><strong>4 cl</strong> de jus de citrons verts</li>
<li><strong>15 cl</strong> de cola</li>
</ul>
</details>
<details open="true">
<summary>Mai Tai</summary>
<p>Ingrédients :</p>
<ul>
<li><strong>3 cl</strong> de rhum blanc</li>
<li><strong>3 cl</strong> de rhum ambré</li>
<li><strong>2 cl</strong> de triple sec</li>
<li><strong>1 cl</strong> de sirop de sucre de canne</li>
<li><strong>3 cl</strong> de jus de citrons verts</li>
<li><strong>1 cl</strong> de sirop d'orgeat</li>
</ul>
</details>
Ingrédients :Cuba libre
Ingrédients :Mai Tai
Style spécifique
Par default ce n'est pas si stylisé. L'exemple ci-dessus style spécifiquement la balise <details> et <summary> avec du CSS !
L'attribut open="" permet de définir le comportement par défaut de la balise <details>. Si l'attribut open="" n'est pas précisé, alors le bloc de contenu est caché. Si à l'inverse l'attribut a pour valeur true, alors celui-ci est visible.
Les balises 'sub' et 'sup'¶
Bonus! Ces balises permettent d'afficher un texte en indice ou en exposant. Simple et efficace, un exemple d'utilisation ci-dessous.
<p>Je ne connais pas grand chose à la physique mais E = mc<sup>2</sup>.</p>
<p>La molécule d'eau a pour formule H<sub>2</sub>O.</p>
Et voici le résultat:
Je ne connais pas grand chose à la physique mais E = mc2.
La molécule d'eau a pour formule H2O.
Exemple de page type¶
Maintenant que vous connaissez (presque) toutes les balises HTML, nous allons faire un gros récapitulatif.
Voilà la page type que nous allons coder :
Et voilà son code :
<!DOCTYPE html>
<html>
<!-- Ouverture de la balise head // Contenu NON visible par les internautes -->
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8">
<meta name="description" content="Une description de la page...">
</head>
<!-- Ouverture de la balise body // Contenu visible par les internautes -->
<body>
<!-- Entête de ma page -->
<header>
<!-- Logo avec lien vers ma page d’accueil -->
<a href="index.html">
<img src="images/logo.svg">
</a>
<!-- navigation -->
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="prortfolio.html">Portfolio</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!-- Contenu -->
<main>
<h1>
Titre de ma page
</h1>
<div>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section.
</p>
</section>
<section>
<h2>
Titre de ma section
</h2>
<p>
Texte de ma section. Avec des articles liés :
</p>
<div>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
<article>
<h2>
Titre de mon article
</h2>
<p>
Texte de mon article.
</p>
</article>
</div>
</section>
</div>
<aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</main>
<!-- Pied de page -->
<footer>
<p>
<small>
Copyrights 2025 - ETML - <a href="mentions_legales.html">Mentions légales</a>
</small>
</p>
</footer>
</body>
</html>
La sémantique
L'utilisation des balises de structure ne change en rien la mise en page visuellement de votre site. Elles sont là et doivent être utilisées afin que la sémantique de votre page permette :
- Que les navigateur interprètent bien les éléments et ne se trompent pas sur leur valeur.
- D'optimiser le référencement naturel de votre site internet, le SEO (Search Engine Optimisation).
- De rendre votre page compatible pour les personnes atteintes d'une déficience visuelle, utilisent un lecteur d'écran.
Il faudra bien sur bien du style pour que la mise en page resemble à la maquette !
Exemple de structure d'une page web¶
