Table des matières en HTML5

je cherche un moyen de représenter sémantiquement une table des matières. J'ai un article qui va sur plusieurs pages, et j'aimerais l'exprimer en HTML

Hors j'ai l'impression que ça n'est même pas possible en HTML5 :

- <header> sert à grouper des méta données relatives à l'<article> parent
- <hgroup> sert pour grouper en un seul
par exemple

<hgroup>
  <h2>Amélie Poulain</h2>
  <h3>Paris comme vous ne l'avez jamais vu</h3>
</hgroup>

signifie que le titre de la section est le H2, et que le H3 peut être ignoré, ça c'est qu'un complément de titre
- <hx> servent toujours à baliser les sous titres de l'article et donner une hiérarchie

bref, dans tout ça je ne vois pas comment marquer une série de Hx comme étant la table des matières de mon article ?

une idée ?

Une liste ou un formulaire avec un select ne suffirait pas? Ou alors j'ai mal compris.
Modifié par Patidou (27 Aug 2010 - 15:50)

Bonjour,

Pourquoi pas :

<article>
        <header>
                <h1>My major heading</h1>
                <h2>Subheading</h2>
                Abstract text...
        </header>
        ... lorem ipsum ....
        <hX>Heading within my article</hX>
        ... dolor sit amet ...
        <hX+1>Subheading in my article</hX+1>
</article>

http://html5doctor.com/the-hgroup-element/

http://html5doctor.com/your-questions-answered-9/

Bon, j'espère ne pas dire de connerie mais sa tu peux le faire avec <hgroup> non ?

http://blog.neamar.fr/accueil/4-web-pour-webmaster/110-valeur-semantique-de-hgroup-html5

Je dis sa, mais sans grande conviction

3arly3F a écrit :
Bon, j'espère ne pas dire de connerie mais sa tu peux le faire avec <hgroup> non ?

http://blog.neamar.fr/accueil/4-web-pour-webmaster/110-valeur-semantique-de-hgroup-html5

Je dis sa, mais sans grande conviction

Edit : apparemment non, hgroup ne permet pas de faire des tables des matières, mais au contraire d'aider à leur création ?

Oups double poste désolé
Modifié par 3arly3F (27 Aug 2010 - 16:23)

Ok. Bon, en imaginant que le sommaire se trouve sur toutes les pages c'est de la navigation, donc <nav> en dehors de <article>. Éventuellement, si il n'est pas déjà utilisé avec le role="complementary".

Sinon une page à part…

<nav> dans <article>, pas mal, j'aime beaucoup l'idée
et visiblement c'est même recommandé par l'excellenthttp://html5doctor.com/nav-element/ HTML5 doctor pour faire une table des matières, et d'après les specs on a le droit de l'imbriquer dans <article>

et ben voilà, quand on veut

par contre pour le complementary, pas sur : ça n'est pas pour donner du contenu autour du thème de l'article, c'est pour linker directement dans l'article lui même
Modifié par jpvincent (27 Aug 2010 - 17:05)

ça pourrait intéresser un browser, mais il peut déjà la fabriquer lui même après tout, sauf si l'article est sur plusieurs pages
je me disais que pour un moteur de recherche, ça pouvait servir à "ignorer" cette section qui n'est qu'une redite des titres à venir, et de lier différentes pages au même article.

mais on est d'accord qu'on est largement dans le théorique

à priori pas de rôle ARIA pour ça

jpvincent a écrit :
je cherche un moyen de représenter sémantiquement une table des matières. J'ai un article qui va sur plusieurs pages, et j'aimerais l'exprimer en HTML

comme ça, là, j'aurais tendance à refléter la hiérarchie du document dans la table des matières au sein d'un <hgroup> dans une liste ordonnée enveloppée éventuellement d'une <nav> puisqu'on peut y mettre un h1 afin d'avoir un outline qui se respecte.

Sinon, j'aime bien cette idée : http://www.jeremyselier.com/diveintohtml5/table-of-contents.html

Sinon (bis) une simple liste ordonnée devrait le faire

br1o a écrit :
comme ça, là, j'aurais tendance à refléter la hiérarchie du document dans la table des matières au sein d'un<hgroup> dans une liste ordonnée enveloppée éventuellement d'une <nav> puisqu'on peut y mettre un h1 afin d'avoir un outline qui se respecte.

br1o les tuyaux percés.
Non sérieusement, si tu veux dire par là que tu veux réutiliser des HN comme éléments de ta table des matières, c'est une très mauvaise idée. Bonjour le plan du document dédoublé! Et utiliser un tas d'éléments HN dans un HGROUP (qui n'a pas grand chose à faire dans une table des matières...), ça n'est à priori pas possible vu la définition de cet élément.
Seule idée à retenir: annoncer la table des matières par un titre.

Pour baliser le contenu de la table des matières, une liste ou des listes imbriquées (suivant jusqu'à quel niveau on veut aller dans la table des matières), c'est pas mal. C'est même un des rares cas où les listes imbriquées sont intéressantes.
À priori plutôt des listes ordonnées.

br1o a écrit :
Sinon, j'aime bien cette idée : http://www.jeremyselier.com/diveintohtml5/table-of-contents.html

L'emploi des OL imbriqués est bon.
L'utilisation de DL pour les numéros est lamentable:
- Strictement aucun intérêt à surcharger la sémantique du contenu avec des DL. La sémantique HTML c'est sensé être simple, en mettre cinq couches à chaque fois c'est contreproductif (et c'est perdre son temps).
- La numérotation ne devrait pas être un contenu HTML. Dans l'absolu elle devrait être générée en CSS (les compteurs CSS font ça très bien, de mémoire ça marche aussi dans IE8). Si on ne peut pas se permettre de faire ça en full-CSS (genre parce qu'on doit assurer le support d'IE7), on met l'info dans un SPAN et on n'en fait pas tout un plat. Donc pas:

<dl>
  <dt>
    <a>Bonjour, bonsoir</a>
  </dt>
  <dd>ix</dd>
</dl>

Mais:

<span>ix</span>
<a>Bonjour, bonsoir</a>

br1o a écrit :
Sinon (bis) une simple liste ordonnée devrait le faire

Amen.

Florent V. a écrit :

br1o les tuyaux percés.

héhé, mais c'est que les bons tuyaux, c'est surtout sur mon compte Twitter (et encore quand je suis en forme)