Recherche
Peut être aimerez-vous...
Sections du site
Sites Neamar
Lisez ces articles !
| À la conquête de HTML5 : l'élément hgroup, l'incompris |
|
| Programmation et tuning - Programmation Web |
| Écrit par Neamar |
| Jeudi, 13 Mai 2010 12:58 |
|
C'est un élément ambigu parmi d'autres de la nouvelle norme HTML5 : hgroup semble ne pas vouloir se dévoiler. Si on lit la spécification officielle du W3C (en last call for comment actuellement), on reste un peu sur notre faim :
— W3C
Autrement dit, hgroup ne permet pas de faire des tables des matières, mais au contraire d'aider à leur création ! Actuellement, un document HTML sémantique comporte des balises titres : de h1 à h6, h1 indiquant le titre de la page, h2 un sous-titre, et ainsi de suite1. Donc, à quoi sert un hgroup ? En analysant le terme, on peut penser qu'on va mettre dedans des suites de titres ; par exemple une table des matières : <p>Table des matières :</p> <hgroup class="table-of-contents"> <h1>La vie des castors</h1> <h2>Introduction</h2> <h3>Remerciements</h3> <h2>Présentation des castors</h2> <h2>L'habitat des castors</h2> <h3>La rivière</h3> <h3>Les pneus de camion</h3> </hgroup> En fait non. Il faut lire attentivement le deuxième paragraphe de la spécification :
— W3C
Et finalement, le but devient clair : hgroup permet de mettre des éléments ensemble lorsqu'ils n'ont pas une valeur hiérarchique, mais additive. Mais quel intérêt, me direz-vous ? Les h1~6 sont des éléments pour des titres, un point c'est tout ! On n'a pas à les utiliser autrement ! <h1>La vie des castors</h1> <h2>...ou la passionnante aventure d'une espèce en danger</h2> Et c'est là que vient se placer hgroup. <hgroup> <h1>La vie des castors</h1> <h2>...ou la passionnante aventure d'une espèce en danger</h2> </hgroup> <h2>Introduction</h2> <hgroup> <h3>Remerciements</h3> <h4>Ce projet n'aurait pas vu le jour sans eux !</h4> </hgroup> <h2>Présentation des castors</h2> <h2>L'habitat des castors</h2> <hgroup> <h4>Leur habitat principal :</h4> <h3>La rivière</h3> </hgroup> <h3>Les pneus de camion</h3> Et un logiciel sémantique de création de table des matières (comme the outliner) affichera la table des matières suivantes :
Alors qu'un logiciel à l'ancienne ne distinguera pas les hx à valeur non-hiérarchique :
Bref, une balise qui va devenir utile avec le temps ! Et qui ouvre une nouvelle branche de recherche dans le CSS : l'utilisation de counter tenant compte des hgroup. Bon courage :)
|
| Mise à jour le Jeudi, 13 Mai 2010 15:06 |

et qu'ouie je, il n'est pas fait pour ça
du coup : il n'y a aucun moyen sémantique de définir une table des matières ?
ou on peut tout de même l'utiliser pour ça ?
En revanche, tu peux faire une table des matières sans lui associer de sémantique directe, simplement avec un class="" pour la styler si nécessaire.
Cela dit, n'oublie pas que hgroup conserve un lien avec la table des matières ; puisque seul le premier élément doit être pris en compte dans une table des matières.