Comment utiliser correctement la balise «section» en HTML5?

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

Voici les variations avec lesquelles je vais et vient:

1)

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

Pouvez-vous 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 bonne méthode pour utiliser la <section>balise?

La réponse est dans les spécifications actuelles:

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

Des exemples de sections seraient les chapitres, les différentes pages à onglets dans une boîte de dialogue à onglets ou les sections numérotées d'une thèse. La page d'accueil d'un site Web peut être divisée en sections pour une introduction, des actualités et des coordonnées.

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

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 à des fins de script, les auteurs sont encouragés à utiliser l'élément div à la place. Une règle générale est que l'élément section n'est approprié que si le contenu de l'élément est explicitement répertorié dans le plan du document .

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

Regarde 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 il est convenu est que ce n'est pas un wrapper générique, comme l' <div>est. Il devrait être utilisé à des fins sémantiques, et non comme un hook CSS ou JavaScript (bien qu'il puisse certainement être stylé ou "scripté").

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é n'importe où dans le document que la spécification HTML le permet, mais n'est pas nécessaire.

Dans la page wiki W3 sur la structuration de HTML5 , il est dit:

<section>: Utilisé pour regrouper différents articles dans différents buts ou sujets, ou pour définir les différentes sections d'un même article.

Et puis affiche une image que j'ai nettoyée:

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

<article>est lié à <section>, mais est distinctement différent. Tandis que <section>sert à regrouper des sections distinctes de contenu ou de fonctionnalités, il <article>est destiné à contenir des éléments de contenu autonomes individuels, tels que des articles de blog individuels, des vidéos, des images ou des actualités. Pensez-y de cette façon - si vous avez un certain nombre d'éléments de contenu, dont chacun conviendrait à la lecture par eux-mêmes, et aurait du sens à être syndiqué en tant qu'éléments séparés dans un flux RSS, alors <article>convient pour les marquer.

Dans notre exemple, <section id="main">contient des entrées de blog. Chaque entrée de blog conviendrait à la syndication en tant qu'élément dans un flux RSS, et aurait du sens une fois lue seule, hors contexte, <article>est donc parfaite pour eux:

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

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

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

Simple hein? Sachez cependant que vous pouvez également imbriquer des sections dans des articles, là où cela est logique. Par exemple, si chacun de ces articles de blog a une structure cohérente de sections distinctes, vous pouvez également insérer des sections dans vos articles. Cela pourrait ressembler à ceci:

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

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

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

Je crois comprendre que SECTION contient une section avec un titre qui est une partie importante du «flux» de la page (pas un aparté). Les sections seraient des chapitres, des parties numérotées de documents, etc.

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

Une autre chose à propos de SECTION est que vous ne devriez pas l'utiliser si votre page ne contient qu'une seule section. De plus, chaque section doit avoir un titre (H1-6, HGROUP, HEADING). Les titres sont "cadrés" avec la SECTION, donc 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 de la spécification sont assez bons au moment de la rédaction.

Donc, dans votre premier exemple, ce serait correct si vous aviez plusieurs sections de contenu qui ne pourraient pas être décrites comme des ARTICLE. (Avec un point mineur que vous n'auriez pas besoin du #primary DIV à moins que vous ne le vouliez pour un hook de style - les balises P seraient mieux).

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

Les SECTION ne doivent pas être utilisées comme des conteneurs - DIV est toujours la bonne utilisation pour cela, et toute autre boîte personnalisée que vous pourriez créer.

Vous pouvez certainement utiliser la balise de section comme conteneur. Il est là pour regrouper le contenu de manière plus sémantiquement significative 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 application. Une section, dans ce contexte, est un regroupement thématique de contenu, généralement avec un titre. http://www.w3.org/TR/html5/sections.html#the-section-element

La méthode correcte est la # 2. Vous avez utilisé la balise section pour définir une section de votre document. À partir des 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 à des fins de script, les auteurs sont encouragés à utiliser l'élément div à la place.

c'est tout simplement faux: n'est pas un wrapper. L'élément désigne une section sémantique de votre contenu pour aider à construire un plan de document. Il doit contenir un en-tête. Si vous recherchez un élément de wrapper de page (pour toute saveur de HTML ou XHTML), envisagez d'appliquer des styles directement à l'élément comme décrit par Kroc Camen. Si vous avez encore besoin d'un élément supplémentaire pour le style, utilisez un fichier. Comme l'explique le Dr Mike, div n'est pas mort, et s'il n'y a rien d'autre de plus approprié, c'est probablement là que vous voulez vraiment appliquer votre CSS.

vous pouvez vérifier ceci: http://html5doctor.com/avoiding-common-html5-mistakes/