Éléments sémantiques HTML5

La sémantique (dérivée de la Grèce antique) peut être définie comme l'étude de la signification du langage.

Les éléments sémantiques sont des éléments ayant un sens.

Qu'est-ce que les éléments sémantiques ?

Les éléments sémantiques décrivent clairement leur signification aux navigateurs et aux développeurs.

Non sémantiqueExemples d'éléments : <div> et <span> - ne fournissent pas d'informations sur leur contenu.

SémantiqueExemples d'éléments : <form>, <table> et <img> - définissent clairement leur contenu.

Prise en charge du navigateur

Oui Oui Oui Oui Oui

Tous les navigateurs modernes prennent en charge les éléments sémantiques HTML5.

En outre, vous pouvez "aider" les navigateurs anciens à gérer les "éléments inconnus".

Pour en apprendre davantage sur ce chapitre, visitez le navigateur HTML5.

Les nouveaux éléments sémantiques de HTML5

De nombreux sites Web contiennent du code HTML indiquant la navigation, l'en-tête et le pied de page, par exemple : <div id="nav"> <div class="header"> <div id="footer">.

HTML5 fournit de nouveaux éléments sémantiques pour définir différentes parties de la page :

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Éléments sémantiques HTML5

Éléments sémantiques HTML5

L'élément <section> HTML5

L'élément <section> définit une section dans le document.

Selon la documentation HTML de W3C : "Une section est un groupe de contenu ayant un thème, généralement avec un titre."

Le premier page du site Web peut être divisée en sections telles que l'introduction, le contenu, les informations de contact, etc.

Exemple

<section>
   <h1>WWF</h1>
   <p>Le Fonds mondial pour la nature (WWF) est....</p>
</section>

Essayez-le vous-même

Élément <article> HTML5

L'élément <article> détermine un contenu auto-contenu indépendant.

Un document a un sens propre et peut être lu indépendamment du reste du contenu du site.

Applications de l'élément <article> :

  • Forum
  • Blog
  • Nouvelles

Exemple

<article>
   <h1>Que fait l'WWF ?</h1>
   <p>La mission de l'WWF est de stopper la dégradation de l'environnement naturel de notre planète,</p>
  et construire un avenir où les humains vivent en harmonie avec la nature.</p>
</article>

Essayez-le vous-même

Éléments sémantiques imbriqués

Dans la norme HTML5, l'élément <article> définit un bloc auto-contenu de éléments pertinents.

L'élément <section> est défini comme un bloc d'éléments pertinents.

Pouvons-nous utiliser cette définition pour décider de la manière dont les éléments doivent être imbriqués ? Non, nous ne pouvons pas !

Sur Internet, vous trouverez des pages HTML contenant des éléments <section> qui contiennent des éléments <article>, ainsi que des pages où des éléments <article> contiennent des éléments <sections>.

Vous découvrirez également que des éléments <section> contiennent des éléments <section>, et que des éléments <article> contiennent des éléments <article>.

Élément <header> HTML5

L'élément <header> détermine l'en-tête pour un document ou une section.

L'élément <header> doit être utilisé comme conteneur de contenu introductif.

Un document peut contenir plusieurs éléments <header>.

Voici un exemple d'un article définissant un en-tête :

Exemple

<article>
   <header>
     <h1>Que fait l'WWF ?</h1>
     <p>La mission de l'WWF :</p>
   </header>
   <p>La mission de l'WWF est de stopper la dégradation de l'environnement naturel de notre planète,</p>
  et construire un avenir où les humains vivent en harmonie avec la nature.</p>
</article>

Essayez-le vous-même

Élément <footer> HTML5

L'élément <footer> détermine le pied de page pour un document ou une section.

L'élément <footer> doit fournir des informations sur les éléments qu'il contient.

Les pieds de page contiennent généralement des informations sur l'auteur du document, des informations sur les droits d'auteur, des liens vers les conditions d'utilisation, des informations de contact, etc.

Vous pouvez utiliser plusieurs éléments <footer> dans un même document.

Exemple

<footer>
   <p>Publié par : Hege Refsnes</p>
   <p>Informations de contact : <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Essayez-le vous-même

Élément HTML5 <nav>

L'élément <nav> définit un ensemble de liens de navigation.

L'élément <nav> vise à définir un grand bloc de liens de navigation. Cependant, tous les liens du document ne doivent pas nécessairement être placés dans l'élément <nav> !

Exemple

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Essayez-le vous-même

Élément HTML5 <aside>

L'élément <aside> contient certains contenus autres que le contenu principal de la page (comme une colonne latérale).

Le contenu de aside doit être lié au contenu environnant.

Exemple

<p>Ma famille et moi avons visité le Epcot Center cette été.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>Le Epcot Center est un parc à thèmes à Disney World, Floride.</p>
</aside>

Essayez-le vous-même

Éléments HTML5 <figure> et <figcaption>

Dans les livres et les journaux, les titres associés aux images sont courants.

Le rôle du titre (caption) est d'ajouter une explication visible à l'image.

Avec HTML5, les images et les titres peuvent être combinés dans <figure> Dans l'élément :

Exemple

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - Le Pulpit Pock, Norvège.</figcaption>
</figure>

Essayez-le vous-même

<img> L'élément définit l'image,<figcaption> L'élément définit le titre.

Pourquoi utiliser des éléments HTML5 ?

Si vous utilisez HTML4, les développeurs utiliseront les noms d'attributs qu'ils préfèrent pour définir le style des éléments de la page :

en-tête, haut, bas, pied de page, menu, navigation, principal, conteneur, contenu, article, encadré latéral, haut de navigation, ...

Ainsi, les navigateurs ne peuvent pas reconnaître le contenu correct du site Web.

Et grâce aux éléments HTML5 tels que : <header> <footer> <nav> <section> <article>, ce problème est résolu.

Selon le W3C, le web sémantique :

「Permet de partager et de réutiliser les données entre applications, entreprises et groupes.»

Éléments sémantiques dans HTML5

Voici une liste alphabétique des nouveaux éléments sémantiques HTML5.

Ces liens pointent vers le manuel complet de référence HTML.

Balise Description
<article> Définir un article.
<aside> Définir du contenu en dehors du contenu de la page.
<details> Définir des détails supplémentaires que l'utilisateur peut voir ou masquer.
<figcaption> Définir le titre de l'élément <figure>.
<figure> Définir un contenu inclus, comme des illustrations, des graphiques, des photos, des listes de codes, etc.
<footer> Définir le pied de page d'une section ou d'un document.
<header> Définir l'en-tête d'une section ou d'un document.
<main> Définir le contenu principal du document.
<mark> Définir un texte important ou mis en avant.
<nav> Définir un lien de navigation.
<section> Définir une section dans le document.
<summary> Définir le titre visible de l'élément <details>.
<time> Définir la date et l'heure.