Comment utiliser correctement la balise "section" en HTML5 ?

Question

J'essaie de créer une mise en page en HTML5 et après avoir lu plusieurs articles différents, je suis perdu. J'essaie d'obtenir un avis sur la façon dont il devrait être utilisé.

Voici les variations avec lesquelles je fais des allers-retours :

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Peut-on utiliser la balise section pour agir comme un conteneur ?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

Quelle est la méthode correcte pour utiliser le <section> tag ?

Answer 1

La réponse se trouve dans la spécification actuelle :

L'élément section représente une section générique d'un document ou d'une d'une application. Une section, dans ce contexte, est un regroupement thématique de contenu contenu, généralement assorti d'un titre.

Les chapitres, les différentes pages à onglets d'une boîte de dialogue à onglets ou les sections numérotées d'une thèse sont des exemples de sections. boîte de dialogue à onglets, ou les sections numérotées d'une thèse. La page d'accueil d'un site Web d'un site Web pourrait être divisée en sections pour l'introduction, les nouvelles et les informations de contact.

Les auteurs sont encouragés à utiliser l'élément article au lieu de l'élément l'élément section lorsqu'il est judicieux de syndiquer le contenu de l'élément l'élément .

Le site l'élément section n'est pas un élément conteneur générique . Lorsqu'un est nécessaire pour des raisons de style ou pour des raisons de commodité. scripting, les auteurs sont encouragés à utiliser l'élément div à la place. A règle générale est que l'élément section n'est approprié que si le contenu de l'élément doit être listé explicitement dans le plan du document. outline .

Référence :

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Voir aussi :

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Il semble qu'il y ait eu beaucoup de confusion sur le but de cet élément, mais la seule chose sur laquelle on s'accorde est qu'il est no une enveloppe générique, comme <div> est. Il doit être utilisé à des fins sémantiques, et non pas comme un crochet CSS ou JavaScript (bien qu'il soit certainement puede être stylé ou "scénarisé").

Un meilleur exemple, d'après ce que je comprends, pourrait ressembler à ceci :

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Notez que <div> étant complètement non-sémantique, peut être utilisé partout dans le document où la spécification HTML le permet, mais n'est pas nécessaire.

Answer 2

Dans le Page du W3 wiki sur la structuration du HTML5 il est dit :

<section> : Utilisé soit pour regrouper différents articles en fonction de différents objectifs ou ou sujets, soit pour définir les différentes sections d'un même article.

Et affiche ensuite une image que j'ai nettoyé :

Il est également important de savoir comment utiliser la fonction <article> (à partir du même lien W3 ci-dessus) :

<article> est lié à <section> mais il est nettement différent. Alors que <section> sert à regrouper des sections distinctes de contenu ou fonctionnalité, <article> est destiné à contenir un individu lié des éléments de contenu autonomes, tels que des articles de blog ou des vidéos, images ou articles d'actualité. Pensez-y de la manière suivante : si vous avez un certain nombre de éléments de contenu, chacun d'entre eux pouvant être lu séparément et qu'il serait judicieux de les syndiquer sous forme d'éléments distincts dans un flux RSS. alors <article> convient pour les marquer.

Dans notre exemple, <section id="main"> contient des entrées de blog. Chaque article pourrait être syndiqué en tant qu'élément d'un flux RSS et aurait un sens lorsqu'il est lu seul, hors contexte. aurait un sens lorsqu'elle est lue seule, hors contexte, et par conséquent <article> est parfait pour eux :

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simple, hein ? Sachez toutefois que vous pouvez également imbriquer des sections à l'intérieur de lorsque cela a un sens. Par exemple, si chacun de ces articles de ce blog a une structure cohérente de sections distinctes, alors vous pouvez également placer des sections dans vos articles. Cela pourrait ressembler à quelque chose comme ça :

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Answer 3

Si j'ai bien compris, le terme SECTION désigne une section avec un titre qui constitue une partie importante du "flux" de la page (et non un aparté). Les SECTIONs peuvent être des chapitres, des parties numérotées de documents, etc.

ARTICLE est pour le contenu syndiqué - par exemple, les postes, les nouvelles, etc. ARTICLE et SECTION sont complètement distincts - vous pouvez avoir l'un sans l'autre car ce sont des cas d'utilisation très différents.

Une autre chose concernant la section est que vous ne devez pas l'utiliser si votre page ne comporte qu'une seule section. En outre, chaque section doit avoir un titre (H1-6, HGROUP, HEADING). Les titres sont "scopés" à l'intérieur de la SECTION. Par exemple, si vous utilisez un H1 dans la page principale (en dehors d'une SECTION), puis un H1 à l'intérieur de la section, ce dernier sera traité comme un H2.

Les exemples dans la spécification sont plutôt bonnes au moment de la rédaction de ce rapport.

Ainsi, dans votre premier exemple, ce serait correct si vous aviez plusieurs sections de contenu qui ne pouvaient pas être décrites comme des ARTICLEs. (Avec une remarque mineure : vous n'auriez pas besoin du DIV #primary, sauf si vous le vouliez pour une accroche de style - les balises P seraient plus appropriées).

Le deuxième exemple serait correct si vous supprimiez toutes les balises SECTION. Les données de ce document seraient des articles, des messages ou quelque chose comme ça.

Les SECTIONs ne doivent pas être utilisées comme conteneurs -- DIV reste l'utilisation correcte pour cela, et pour toute autre boîte personnalisée que vous pourriez imaginer.

Answer 4

La méthode correcte est la n°2. Vous avez utilisé la balise section pour définir une section de votre document. D'après les spécifications http://www.w3.org/TR/html5/sections.html :

L'élément section n'est pas un élément conteneur générique. Lorsqu'un élément est nécessaire à des fins de style ou pour des raisons pratiques de les auteurs sont encouragés à utiliser l'élément div à la place.

Answer 5

Vous pouvez tout à fait utiliser la balise section comme un conteneur. Elle est là pour regrouper le contenu d'une manière plus significative sémantiquement qu'avec un div ou comme le dit la spécification html5 :

L'élément section représente une section générique d'un document ou d'une d'une application. Dans ce contexte, une section est un regroupement thématique d'éléments de contenu, généralement assorti d'un titre. http://www.w3.org/TR/html5/sections.html#the-section-element