Section vs article HTML5

J'ai une page composée de différentes "sections" comme des vidéos, un fil d'actualité, etc. Je suis un peu confus sur la façon de les représenter avec HTML5. Actuellement, je les ai en tant que HTML5 <section>, mais après un examen plus approfondi, il semble que la balise la plus correcte serait <article>. Quelqu'un pourrait-il faire la lumière à ce sujet pour moi?

Aucune de ces choses n'est un article de blog ou un "document" dans le vrai sens du mot, il est donc difficile de voir quel élément appliquer.

À votre santé

EDIT: J'ai choisi d'utiliser la articlebalise car il semble que ce soit une balise conteneur pour des éléments sans rapport avec ce que je suppose que mes "sections" sont. Cependant, l'article réel de la variable semble plutôt trompeur et bien qu'ils disent que HTML5 a été développé avec une plus grande considération pour les applications Web , je trouve que beaucoup de balises sont plus axées sur les blogs / documents.

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

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

<section>: Utilisé pour regrouper différents articles en différents objectifs 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 décrit également comment utiliser la <article>balise (à partir du même lien W3 ci-dessus):

<article>est lié à <section>, mais est distinctement différent. Alors que <section>c'est pour regrouper des sections distinctes de contenu ou de fonctionnalité, <article>c'est pour contenir des éléments de contenu autonomes individuels liés, tels que des articles de blog, des vidéos, des images ou des actualités individuels. 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 flux RSS, il <article>convient alors de les marquer.

Dans notre exemple, <section id="main">contient des entrées de blog. Chaque entrée de blog serait adaptée à la syndication en tant qu'élément dans un flux RSS et aurait un sens lorsqu'elle est lue seule, hors contexte, elle <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, lorsque 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>

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

La spécification HTML5 dit (Section):

L'élément section représente une section générique d'un document ou d'une application. Dans ce contexte, une section est un regroupement thématique de contenu, généralement avec un en-tête. [...]

Des exemples de sections seraient des 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 informations de contact.

Remarque : Les auteurs sont encouragés à utiliser l'élément article au lieu de l'élément section lorsque cela aurait du sens de syndiquer le contenu de l'élément.

Et pour l' article

L'élément article représente une composition autonome dans un document, une page, une application ou un site et qui est, en principe, indépendamment distribuable ou réutilisable, par exemple dans la syndication. Il peut s'agir d'un article de forum, d'un article de magazine ou de journal, d'une entrée de blog, d'un commentaire soumis par l'utilisateur, d'un widget ou gadget interactif, ou de tout autre élément de contenu indépendant.

Je pense que ce que vous appelez «sections» dans le PO correspond à la définition de l'article car je peux les voir être distribuables ou réutilisables indépendamment .

Mise à jour: quelques modifications de texte mineures articledans le dernier brouillon des éditeurs pour HTML 5.1 (modifications en italique):

L'élément article représente une composition complète ou autonome dans un document, une page, une application ou un site et qui est, en principe, distribuable ou réutilisable indépendamment, par exemple dans la syndication. Il peut s'agir d'un article de forum, d'un article de magazine ou de journal, d'une entrée de blog, d'un commentaire soumis par l'utilisateur, d'un widget ou gadget interactif, ou de tout autre élément de contenu indépendant.

En outre, la discussion sur la liste de diffusion HTML public au sujet articlede Janvier et Février 2013.

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

Maintenant, je ne sais pas ce que vous avez dans vos vidéos, votre flux d'actualités, etc., mais voici un exemple (il n'y a pas de VRAI bien ou de mal, juste une indication de la façon dont j'utilise ces balises):

<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 voir, les sections sont toujours pertinentes les unes par rapport aux autres, mais tant qu'elles se trouvent dans un bloc qui les regroupe. Les sections NE DOIVENT PAS être à l'intérieur d'articles. Ils peuvent être dans le corps d'un document, mais j'utilise des sections dans le corps, lorsque le document entier 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.

J'aime m'en tenir à la signification standard des mots utilisés: An articles'appliquerait aux articles. Je définirais les articles de blog, les documents et les articles de presse comme articles. Les sections, d'autre part, feraient référence aux éléments de mise en page / ux: la barre latérale, l'en-tête, le pied de page seraient des sections. Cependant, c'est toute ma propre interprétation personnelle - comme vous l'avez souligné, les spécifications de ces éléments ne sont pas bien définies.

Soutenant cela, le w3c définit un articleélément comme une section de contenu qui peut se suffire à elle-même. Un article de blog peut être considéré comme un élément de contenu précieux et consommable. Cependant, un en-tête ne le ferait pas.

Voici un article intéressant sur la folie d'un homme en essayant de faire la différence entre les deux nouveaux éléments. Le point de base de l'article, qui me semble également correct, est d'essayer d'utiliser l'élément qui, selon vous, représente le mieux ce qu'il contient.

Ce qui est plus problématique, c'est que l'article et la section sont très similaires. Tout ce qui les sépare est le mot «autonome». Décider quel élément utiliser serait facile s'il y avait des règles strictes et rapides. C'est plutôt 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 des sections. C'est à vous de décider quel élément est le plus sémantiquement approprié dans une situation donnée.

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

L'organigramme ci-dessous peut être utile lors du choix de l'un des différents éléments HTML5 sémantiques:

Section

• Utilisez-le pour définir une section de votre mise en page. Il pourrait être mid, left, right , etc ..
• Cela a un sens de connexion avec un autre élément, en termes simples, c'est DEPENDENT.

Article

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

• L'article a sa propre signification.

Une section est essentiellement un wrapper pour h1(ou d'autres hbalises) et le contenu qui correspond à cela. Un articleest essentiellement un document dans votre document qui est 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.

aussi, pour le contenu syndiqué "Les auteurs sont encouragés à utiliser l'élément article au lieu de l'élément section quand il serait judicieux de syndiquer le contenu de l'élément."

Mon interprétation est: je pense à YouTube, il a 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 div-conteneur contenant des articles.

L'article et la section sont tous deux des éléments sémantiques de HTML5. La section est une section générique au niveau bloc d'une page Web, mais pertinente pour le contenu de notre page Web. L'article est également au niveau du bloc, mais l'article fait référence à un article de blog individuel, à un commentaire, à une page Web.

L'article et la section doivent tous deux inclure un en-tête h2-h6.

Pour un article de blog, utilisez la syntaxe suivante pour l'article et la section.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>