La sémantique

Comme on a pu l'évoquer dans le guide précédent le nom des balises HTML permet de leur donner un rôle précis. On appelle cela la sémantique.

Il est possible de voir l'ensemble des balises disponibles en HTML sur le site du MDN. Nous allons voir comment utiliser les plus importantes au fil des étapes, et je ferais souvent référence à ce site.

Paragraphes & titres

La balise paragraphe <p><p> permet d'organiser du texte en paragraphes. On l'utilise souvent pour découper le texte d'un article de blog ou une description d'un produit par exemple.

<p>HTML, abréviation de HyperText Markup Language, structure le contenu des pages web en servant de base essentielle à la plupart des sites.</p>

<p>HTML, abréviation de HyperText Markup Language, structure le contenu des pages web en servant de base essentielle à la plupart des sites.</p>

Les balises d'en-tête vont de <h1><h1> à <h6><h6>. Elles représentent les titres dans un texte.

<h1><h1> correspondant au titre principal de la page, en général il n'y en a qu'un seul par page. <h2><h2> correspond au sous-titre, et ainsi de suite.

<h1>Titre de la page</h1>
<h2>Sous titre</h2>
<h3>Sous sous titre</h3>
<h2>Other sous titre</h2>

<h1>Titre de la page</h1>
<h2>Sous titre</h2>
<h3>Sous sous titre</h3>
<h2>Other sous titre</h2>

⚠️ La sémantique et l'apparence sont deux choses différentes. Par défaut les titres sont en gras et ont une taille de plus en plus petite, mais il est tout a fait possible de modifier ça en CSS. Lorsqu'on écrit le HTML il faut avant tout penser à la semantique et non à l'apparence.

Sémantique vs générique

La balise <div><div> est une balise générique, autrement dit elle n'a pas de sémantique particulière. Elle permet simplement séparer différentes parties de la page (pour pouvoir modifier l'apparence en CSS par exemple).

<div>Introduction au HTML</div>
<div>Qu'est-ce que le HTML?</div>
<div>HTML, abréviation de HyperText Markup Language, structure le contenu des pages web en servant de base essentielle à la plupart des sites.</div>
<div>Structure de base en HTML</div>
<div>
    Un document HTML utilise des balises pour définir des éléments. Chaque balise encadrée par des chevrons (< >) a une fonction spécifique, par exemple, h1
    pour les titres et p pour les paragraphes.
</div>

<div>Introduction au HTML</div>
<div>Qu'est-ce que le HTML?</div>
<div>HTML, abréviation de HyperText Markup Language, structure le contenu des pages web en servant de base essentielle à la plupart des sites.</div>
<div>Structure de base en HTML</div>
<div>
    Un document HTML utilise des balises pour définir des éléments. Chaque balise encadrée par des chevrons (< >) a une fonction spécifique, par exemple, h1
    pour les titres et p pour les paragraphes.
</div>

Dans cet exemple, on utilise la balise générique <div><div> pour organiser le contenu. Écris de manière sémantique, le HTML ressemblerait plutôt à ça :

<h1>Introduction au HTML</h1>
<h2>Qu'est-ce que le HTML?</h2>
<p>HTML, abréviation de HyperText Markup Language, structure le contenu des pages web en servant de base essentielle à la plupart des sites.</p>
<h2>Structure de base en HTML</h2>
<p>
    Un document HTML utilise des balises pour définir des éléments. Chaque balise encadrée par des chevrons (< >) a une fonction spécifique, par exemple, h1
    pour les titres et p pour les paragraphes.
</p>

<h1>Introduction au HTML</h1>
<h2>Qu'est-ce que le HTML?</h2>
<p>HTML, abréviation de HyperText Markup Language, structure le contenu des pages web en servant de base essentielle à la plupart des sites.</p>
<h2>Structure de base en HTML</h2>
<p>
    Un document HTML utilise des balises pour définir des éléments. Chaque balise encadrée par des chevrons (< >) a une fonction spécifique, par exemple, h1
    pour les titres et p pour les paragraphes.
</p>

Comme tu peux le voir, les balises sémantiques permettent de garder la page organisée. Le fait d'utiliser autant que possible ce type de balises a 3 bénéfices principaux :

🤓 la lisibilité, lorsque chaque élément du site à un rôle attribué, on s'y retrouve mieux et on comprend mieux le contenu
🤖 le SEO (Search Engine Optimisation), quand le moteur de recherche (Google, Bing, Ecosia, etc.) comprend mieux les pages web qui utilisent à bon escient la sémantique, ce qui permet au site d'être mieux référencé et plus simple à trouver
♿️ l'accéssibilité autrement dit permettre à un maximum de personnes d'accéder à l'information

Ne t'en fais pas, nous reviendrons sur ces concepts plus en détail au fur et à mesure du cours. Ce qu'il faut retenir pour le moment c'est qui est préférable, quand c'est possible d'utiliser des balises sémantiques plutôt que génériques !

Les "landmarks"

Il existe d'autres balises sémantiques qui peuvent être utilisées à la place de divs pour grouper une partie du contenu de la page Web.

On a par exemple <nav><nav> qui représente le menu principal d'une page ou <article><article> qui permet d'englober un article de blog par exemple. Pour plus de détail sur le sujet, je t'invite à aller voir l'article du MDN directement.

⚠️ Attention, si tu as un doute sur comment utiliser une balise, il vaut mieux utiliser une div qu'une balise qui ne fait pas du tout sens !

Ne t'en fais pas, tu n'as pas à retenir tout ça par cœur. On utilisera ces balises dans des cas concrets au fur et à mesure du cours. Si jamais tu as un doute sur la balise à utiliser dans une situation donnée, fais une recherche Google 😉