La sémantique en HTML

La sémantique joue un rôle crucial dans la création de pages web en HTML. Mais qu'est-ce que cela signifie réellement ? Le mot « sémantique » vient du grec et signifie « sens ». Dans le contexte du HTML, on parle de sémantique lorsqu'on évoque le sens d'un élément donné - ce qu'un élément représente ou quelle est sa tâche.

Supposons qu'une page web soit un obélisque de l'Égypte ancienne. Sans sémantique, l'obélisque ne serait qu'un bloc de pierre avec divers hiéroglyphes. Mais pour ceux qui comprennent la sémantique des hiéroglyphes, l'obélisque devient une source d'information, racontant une histoire ou transmettant un message. Chaque hiéroglyphe a son sens, et leurs combinaisons forment des phrases complètes. Le HTML fonctionne de façon similaire, mais au lieu de hiéroglyphes, nous utilisons des balises.

La sémantique en HTML fait référence au sens et au but qu'a un élément HTML (balise) donné dans la structure d'une page web. Tout comme les hiéroglyphes qui ont leur sens, les balises HTML indiquent au navigateur (et à d'autres robots, comme les moteurs de recherche) quelles informations elles contiennent et comment elles doivent être interprétées.

Par exemple, la balise <header> indique que le contenu qu'elle entoure est l'en-tête de la page, semblable au titre au début d'un papyrus de l'Égypte ancienne. La balise <footer> est le pied de page, semblable à la signature à la fin d'une lettre. La balise <article> est un fragment de contenu indépendant, comme des histoires distinctes écrites sur d'anciens rouleaux.

Utiliser des balises HTML sémantiques présente de nombreux avantages. Premièrement, cela aide à maintenir la structure et la lisibilité du code. Deuxièmement, cela permet aux robots des moteurs de recherche de mieux comprendre ce qui se trouve sur la page, ce qui peut améliorer sa position dans les résultats de recherche. Troisièmement, cela aide les personnes en situation de handicap à utiliser Internet, car les technologies d'assistance, comme les lecteurs d'écran, peuvent mieux comprendre la structure de la page.

Tout comme les anciens Égyptiens qui utilisaient les hiéroglyphes pour communiquer, nous utilisons le HTML sémantique pour créer une structure claire et compréhensible pour nos pages web. Au début, le HTML n'avait pas beaucoup d'éléments sémantiques. Tout était mis en forme à l'aide de balises comme <div> et <span>, qui n'ont aucun sens sémantique - ce sont simplement des conteneurs génériques pour d'autres éléments.

Cependant, à mesure que les technologies d'Internet ont évolué, davantage d'éléments sémantiques ont commencé à apparaître. Les pages web d'aujourd'hui sont créées à l'aide de balises telles que <header>, <nav>, <main>, <article>, <section>, <footer>, et bien d'autres qui ont un rôle sémantique précis.

Voici quelques éléments HTML sémantiques :

<header>

Cet élément définit l'en-tête d'une page ou d'une section et contient généralement un logo, le titre de la page et la navigation.

1<header>
2  <h1>Nom de la page</h1>
3  <nav>
4    <!-- Liens de navigation -->
5  </nav>
6</header>

<nav>

L'élément <nav> contient les principaux liens de navigation de la page.

1<nav>
2  <a href="/">Accueil</a>
3  <a href="/contact">Contact</a>
4</nav>

<article>

Marque un bloc de contenu indépendant et autonome qui a du sens en lui-même, par exemple un seul article de blog.

1<article>
2  <h2>Titre de l'article</h2>
3  <p>Contenu de l'article</p>
4</article>

<section>

Définit une section d'un document, comme un chapitre, un onglet, ou toute autre zone de contenu distincte.

1<section>
2  <h2>Titre de la section</h2>
3  <p>Contenu de la section</p>
4</section>

<footer>

Marque le pied de page, qui contient généralement des informations légales, le copyright et des liens vers la politique de confidentialité.

1<footer>
2  <p>&copy; 2023 Nom de l'entreprise</p>
3</footer>

Pourquoi la sémantique est-elle importante ?

L'importance de la sémantique en HTML découle de plusieurs raisons :

1. Accessibilité : Les balises HTML sémantiques aident les technologies d'assistance, comme les lecteurs d'écran pour les personnes aveugles, à mieux comprendre la structure et le contenu d'une page. Par exemple, l'élément <nav> informe le lecteur d'écran qu'il contient des liens vers d'autres pages ou sections de la page.

2. SEO (Search Engine Optimization) : Les moteurs de recherche, comme Google, utilisent la structure sémantique d'une page pour mieux comprendre son contenu. Des pages bien organisées et sémantiques peuvent aider à améliorer la visibilité de la page dans les résultats de recherche.

3. Lisibilité du code : Les éléments HTML sémantiques facilitent la compréhension de la structure de la page pour les autres programmeurs. Lorsque nous regardons le code d'une page, nous pouvons facilement identifier où se trouve l'en-tête, où se trouve le contenu principal, et où se trouve le pied de page.

4. Prise en charge du CSS et du JavaScript : Les éléments HTML sémantiques facilitent la mise en forme d'une page avec le CSS et l'ajout de fonctionnalités interactives avec le JavaScript. Par exemple, nous pouvons facilement mettre en forme tous les titres d'une page en sélectionnant les éléments <h1> à <h6>.

Souviens-toi que le choix de la balise HTML sémantique appropriée est crucial pour créer des pages web fonctionnelles, accessibles et bien organisées.

Structure d'un document HTML

La disposition HTML de base commence par une déclaration de type de document, puis contient les éléments <html>, <head> et <body>.

1<!doctype html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>Titre de la page</title>
6</head>
7<body>
8  <!-- Le contenu de la page viendra ici -->
9</body>
10</html>

Ajouter un en-tête, un pied de page et un contenu principal

Tu peux enrichir davantage la disposition en ajoutant des éléments sémantiques comme <header>, <footer> et <main> pour le contenu principal de la page.

1<body>
2  <header>
3    <h1>Nom de la page</h1>
4    <nav>
5      <a href="/">Accueil</a>
6      <a href="/contact">Contact</a>
7    </nav>
8  </header>
9  <main>
10    <section>
11      <h2>Introduction</h2>
12      <p>Ceci est un exemple de section.</p>
13    </section>
14    <!-- Tu peux ajouter d'autres sections -->
15  </main>
16  <footer>
17    <p>&copy; 2023 Nom de l'entreprise</p>
18  </footer>
19</body>

Prends un moment pour expérimenter avec les éléments HTML sémantiques. Essaie d'ajouter ou de modifier quelques éléments sur ta page et regarde à quoi elle ressemble après les changements.

1<header>
2<h1>Nom de la page</h1>
3<nav>
4<a href="/">Accueil</a>
5<a href="/contact">Contact</a>
6</nav>
7</header>
8<main>
9<section>
10<h2>Introduction</h2>
11<p>Ceci est un exemple de section.</p>
12</section>
13<!-- Tu peux ajouter d'autres sections -->
14</main>
15<footer>
16<p>&copy; 2023 Nom de l'entreprise</p>
17</footer>