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?
<section>s'agit d'une balise sémantique et non d'un wrapper générique comme<div>.Réponses:
La réponse est dans les spécifications actuelles:
Référence:
Regarde aussi:
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:
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.la source
Dans la page wiki W3 sur la structuration de HTML5 , il est dit:
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):la source
<main>balise un par document au lieu de<section id="main"?<main>serait idéale.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.
la source
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:
la source
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 :
la source
<article>s), mais il est impossible de vraiment le dire avec seulement du texte factice comme exemple, et deux sections avec leid"primaire" ...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/
la source