web-dev-qa-db-fra.com

Section vs article HTML5

J'ai une page composée de différentes "sections" comme des vidéos, un fil d'actualité, etc. Je ne sais pas trop comment les représenter avec HTML5. Actuellement, je les ai en tant que HTML5 <section>s, mais après une inspection plus poussée, il semble que la balise la plus correcte serait <article>. Quelqu'un pourrait-il m'éclairer un peu? 

Aucune de ces choses ne sont des articles de blog ou des "documents" au vrai sens du mot, il est donc difficile de voir quel élément appliquer.

À votre santé

EDIT: J'ai choisi d'utiliser la balise article car il semble que ce soit une balise conteneur pour des éléments sans rapport, ce que sont, je suppose, mes "sections". L'article de tagname semble toutefois être assez trompeur et bien qu'ils disent que HTML5 a été développé avec une plus grande considération pour le Web applications, je trouve que beaucoup de balises sont davantage basées sur le blog/document.

Quoi qu'il en soit, merci pour vos réponses, il semble être assez subjectif.

161
James Hay

On dirait que vous devriez envelopper chacune des "sections" (comme vous les appelez) dans les balises <article> et les entrées de l'article dans les balises <section>.

La spécification HTML5 dit (Section):

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

Des exemples de sections sont les chapitres, les différents onglets dans une boîte de dialogue à onglets ou les sections numérotées d'une thèse. Un site la page d'accueil du site pourrait être divisée en sections pour une introduction, nouvelles et informations de contact.

Note: les auteurs sont encouragés à utiliser l'élément article à la place de section element quand il serait judicieux de syndiquer le contenu de l'élément.

Et pour Article

L'élément article représente une composition autonome dans un document, page, application ou site, c’est-à-dire, en principe, pouvant être distribué ou réutilisé indépendamment, p. ex. en syndication. Ce pourrait être un message de forum, un article de magazine ou de journal, une entrée de blog, un commentaire soumis par l'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.

Je pense que ce que vous appelez des "sections" dans le PO correspond à la définition de l'article, car je peux voir qu'il s'agit de indépendamment distribuable ou réutilisable.

Update: Quelques modifications mineures du texte pour article dans le dernier brouillon de l'éditeur pour HTML 5.1 (modifications en italique):

L'élément article représente un complet ou autonome, composition dans un document, une page, une application ou un site, c’est-à-dire en principe, indépendamment distribuable ou réutilisable, par ex. dans syndication. Cela pourrait être un post de forum, un magazine ou un journal article, une entrée de blog, un commentaire soumis par l'utilisateur, un widget interactif ou gadget, ou tout autre élément de contenu indépendant.

En outre, discussion sur la liste de diffusion HTML publique concernant article dans janvier et février de 2013.

112
steveax

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

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

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

enter image description here

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

<article> est lié à <section>, mais est distinctement différent . Alors que <section> permet de regrouper des sections distinctes de contenu ou fonctionnalité, <article> est destiné à contenir l'individu lié des éléments autonomes, tels que des articles de blog, des vidéos, images ou nouvelles. Pensez-y de cette façon - si vous avez un nombre de éléments de contenu, dont chacun conviendrait pour la lecture sur leur propre, et il serait logique de syndiquer comme éléments distincts dans un RSS feed, alors <article> est approprié pour les marquer.

Dans notre exemple, <section id="main"> contient des entrées de blog. Chaque blog l’entrée serait appropriée pour la syndication en tant qu’élément dans un flux RSS, et aurait du sens quand lu seul, hors contexte, donc <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 cependant que vous pouvez également imbriquer des sections dans articles, où il est logique de le faire. Par exemple, si chacun de ces articles de blog ont une structure cohérente de sections distinctes, puis vous pouvez également insérer 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>
109
Justin

J'utiliserais <article> pour un bloc de texte qui n'a aucun lien avec les autres blocs de la page .<section>, d'autre part, serait un séparateur permettant de séparer un document lié entre eux.

Maintenant, je ne suis pas sûr de ce que vous avez dans vos vidéos, flux d'actualités, etc., mais voici un exemple (il n'y a pas de vrai ou de faux, mais juste une indication de la façon dont j'utilise ces tags):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

