2.5 Sémantique HTML

18 octobre 2018

HTML est un travail sur le sens

Les balises HTML ont pour but de donner un sens à un document. Ne vous inquiétez pas de l’apparence de votre page Web. Concentrez-vous sur la signification de chaque tag que vous utiliserez.
Selon le contenu que vous écrivez, vous pouvez choisir l’élément approprié correspondant à la signification de votre texte.
Cette gamme d’éléments est suffisamment large pour pouvoir être utilisée à des fins générales (comme des paragraphes ou des listes), et un contenu plus spécifique tel que <output> (pour afficher le résultat d’un calcul) ou <progress> (pour afficher la progression d’une tâche).

Eléments de structure: organiser votre page

Les éléments de structure vous permettent d’organiser les principales parties de votre page. Ils contiennent généralement d’autres éléments HTML.

Voici ce qu’une page Web typique pourrait inclure :

<header> en tant que premier élément de la page, pouvant inclure le logo et le slogan.
<nav> sous forme de liste de liens menant aux différentes pages du site.
<h1> comme titre de la page
<article> en tant que contenu principal de la page, comme un article de blog
<footer> est le dernier élément de la page, situé en bas

Eléments de texte: définir votre contenu

À l’intérieur de ces éléments de structure, vous trouverez généralement des éléments de texte destinés à définir l’objectif de votre contenu.

Vous utiliserez principalement :

<p> pour les paragraphes
<ul> pour les listes (non ordonnées)
<ol> pour les listes (ordonnées)
<li> pour les éléments de liste
<blockquote> pour les citations

Eléments de type inline : définissez votre texte

Comme les éléments de texte peuvent être longs mais avec un contenu varié, les éléments en ligne permettent de distinguer et définir des parties de votre texte.

De nombreux éléments en ligne sont disponibles, mais vous rencontrerez généralement les éléments suivants :

<strong> pour les mots importants
<em> pour les mots accentués
<a> pour les liens
<small> pour les mots moins importants
<abbr> pour les abréviations comme W3C

<strong> pour les mots importants
<em> pour les mots accentués, mis en emphase
<a> pour les liens
<small> pour les mots moins importants
<abbr> pour les abréviations comme W3C

<article>
<h1>Le titre principal de la page</h1>
<h2>Un sous-titre</h2>
<p> Quelque chose et plus encore comme des mots mis en <em>emphase</em> et même <strong>importants</strong>.</p>
<p> Un autre paragraphe, un autre paragraphe, je ne suis qu'un autre paragraphe.</p>
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
<blockquote>La vie, c'est comme une bicyclette, il faut avancer pour ne pas perdre l'équilibre. Albert Einstein</blockquote>
</article>
<aside>
<h3>Mes derniers articles</h3>
<ul>
<li><a href="#">Un</a></li>
<li><a href="#">Deux</a></li>
<li><a href="#">Trois</a></li>
</ul>
</aside>

Eléments génériques

Lorsque, apparemment, aucun élément sémantique ne semble adapté à votre contenu mais que vous souhaitez toujours insérer un élément HTML (à des fins de regroupement ou de style), vous pouvez choisir l’un des deux éléments génériques :

<div> pour les éléments de type bloc
<span> pour les éléments de type inline

Bien que ces éléments HTML ne signifient rien, ils nous seront utiles lorsque nous commencerons à utiliser CSS.

Ne pas trop penser à la sémantique

Il existe environ 100 éléments HTML sémantiques parmi lesquels choisir. C’est beaucoup.
Il peut être fastidieux de parcourir cette liste et de choisir l’élément approprié pour votre contenu.

Mais ne perdez pas trop de temps à vous en préoccuper. Si vous vous en tenez à la liste suivante pour le moment, vous aurez déjà de quoi faire :

Structure	Texte	Inline
`header` `h1` `h2` `h3` `nav` `footer` `article` `section`	`p` `ul` `ol` `li` `blockquote`	`a` `strong` `em` `q` `abbr` `small`