Seção versus artigo HTML5

201

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.

James Hay
fonte
5
isso realmente não importa. Use o que fizer sentido para você. Pessoalmente, eu usaria section's
Ilia Choly 26/09/11
@illia choly: Eu concordo com você, não há verdadeiro certo ou errado.
Shirgill Farhan
1
Explicação
clara

Respostas:

143

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:

insira a descrição da imagem aqui

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>
Justin
fonte
13
Além disso: <main> pode ser usado para quebrar os elementos entre o cabeçalho e o rodapé (blocos azuis da imagem). <figure> agrupa imagens dentro dos artigos ou seções.
unidade lógica
2
Bom trabalho. Essa deve ser a resposta aceita. Concordo com a unidade lógica que você deve adicionar main.
Chuck Le Butt
1
Você deve atualizar a foto com a seção nos artigos.
K - A toxicidade no SO está crescendo.
Eu sinto que essa guerra entre artigo e seção será uma agora por causa da confusão. Mas Justin, estou 100% a bordo do uso da seção sobre o artigo como a seção se aplica a partes de documentos (como você mostrou) em que o artigo é um conteúdo independente e independente DENTRO do documento (e, portanto, de suas seções). Semanticamente, o termo "seção" faz mais sentido como um substituto para as seções div antigas. Bom trabalho!
Stokely
1
Você também pode usar <header> e <footer> dentro do <article> se você precisa de algo mais específico do que <section>
Ric
130

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.

steveax
fonte
17
enquanto busca na web, me deparei com um documento legal que leia Article 1, Section 2, Clause 3. Espero que isso me ajude a lembrar a lógica.
commonpike 29/01
3
Discordo até certo ponto, mas também acredito que eles poderiam ser alterados dependendo do contexto. A leitura das descrições das especificações sugere para mim que deveria ser o contrário, se um articleatua como um "widget". section: "agrupamento temático" e "seção de um documento". article: "independente" e "widget". Considere um exemplo de página inicial como codepen.io/anon/pen/iDEwf
daleyjem
2
Por que eles dizem que uma única postagem no fórum cria um artigo? Uma postagem no fórum não é concluída sem o restante do tópico imho.
masterxilo
7
Isso é ao contrário. O W3C afirma claramente que sectioné um agrupamento temático de conteúdo e articleé um elemento independente (ou seja, que pode ser agrupado em um tema). Pense nisso como um jornal: você encontrará muitos artigos em cada seção. Artigos de revisão de filmes na seção Entretenimento, por exemplo.
chuck le
3
Concordando com @Chuck aqui. No meu livro, essa resposta está completamente ao contrário. A resposta de Justin é muito mais adequada. Mas tudo bem, acho que as especificações deixam muito espaço para interpretação. Não tenho certeza se isso é uma coisa boa ou ruim.
Maryisdead
39

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.

mnsr
fonte
5
I'd use <article> for a text block that is totally unrelated to the other blocks on the page.Sei que você escreveu isso em 2011, mas não é para isso que <aside>serve a etiqueta?
MyDaftQuestions
19

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

Michael Jasper
fonte
8

O fluxograma abaixo pode ajudar na escolha de um dos vários elementos semânticos do HTML5: insira a descrição da imagem aqui

Capitão Sensível
fonte
5

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.

Anand Singh
fonte
3

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.

Nick Manning
fonte
1

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

Albert
fonte
0

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.

userX
fonte
-2

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>
Avinash Malhotra
fonte