Comme vous pouvez le constater, les sections sont toujours pertinentes les unes par rapport aux autres, mais dans la mesure où elles se trouvent dans un bloc qui les regroupe. Les sections NE DOIVENT PAS être à l'intérieur des articles. Ils peuvent être dans le corps d'un document, mais j'utilise des sections dans le corps, quand tout le document est un article. 

par exemple.

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

J'espère que cela a du sens.

37
jzm

J'aime rester avec le sens standard des mots utilisés: Un article s'appliquerait, eh bien, aux articles. Je définirais les articles de blog, les documents et les articles de presse comme étant articles. Les sections, d’autre part, feraient référence aux éléments layout/ux: la barre latérale, l’en-tête et le pied de page seraient des sections. Cependant, tout cela est ma propre interprétation personnelle - comme vous l'avez souligné, les spécifications de ces éléments ne sont pas bien définies.

Prenant en charge cela, le w3c définit un élément article comme une section de contenu pouvant être autonome. Un article de blog peut être considéré comme un élément de contenu précieux et consommable. Cependant, un en-tête ne serait pas.

Here est un article intéressant sur la folie d’un homme qui tente de différencier les deux nouveaux éléments. Le point fondamental de l’article, que j’estime également correct, est d’essayer d’utiliser ce que l’élément qui vous semble le mieux représente réellement ce qu’il contient.

Ce qui est plus problématique, c’est que cet article et cette section sont tellement similaire. Tout ce qui les sépare, c'est la Parole «autonome» . Décider quel élément utiliser serait facile s’il y avait des difficultés et des règles rapides. Au lieu de cela, c’est une question d’interprétation. Vous pouvez avoir plusieurs articles dans une section, vous pouvez avoir plusieurs sections dans un article, vous pouvez imbriquer des sections dans des sections et des articles dans les sections. C’est à vous de décider quel élément est le plus sémantiquement approprié dans une situation donnée.

Ici est une très bonne réponse à la même question ici sur SO

17
Michael Jasper

Section

  • Utilisez-le pour définir une section de votre mise en page. Il pourrait s'agir de mid, left, right, Etc.
  • Cela a un sens de connexion avec un autre élément, tout simplement, c'est DEPENDANT.

Article

  • Utilisez ceci lorsque vous avez un contenu indépendant qui a un sens en soi.

  • L'article a sa propre signification complète.

5
Anand Singh

Une section est fondamentalement un wrapper pour h1 (ou d'autres balises h) et le contenu correspondant. Une article est essentiellement un document de votre document répété ou paginé ... comme chaque article de blog sur votre document peut être un article, ou chaque commentaire sur votre document peut être un article.

3
Nick Manning

Pensez-y comme à un journal: section A - actualités mondiales, section B - actualités locales, section C - sports, section D - finances, etc. Chaque section contient plusieurs articles. La même analogie est en HTML 5: Une section est une partie plus grande d’une page pouvant contenir un ou plusieurs articles: des histoires ou des éléments de contenu .  enter image description here

2
Aamir Kalimi

aussi, pour le contenu souscrit "Les auteurs sont encouragés à utiliser l'élément article à la place de l'élément section lorsqu'il serait logique de syndiquer le contenu de l'élément."

1
albert

DIV

Si les éléments inclus ne sont pas liés les uns aux autres sémantiquement et n’avoir aucun titre générique, alors div est votre homme.

SECTION

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

ARTICLE 

L'élément article représente une composition autonome dans un document, page, application ou site, c’est-à-dire, en principe, pouvant être distribué ou réutilisé indépendamment, p. ex. en syndication.

1
Raja Alam

L'organigramme ci-dessous peut vous aider à choisir l'un des différents éléments sémantique HTML5:  enter image description here 

1
Captain Sensible

Mon interprétation est la suivante: .__ Je pense à YouTube, il comporte une section de commentaires, et à l'intérieur de la section de commentaires, il y a plusieurs articles (dans ce cas, des commentaires).

Ainsi, une section est comme un conteneur div qui contient des articles.

0
userX