Seção versus artigo HTML5

Eu tenho uma página composta de várias "seções", como vídeos, um feed de notícias etc. Estou um pouco confuso sobre como representá-las no HTML5. Atualmente, eu os tenho como HTML5 <section>s, mas, em uma inspeção mais detalhada, parece que a tag mais correta seria <article>. Alguém poderia lançar alguma luz sobre isso para mim?

Nenhuma dessas coisas são postagens de blog ou "documentos" no verdadeiro sentido da palavra, por isso é meio difícil ver qual elemento aplicar.

Felicidades

EDIT: Optei por usar a articletag, pois parece ser uma tag de contêiner para elementos não relacionados, que eu acho que minhas "seções" são. O artigo atual do tagname, no entanto, parece bastante enganador e, embora eles digam que o HTML5 foi desenvolvido com maior consideração para aplicativos da Web , acho que muitas dessas tags são mais centradas em blogs / documentos.

De qualquer forma, obrigado por suas respostas, parece ser bastante subjetivo.

Na página wiki do W3 sobre a estruturação do HTML5 , diz:

<section>: Usado para agrupar artigos diferentes em diferentes propósitos ou assuntos, ou para definir as diferentes seções de um único artigo.

E então exibe uma imagem que eu limpei:

Também descreve como usar a <article>tag (do mesmo link W3 acima):

<article>está relacionado <section>, mas é distintamente diferente. Considerando que <section>é para agrupar seções distintas de conteúdo ou funcionalidade, <article>é para conter partes de conteúdo individuais relacionadas, como postagens em blogs, vídeos, imagens ou itens de notícias individuais. Pense dessa maneira - se você tiver vários itens de conteúdo, cada um deles adequado para leitura por conta própria, e faria sentido distribuir como itens separados em um feed RSS, <article>será adequado para marcá-los.

No nosso exemplo, <section id="main">contém entradas de blog. Cada entrada de blog seria adequada para organizar como um item em um feed RSS e faria sentido quando lida por si só, fora do contexto, portanto, <article>é perfeita para eles:

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

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

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

Simples né? Esteja ciente de que você também pode aninhar seções dentro de artigos, onde faz sentido fazê-lo. Por exemplo, se cada uma dessas postagens do blog tiver uma estrutura consistente de seções distintas, você também poderá incluir seções nos seus artigos. Pode ser algo como isto:

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

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

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

Parece que você deve agrupar cada uma das "seções" (como você as chama) em <article>tags e entradas no artigo em <section>tags.

A especificação HTML5 diz (Seção):

O elemento section representa uma seção genérica de um documento ou aplicativo. Uma seção, nesse contexto, é um agrupamento temático de conteúdo, geralmente com um cabeçalho. [...]

Exemplos de seções seriam capítulos, as várias páginas com guias em uma caixa de diálogo com guias ou as seções numeradas de uma tese. A página inicial de um site pode ser dividida em seções para uma introdução, itens de notícias e informações de contato.

Nota : Os autores são incentivados a usar o elemento article em vez do elemento section, quando faria sentido distribuir o conteúdo do elemento.

E para o artigo

O elemento do artigo representa uma composição independente em um documento, página, aplicativo ou site e que é, em princípio, distribuível ou reutilizável de forma independente, por exemplo, na organização. Pode ser uma postagem no fórum, uma revista ou artigo de jornal, uma entrada de blog, um comentário enviado pelo usuário, um widget ou gadget interativo ou qualquer outro item de conteúdo independente.

Eu acho que o que você chama de "seções" no OP se encaixa na definição de artigo, pois eu posso vê-las sendo distribuíveis ou reutilizáveis ​​de forma independente .

Atualização: algumas pequenas alterações de texto articleno rascunho dos editores mais recentes para HTML 5.1 (alterações em itálico):

