Sections - noelno/dovelei GitHub Wiki
Important : le HTML5 Document Outline n'est pas implémenté par les navigateurs, robots d'indexations et lecteurs d'écrans, et ne le sera probablement jamais. Les parties de cet article évoquant le HTML5 Document Outline ont donc été rayées. (edit du 6 avril 2018)
Dans un document HTML, une section est un périmètre englobant un titre et un contenu.
Une section se crée de deux façons :
- explicitement, grâce à un élément de sectionnement (
<div>,<section>,<article>,<aside>…). La section est alors délimitée par la balise ouvrante et fermante, et possède un titre. - implicitement, en utilisant un titre en dehors d'un élément de sectionnement
Une section a un rôle sémantique : tout le contenu de la section est en lien avec le titre (et le footer le cas échéant).
Il est donc par exemple possible d'avoir plusieurs <h1> dans un même document HTML si ces titres appartiennent à des sections différentes. Le navigateur est capable de déterminer grâce à ces sections à quels éléments du code se rapporte chaque titre.
A noter que l'ascendance entre l'élement de sectionnement et le titre n'a pas besoin d'être directe pour prendre effet : si le titre est imbriqué dans plusieurs éléments n'étant pas d'autres éléments de sectionnement ou des sectionings roots (pour ces derniers on verra plus tard ce dont il s'agit), ces éléments sont ignorés.
Dans le cas d'une section implicite, tout le texte qui suivra sera considéré comme sémantiquement lié au titre qui le précède, jusqu'à ce qu'il y ait :
- un second titre de même niveau. Dans ce cas la section se clôt et une nouvelle s'ouvre.
- un titre de niveau plus faible. Dans ce cas une sous-section est crée, et le périmètre de cette sous-section est considéré comme faisant aussi partie du périmètre de la section parente.
Dans le cas d'une section explicite, tout le texte qui suivra sera considéré comme sémantiquement lié au titre qui le précède, jusqu'à ce que l'élément de sectionnement soit clôt par sa balise fermante.
Comme dit plus haut, une section explicite a un seul et unique titre. Si je crée un <article> avec juste un <h1> et des paragraphes, le navigateur considérera que tout l'<article> est en rapport avec le titre <h1>.
Si je crée un <article> avec un <h1> et plusieurs <h2>, <h3>, le navigateur considérera toujours que l'<article> est en rapport avec le titre <h1>, et que les autres niveaux de titres sont des sous-titres se rapportant à des sous-sections, mais toujours liées au titre <h1>.
Par contre si je crée un <article> avec plusieurs <h1>, le navigateur va l'interpréter comme un article sans titre, avec plusieurs sous-sections implicites.
Cas particulier : certains éléments (<blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> et <td>) font partie de la catégorie des sectioning roots : leurs sous-sections ne sont pas incluses au périmètre de la section parente.