Les balises de sectionnement
La plupart des nouvelles balises sémantiques sont des conteneurs principaux d'une page, que l'on appelle des balises de sectionnement, elles permettent de séparer les principales parties d'une page.
<header>
La balise header représente l'en-tête de la page, on y retrouve généralement le logo du site, ainsi que sa navigation.
Et on peut y mettre d'autres choses ?Oui ce n'est pas fixé, mais généralement un site possède deux types de contenu, une partie statique, qui s'affichera quelle que soit la page sur laquelle on se trouve, et une partie dynamique, qui va changer selon la page.
Les informations statiques en haut de page sont à mettre dans le header, comme je l'ai dit, ce sera souvent le logo du site, la navigation, mais ça peut aussi être des boutons d'outils pour la connexion, la gestion du profil et beaucoup d'autres choses.
Mais... Je croyais que tu me parlais du <head>, ce n'est pas la même chose ?Pas du tout, on verra le <head> dans peu de temps, mais c'est très différent du <header>. Le header se place dans le <body> et affiche du contenu sur la page, contrairement au <head>.
Ok, j'ai compris.<main>
On a ensuite la balise <main>, elle représente le contenu principal de la page, la partie dynamique dont on parlait juste avant.
D'accord celle là me parait claire.<footer>
Et enfin la balise footer, je te laisse deviner.
Le contenu statique en pied de page ?C'est ça !
Ok, donc <header>,<main> et <footer>. Si j'ai bien compris on devrait les retrouver dans toute page HTMLEffectivement dans l'idéal, ça devrait être le cas, il y a aussi d'autre balises de sectionnement qui sont à utiliser selon les besoins.
<aside>
On peut aussi utiliser une balise <aside>, elle permet de définir un contenu qui est "à côté" du contenu principal. Il faut l'utiliser avec précaution, et ne pas confondre un contenu de la page qui serait positionné sur la droite ou sur la gauche avec un <aside>. Celle-ci doit être utilisé pour un contenu complémentaire au contenu principal, par exemple pour une barre d'outils, ou un menu de navigation secondaire positionné à côté du <main>.
J'ai peur de mal utiliser celle-ci.Le meilleur moyen pour éviter de se tromper, c'est de se demander si le contenu que l'on veut afficher fait partie du main, c'est à dire, est ce que c'est une partie du contenu principal de cette page. Si oui, ce n'est probablement pas un <aside>, sinon c'en est probablement un. Un <aside> doit normalement toujours être en dehors du <main> et jamais à l'intérieur.
Ok je retiens ça.<nav>
On a déjà parlé de celle-là, elle permet de mettre en place la navigation du site. Elle va généralement contenir des liens. Tu penses la placer où ?
Dans le <header> j'imagine, vu qu'il doit contenir la navigation.En effet, ça ne sera pas toujours le cas, mais généralement oui.
<section>
Ensuite, on a la balise <section> celle ci représente un bloc de contenu qui est sur un thème et possède un titre.
Je ne comprends pas ce que tu veux dire.Hé bien quand on crée une section, il faut que tout son contenu soit sur le même thème, c'est-à-dire que tous les éléments à l'intérieur doivent parler de la même chose. Et il faut qu'elle possède un titre, c'est à dire une balise <h[x]>.
Ah oui, je me rappelle, la balise de titre !Tu as mis deux sections, on peut en mettre plusieurs ?Oui, la <section> peut être utilisée autant de fois que nécessaire, mais sans en abuser pour autant, une page avec trop de section va perdre en cohérence et cela pourrait impacter le référencement. Elle doit être utilisée pour catégoriser et identifier les principales parties de la page.
Donc à utiliser avec modération.Exactement !
<article>
On a aussi la balise <article>, elle représente un contenu itérable.
Itérable ? Et en français ça se dit commen t?C'est du français, un élément itérable est un élément qui peut être répété, par exemple si tu va sur un site e-commerce, tu auras une page avec la liste des produits proposés, bien que les produits soient différents en contenu, en apparence ils sont normalement tous construits de la même façon, avec une image, un nom, une description, un prix et d'autres informations. On peut donc dire que les produits sont itérables, leurs balises d'affichages se répètent avec la même mise en forme, et simplement un contenu textuel adapté.
Ok, je vois ce que tu veux dire.Hé bien dès qu'un contenu est itérable, on peut utiliser la balise <article> pour englober l'élément.
Pfiou ça en fait du code !Ce n'est pas grand chose pour le moment, les fichiers HTML peuvent vite comporter de nombreuses lignes, mais tu verras tu t'habitueras à force de pratiquer.
<address>
Et enfin, on a la balise <address>, elle permet de préciser des informations de contact, donc, contrairement à son nom, pas nécessairement une adresse postale, ça peut aussi être un numéro de téléphone ou de fax, une adresse e-mail, un lien vers un compte linkedin, ou un mélange de plusieurs informations de contact variées.
Pour l'exemple, je l'ai mis dans le footer, mais la balise <address> peut être positionnée n'importe où tant que c'est cohérent.
Et c'est tout pour les balises sémantiques ?D'autres balises sémantiques
Non il en existe d'autres, celle que l'on vient de voir sont les principales, mais ils y en a d'autres, dont certaines que l'on a déjà vues auparavant.
Ah bon ?Oui, il y a par exemple <figure> qui permet de créer un élément à partir de plusieurs informations qu'elle contient, elle crée en fait un groupe sémantique pour du contenu.
Mais oui ! Maintenant que tu me le dis.La plupart des balises de contenu textuel sont aussi sémantiques, à l'exception du <span>, car elle apporte un sens spécifique à un élément.
Effectivement vu comme ça.Et il y en a d'autres, mais tu auras l'occasion de les voir par toi même le jour où tu en auras besoin. N'hésites pas à consulter cette page, elle contient l'ensemble des balises autorisées en HTML.
Ok, je mets le lien en favori, je pense que ça va me servir très souvent.On a fini avec le HTML?
Presque, il reste un dernier groupe de balises dont je ne t'ai pas encore parlé ! J'ai terminé cette partie