O elemento article representa um completo ou composição independente em um documento, página, aplicativo ou site e que é, em princípio, distribuível ou reutilizável independentemente, por exemplo, na organização. Pode ser uma postagem no fórum, uma revista ou artigo de jornal, uma entrada de blog, um comentário enviado pelo usuário, um widget ou gadget interativo ou qualquer outro item de conteúdo independente.

Além disso, a discussão sobre a lista de discussão HTML Pública sobre articleem janeiro e fevereiro de 2013.

Eu usaria <article>para um bloco de texto totalmente não relacionado aos outros blocos da página. <section>, por outro lado, seria um divisor para separar um documento relacionado entre si.

Agora, não tenho certeza do que você tem em seus vídeos, feed de notícias etc., mas aqui está um exemplo (não existe REAL certo ou errado, apenas uma orientação de como eu uso essas 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>

Como você pode ver, as seções ainda são relevantes uma para a outra, mas desde que estejam dentro de um bloco que as agrupe. As seções NÃO precisam estar dentro dos artigos. Eles podem estar no corpo de um documento, mas eu uso seções no corpo, quando o documento inteiro é um artigo.

por exemplo

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

Espero que isso faça sentido.

Eu gosto de manter o significado padrão das palavras usadas: um articlese aplica a, bem, artigos. Eu definiria posts, documentos e artigos de notícias comoarticles . Seções, por outro lado, se refeririam a itens de layout / ux: barra lateral, cabeçalho, rodapé seriam seções. No entanto, essa é toda a minha própria interpretação pessoal - como você apontou, a especificação para esses elementos não está bem definida.

Apoiando isso, o w3c define um articleelemento como uma seção de conteúdo que pode ser independente por si mesma. Uma postagem no blog pode ser um item valioso e consumível de conteúdo. No entanto, um cabeçalho não.

Aqui está um artigo interessante sobre a loucura de um homem ao tentar diferenciar os dois novos elementos. O ponto básico do artigo, que também acho correto, é tentar usar o elemento que você sentir melhor representar o que ele contém.

O que é mais problemático é que artigo e seção são muito parecidos. Tudo o que os separa é a palavra "independente". Decidir qual elemento usar seria fácil se houvesse algumas regras rígidas e rápidas. Em vez disso, é uma questão de interpretação. Você pode ter vários artigos dentro de uma seção, várias seções e artigos, pode aninhar seções dentro de seções e artigos dentro de seções. Cabe a você decidir qual elemento é o mais semanticamente apropriado em qualquer situação.

Aqui está uma resposta muito boa para a mesma pergunta aqui no SO

O fluxograma abaixo pode ajudar na escolha de um dos vários elementos semânticos do HTML5:

Seção

• Use isso para definir uma seção do seu layout. Pode ser mid, left, right , etc ..
• Isso tem um significado de conexão com algum outro elemento, simplificando, é DEPENDENTE.

Artigo

• Use isso onde você tiver conteúdo independente, que faça sentido por si próprio.

• Artigo tem seu próprio significado completo.

Uma seção é basicamente um invólucro para h1(ou outras htags) e o conteúdo que corresponde a isso. An articleé essencialmente um documento repetido ou paginado dentro do seu documento ... como cada postagem do blog pode ser um artigo ou cada comentário no seu documento pode ser um artigo.

também, para conteúdo sindicado "Os autores são incentivados a usar o elemento article em vez do elemento section, quando faria sentido organizar o conteúdo do elemento".

Minha interpretação é: acho que no YouTube ele tem uma seção de comentários, e dentro da seção de comentários existem vários artigos (neste caso, comentários).

Portanto, uma seção é como um div-container que contém artigos.

Artigo e Seção são elementos semânticos do HTML5. Seção é uma seção genérica em nível de bloco de uma página da web, mas relevante para o conteúdo da nossa página. O artigo também é de nível de bloco, mas o artigo refere-se a uma postagem de blog individual, um comentário, de uma página da web.

Artigo e seção devem incluir elementos de cabeçalho h2-h6.

Para uma postagem no blog, use a seguinte sintaxe para artigo e seção.

<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>