HTML5 : les balises sémantiques de structuration

Bienvenue dans notre cours résumé sur l’html5. Apprendre html 5 est une belle aventure, n’est ce pas?!. Chaque partie du cours vous présente une nouvelle balise qui a un objectif bien spécifié. On va découvrir dans cette partie de cours HTML5 : les balises sémantiques de structuration.

HTML5 : les balises sémantiques de structuration

La structure d’un document HTML5 , peut prendre la forme générale suivante (avec utilisation des nouvelles balises de structuration en html 5)

Alors, l’équivalent en code html est :

<!doctype html>
<html >
<head>
<title>Ma structure complète en HTML5</title>
<meta charset=“utf-8”>
</head>
<body>
<!– Début –>
<header>
<nav></nav>
</header>
<section>
<article></article>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
<!– Fin –>
</body>
</html>

La balise Header :

Comme son nom le suggère, <header> correspond à un en-tête de section. Il peut s’agir de l’en-tête général du document <body>, s’il est placé de telle sorte dans la hiérarchie qu’il ne dispose pas d’ancêtre de section. Il peut alternativement être utilisé en début de <section> ou <article> le cas échéant, et donc contenir :

des informations d’introduction (titres <h1> à <h6>, paragraphes, méta-informations, etc.) ;
une navigation (<nav>, <form>, <a>, etc.) pour cette sous-partie de document ;
une table des matières pour l’ancêtre <section> ou <article> qui le contient.

<body>
        <header>
        <img src=“logo.png” alt=“” />
        <h1>Titre principal</h1>
        <nav>
        <ul>
        <li><a href=“/”>Accueil</a></li>
        <li><a href=“/contact”>Contact</a></li>
        <li><a href=“/a-propos”>À propos</a></li>
        </ul>
        </nav>
        </header>
        <!– Contenu du document… –>
</body>       

La balise nav :

Les niveaux de navigation peuvent être multiples sur un site web ou une application.
Il peut s’agir de liens portant sur l’intégralité du site, sur une sous-partie de l’arborescence en particulier, vers des pages communes et transversales, ou bien encore vers des sections du même document.
L’élément <nav> est un choix de prédilection pour la navigation principale (souvent dans <header>) et éventuellement pour les navigations annexes de moindre valeur (souvent dans <footer>).

    <nav>
        <ul>
        <li><a href=“/accueil”>Accueil</a></li>
        <li><a href=“/articles”>Articles</a></li>
        <li><a href=“/archives”>Archives</a></li>
        <li><a href=“/contact”>Contact</a></li>
        </ul>
    </nav>
 

La balise section :

La balise section définit les sections d’un document, telles que les chapitres, les en-têtes, les pieds de page ou toute autre section du document.
Il peut être introduit par des éléments de titraille ( <hgroup>, <h1> à <h6>, etc.).
La balise <section> est introduite pour résumer les choses dans une section particulière.
La balise <section> divise le contenu en sections et sous-sections.

<section>
        <h1>Articles</h1>
        <article>
        <h2>Titre de l’article</h2>
        <p>Contenu de l’article</p>
        </article>
        <article>
        <h2>Titre de l’article</h2>
        <p>Contenu de l’article</p>
        </article>
        <article>
        <h2>Titre de l’article</h2>
        <p>Contenu de l’article</p>
        </article>
</section>       

La balise article :

L’élément <article> est une spécialisation de <section>.
Il possède une plus forte valeur sémantique, et pour cela il faut le considérer comme une portion de document qui se suffit à elle-même.
On peut extraire son contenu, éventuellement le syndiquer, sans que celui-ci perde son sens.
Étant donné le caractère souhaité autonome de cet élément vis-à-vis de ce qui l’entoure, il est tout à fait possible d’utiliser une balise <header> pour l’introduire et <footer> pour lui affecter un « pied d’article », voire de le découper en plusieurs parties via <section>.

  <article>
        <header>
        <h1>Titre de l’article</h1>
        <p>Publication le Jeudi 3 février 2020 par Adil Adili</p>
        </header>
        <p>Contenu de l’article, premier paragraphe.</p>
        <p>Contenu de l’article, deuxième paragraphe.</p>
        <footer><!– Pied de l’article –></footer>
    </article>

La balise footer :

Le pendant de <header> pour le pied de page est <footer>.
Il s’agit également d’un élément spécialisé possédant une valeur sémantique, visant à contenir les informations que l’on peut habituellement placer en fin de section, telles que des mentions légales, des informations de contact ou les sources d’une actualité, et éventuellement une navigation.
Ce contenu se rapporte au plus proche ancêtre de section, c’est-à-dire le document dans son ensemble s’il n’en possède pas, ou bien son parent de type <article> ou <section>.
De par sa nature, un élément <footer> ne peut être contenu dans <header>, <address> ou <footer> lui-même.
Son usage n’implique pas obligatoirement la présence d’un élément <header>.

    <body>
        <!– Contenu du document… –>
        <footer>
        <p>Tous droits réservés</p>
        <nav>
        <ul>
        <li><a href=“/”>Retour à l’accueil</a></li>
        <li><a href=“/contact”>Contact</a></li>
        <li><a href=“/plan”>Plan du site</a></li>
        </ul>
        </nav>
        </footer>
    </body>
 

La balise aside :

Une page web est bien souvent dotée d’un contenu principal et d’informations connexes qui ne sont pas essentielles à sa compréhension.
On peut considérer comme répondant à ces critères : une définition d’un des termes utilisés dans le contenu, une biographie, une chronologie apportant un fond historique, voire d’autres éclaircissements, astuces et notes qui n’ont de limite que l’imagination.

    <body>
        <!– Contenu du document… –>
        <aside>
        <h2>Gestion</h2>
        <ul>
        <li><a href=“/panier”>Panier</a></li>
        <li><a href=“/commandes”>Commandes</a></li>
        <li><a href=“/suivi”>Suivi</a></li>
        </ul>
        <h2>Glossaire</h2>
        <dl>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        </dl>
        </aside>
 </body>
 

Résumé :

On vous propose une vidéo qui résume cette partie sur les balises de structuration :

Vous pouvez suivre notre cours complet d’HTML . pour approfondir vos compétences sur le développement web en utilisant le langage html5.

Aussi, vous avez une playlist des vidéos (Explication en Darija arabe marocaine) bien organisée qui traite : Vidéos sur l’HTML5.

De plus, nous avons partagé une série des corrections des examens en html 5 et css3 sous format vidéos : Examens HTML 5 + CSS 3