Comment utiliser correctement la balise “section” en HTML5?

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

Ci-dessous les variations que je vais faire avec:

1)

Heading

Some text goes here...

Pouvez-vous utiliser la balise de section pour agir comme un conteneur?

2)

  

Heading

Post Title

Some text goes here...

Post Title

Some text goes here...

Quelle est la bonne méthode pour utiliser la

?

La réponse est dans la spécification actuelle:

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 en-tête.

Des exemples de sections seraient les chapitres, les différentes pages à tabs dans une boîte de dialog à tabs 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 articles d’actualité et des informations de contact.

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

Référence:

Regarde aussi:

Il semble qu’il y ait eu beaucoup de confusion concernant le but de cet élément, mais la seule chose convenue est qu’il ne s’agit pas d’ un wrapper générique, comme

est. Il devrait être utilisé à des fins sémantiques, et non pas un hook CSS ou JavaScript (bien qu’il puisse certainement être stylé ou “scripté”).

Un meilleur exemple, d’après moi, pourrait ressembler à ceci:

 

How to use the section tag

Disclaimer

Don't take my word for it...

Examples

But here's how I would do it...

Closing Notes

Well that was fun. I wonder if the spec will change next week?

Notez que

, étant complètement non sémantique, peut être utilisé n’importe où dans le document que la spécification HTML lui permet, mais n’est pas nécessaire.

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

: Utilisé pour regrouper différents articles dans des objectives ou des sujets différents, ou pour définir les différentes sections d’un même article.

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

entrer la description de l'image ici

Il est également important de savoir comment utiliser la

(à partir du même lien W3 ci-dessus):

est lié à

, mais est distinctement différent. Alors que

est destiné à regrouper des sections distinctes de contenu ou de fonctionnalité,

est destiné à contenir des éléments de contenu autonomes, tels que des articles de blog individuels, des vidéos, des images ou des articles. Pensez-y de cette façon – si vous avez un certain nombre d’éléments de contenu, chacun pouvant être lu par eux-mêmes et qu’il serait judicieux de syndiquer en tant qu’éléments séparés dans un stream RSS, alors

convient au marquage. les monter.

Dans notre exemple,

contient des entrées de blog. Chaque entrée de blog conviendrait à la syndication en tant qu’élément d’un stream RSS, et aurait un sens lorsqu’elle est lue seule, hors contexte. Par conséquent,

est parfait pour elles:

 

Simple hein? Sachez cependant que vous pouvez également imbriquer des sections à l’intérieur d’articles, là où il est judicieux de le faire. 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:

 

Vous pouvez certainement utiliser la balise de section en tant que conteneur. Il est là pour regrouper le contenu d’une manière plus sémantiquement significative qu’avec un div ou comme l’indique 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 en-tête. http://www.w3.org/TR/html5/sections.html#the-section-element

La méthode correcte est # 2. Vous avez utilisé la balise de 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 stylisme ou de commodité pour les scripts, les auteurs sont encouragés à utiliser l’élément div à la place.

Ma compréhension est que SECTION contient une section avec un en-tête qui est une partie importante du “stream” de la page (pas une réserve). Les sections seraient des chapitres, des parties numérotées de documents, etc.

ARTICLE concerne le contenu syndiqué – par exemple, les articles, les articles d’actualité, etc. ARTICLE et SECTION sont complètement séparés – vous pouvez en avoir 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 en-tête (H1-6, HGROUP, HEADING). Les en-têtes sont “scopés” avec la SECTION, par exemple si vous utilisez un H1 dans la page principale (en dehors d’une SECTION) et ensuite un H1 dans la section, cette dernière sera traitée comme un H2.

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

Donc, dans votre premier exemple, ce serait correct si vous aviez plusieurs sections de contenu qui ne pouvaient pas être décrites comme des ARTICLE. (Avec un point mineur que vous n’auriez pas besoin de la DIV primaire à moins que vous ne le vouliez pour un style hook – 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 du genre.

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

c’est juste faux: n’est pas un wrapper. L’élément dénote une section sémantique de votre contenu pour vous aider à créer un contour de document. Il devrait contenir un titre. Si vous recherchez un élément d’encapsuleur de page (pour toute version de HTML ou XHTML), envisagez d’appliquer des styles directement à l’élément, comme décrit par Kroc Camen. Si vous avez toujours besoin d’un élément supplémentaire pour le style, utilisez a. Comme l’explique le Dr Mike, div n’est pas mort et si rien d’autre n’est 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/