Les balises HTML5 header section nav footer

De nouvelles balises HTML5 font leur apparition pour simplifier la vie des développeurs.

Vous saurez tout sur les balises header, section, nav et footer à la fin de ce chapitre. Vous avez même des balises moins connues mais pourtant très pratiques comme progress ou mark.

Il faut savoir que ces nouvelles balises sont très utiles au développeur, pour comprendre l’architecture de la page.

Souvent sur les sites Internet complexes, il y a plusieurs développeurs qui travaillent sur des pages différentes, et ils s’échangent les pages en fonction des fonctionnalités ajoutées. Pour se repérer beaucoup plus rapidement, ces nouvelles balises ont été créées et s’ajoutent au même niveau que la balise header avec, par exemple, la bannière, le menu.

Les balises HTML5

La balise nav regroupe les éléments d’un menu de navigation, si vous mettez un menu ici, vous le mettez dans la balise nav.

Exemple :

<nav> 
   <ul>
      <li><a href="">Accueil</a></li> 
      <li><a href="">Articles</a></li> 
      <li><a href="">Vidéos</a></li> 
      <li><a href="">Formations</a></li> 
      <li><a href="">Contact</a></li> 
   </ul>
</nav>

La balise footer, elle, elle regroupe les éléments du pied de page donc en bas s’il y a un menu nous contacter etc.

Exemple :

<footer> 
<hr/>
<p>Copyright www.Develop4fun.fr 2019</p> 
</footer>

Et la balise aside qui indique qu’il s’agit des d’éléments annexes complémentaires au contenu.

Exemple :

<aside>
   <h3>Anciens Articles</h3> 
   <ul> 
       <li><a href="">Août 2019</a></li> 
       <li><a href="">Juillet 2019</a></li> 
       <li><a href="">Juin 2019</a></li> 
       <li><a href="">Mai 2019</a></li> 
   </ul> 
</aside>

Il faut savoir que le contenu principal est organisé en deux catégories:

Vous avez la balise section qui détermine une partie de contenu de la page qui se rapporte à un thème déterminé.

Et vous avez la balise article qui définit un contenu indépendant du document, qui possède une identité à part : ça peut être l’article d’un blog, un post sur un forum ou un produit dans un site e-commerce.

Les sections pour le thème du site et la balise article pour un contenu indépendant tout simplement, c’est cela que vous devez retenir.

Exemple :

<section> 
   <h1>Titre de l'article de la page</h1>
   <article> 
      <p>Le contenu de l'article</p> 
   </article> 
</section>

Pensez à utiliser ces balises HTML5, comme nous vous l’avons dit, cela va vous permettre d’organiser votre page HTML, et qu’elle soit compréhensible par d’autres développeurs. Elles ne servent principalement qu’à ça, car par défaut, elles ne modifient pas l’affichage.

La balise hgroup peut contenir un groupe de balises h, donc si vous définissez une balise h1 avec le titre de l’article, une balise h2 avec les sous-titres, mettez-les dans une balise hgroup.

Vous avez également la balise mark qui met en surligné sur fond jaune du texte, ça permet de mettre du texte en valeur avec le surlignage jaune, tout simplement.

Vous avez aussi la nouvelle balise HTML 5 progress, qui vous permet de créer une barre de chargement. En principe, vous combinez cette balise avec du JavaScript, cela vous permet de mettre à jour l’état d’avancement en direct pour les visiteurs.

Vous avez deux attributs: l’attribut value pour indiquer la valeur de la progression en pourcentage et l’attribut max pour donner le maximum atteignable en pourcentage, tout en sachant qu’en principe il s’utilise de 0 à 100 % donc max sera toujours à 100, pour 100 %.

Votre balise progress et la balise value seront mises à jour automatiquement en JavaScript, avec le nombre. C’est très intéressant pour mettre un peu d’interaction sur votre site Internet.

Si lorsque vous mettez HTML 5, vous rechargez uniquement des parties d’une certaine page Web, pensez à mettre une barre de progression, comme ça à l’utilisateur sait qu’il doit patienter. Et au lieu qu’il ferme la page directement en disant « ah ça bug j’ai cliqué sur le lien, le contenu ne s’affiche pas », il va voir la progression et il va patienter, attendre que le contenu s’affiche.

Vous avez également la balise figure qui est utilisée pour regrouper des illustrations comme des vidéos, des images et du texte. La balise figure et la balise figcaption qui va avec, qui fournit une légende aux éléments regroupés, permet d’ajouter plusieurs images, par exemple l’image logo1, l’image logo2, et figcaption permet d’ajouter une légende pour ces deux images. Ces deux balises vous seront très utiles.

Exemple :

<figure> 
   <img src="logo1.jpg" alt="Texte alternatif"/> 
   <img src="logo2.jpg" alt="Texte alternatif"/> 
   <figcaption>Légende pour les deux photos</figcaption> 
</figure>

Conclusion

Nous avons vu ici les premières étapes pour améliorer la maintenance et l’évolutivité de votre site, grâce à des balises HTML 5 permettant d’organiser le code. Nous avons également vu des nouvelles balises qui vous permettent de mieux interagir avec votre utilisateur.

Nous reparlerons plus tard de la balise nav, qui permet de déclarer votre menu de navigation.