04 - Éléments sémantiques

Balises sémantiques en HTML 5

La sémantique est l’étude de la signification de phrases ou de mots dans un langage.

En html un élément sémantique sert à décrire le sens d’un texte à la fois pour le concepteur que pour le logiciel de navigation (incluant lecteurs et moteurs de recherche).

Le web sémantique est le web pour les machines.

Exemples:

– Non sémantique: <b>, <div> ne disent rien concernant le contenu.

– Sémantique: <strong>, <article>, <form> permettent d’en savoir plus sur le contenu.

Sémantique Sémantique

L’élément main

Permet de définir une section principale d’une page Web. Typiquement, une page Web présentera un élément main (et uniquement un seul élément).

  • L’élément main présente le contenu principal de la page Web et ne devrait pas contenir de duplication.

Par exemple:

<main>
  <h2>Titre de la section</h2>
  <p>contenu</p>
</main>

L’élément section

Permet de définir une section d’une page Web. Typiquement, une page Web présentera plusieurs section.

La documentation du W3C dit : « A section is a thematic grouping of content, typically with a heading. »

Typiquement, une section aura un ou plusieurs titres et quelques paragraphes.

Par exemple:

<section>
  <h2>Titre de la section</h2>
  <p>contenu</p> 
</section>

L’élément article

Permet de définir un élément indépendant dont le contenu se lit indépendamment du reste de la page Web.

Typiquement, un article aura un ou plusieurs titres et quelques paragraphes.

Par exemple:

<article>
  <h2>Titre de la section</h2>
  <p>contenu</p> 
</article>

Les éléments article et section imbriqués

Il est possible de définir des sections dans une section et des sections dans un article et vice versa.

Parexemple:

<section>
  <h2>Titre de la section</h2> 
  <p>contenu</p>
  <article>
    <h2>Titre de l’article</h2> 
    <p>contenu</p>
  </article> 
<section>

L’élément header

Permet de définir un élément permettant d’introduire une page Web ou une section.

Typiquement, c’est un conteneur au début d’un article ou d’une page Web. Il peut contenir des titres et des paragraphes. Il peut y avoir avoir plusieurs éléments <header> dans le même document.

Par exemple:

<article>
  <header>
    <h2>Titre de l’intro</h2>
    <p>contenu</p>
  </header>
  <h2>Titre de l’article</h2>
  <p>contenu</p>
</article>

Permet de définir un élément de fin d’une page Web ou d’une section.

Typiquement, c’est un conteneur à la fin d’un article ou d’une page Web. Il peut contenir des titres et des paragraphes. Il peut y avoir avoir plusieurs éléments <footer> dans le même document. On y retrouve des renseignements concernant l’auteur, un lien, droits d’auteur, contact, utilisation, etc.

Par exemple:

<footer>
  <p>Écrit par: Jo</p>
  <p>Pour plus d’informations <a href="...">…</a></p>
</footer>

L’élément nav

Permet de définir un bloc d’éléments de navigation (des liens).

Typiquement, c’est un conteneur pour regrouper tous les liens de navigation d’une page Web.

Il devrait y avoir un seul élément <nav> par page.

Par exemple:

<nav>
  <a ref="Images">Images</a> |
  <a ref="Graphiques">Graphiques</a> |
  <a ref="Photos">Photos</a> |
</nav>

L’élément aside

Permet de définir un élément en marge du contenu de la page ou d’une section.

Il peut contenir une publicité ou une information connexe au contenu.

Par exemple:

<p>…</p>
<aside>
  <h2>Description</h2>
  <p>Contenu</p>
</aside>

Les éléments figure et figcaption

Permet d’ajouter une explication visuelle à une image.

Par exemple:

<figure>
  <img src="a1.png" alt="texte">
  <figcaption>Figure 1. Description</figcaption> 
</figure>

Autres éléments sémantiques

Il existe d’autres éléments sémantiques tels que les suivant :

  • em, strong : permettent de donner plus d’importance au contenu de ces balises voire de changer l’intonation d’un lecteur de pages web.

  • cite : contiendra le nom d’une oeuvre (livre, disque, …)

  • time : permet de rendre le texte placé entre les balises compréhensible par les machines grâce à l’attribut datetime qui contient alors des données dans un format reconnu.

<p>
  The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde
  Park.
</p>

<p>
  The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least
  <time datetime="PT2H30M">2h 30m</time>.
</p>

Source W3C

  • Les balises <h1> à <h6 ainsi que les balises pour les liste de définition (dl, dt et dd) ont aussi une charge sématique.