11

Pesquisando, encontrei algumas perguntas relacionadas as tags do HTML5:

Porém ainda não consegui entender qual a diferença entre eles, nos diversos conteúdos que li, encontrei article dentro section e vice-versa, apenas article ou apenas section, article dentro de article, isso é um pouco confuso pra mim

1
  • 5
    Uma regra básica: se eu extrair esse elemento do seu contexto, ele continuará fazendo sentido? Se sim, tudo indica que é um <article>, se não, é possível que seja um <section>. Um capítulo de um livro, por exemplo, perderia o sentido, pois está fortemente associado ao contexto do resto da história - ele seria um <section>; já um post em um blog costuma ser independente de outros posts e fazer sentido mesmo fora do contexto do site - ele seria um <article>.
    – Woss
    30/08/2018 às 0:26

3 Respostas 3

12

Vou fazer minhas considerações sobre <section> e <article> baseada em algumas fontes de onde vou tirar parte do conteúdo.

SECTION

O elemento HTML <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Notas de uso

  • Cada <section> deve ser identificado, geralmente incluindo um cabeçalho (elemento <h1>-<h6>) como um filho do elemento <section>.
  • Se faz sentido distribuir separadamente o conteúdo de um elemento , use um elemento <article> em seu lugar.
  • Não use o elemento <section> como um container genérico; para isso que a <div> serve, especialmente quando a seção é apenas com propósito de estilização. Uma regra de ouro é quando um seção deve aparecer logicamente na estrutura de um documento.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/section

Vc pode usar uma section para definir áreas ou regiões para:

Textos introdutórios
Listagens
Mapas
Comentários
Informações de contato
Etc...


ARTICLE

O Elemento HTML Article (<article>) representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuído de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.

Notas de uso

  • Quando um elemento <article> está aninhado, o elemento interior representa um artigo relacionado com o elemento exterior. Por exemplo, os comentários do post de um blog podem ser elementos <article> aninhados em <article> representando o post do blog.
  • Informações sobre o autor de um elemento <article> podem ser fornecidas através do elemento <address>, mas ele não se aplica aos elementos <article> aninhados.
  • A data e hora de publicação de um elemento <article> pode ser descrita usando o atributo pubdate de um elemento <time>.

Normalmente se usa um heading dentro do article e tb pode ser aconselhável usar um footer também.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/article

Vc pode usar uma section para definir áreas ou regiões para:

Poste em Foruns
Entradas de Blog
Artigos
Etc..

O que se observa é que vc pode separa por exemplo um conjunto de articles em uma section, e em cada um desses articles vc pode ter outras sections dentro. Por isso acredito que vc ficou um pouco confuso. Diferente do elemento <main> por exemplo, que não é aconselhável ter mais de um por documento, ou defini-lo dentro de um article. Fonte

Modelo de estrutura construída com tags semânticas:

inserir a descrição da imagem aqui

Exemplo de "estrutura não semântica" versos "estrutura semântica"

inserir a descrição da imagem aqui

Fonte: https://www.vikingcodeschool.com/html5-and-css3/html5-semantic-tags

OBS: Segundo esse artigo sobre Estruturas Semânticas e Acessibilidade da Mozilla

Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou user agents de tecnologia assistiva, apesar disso o algorítmo é implementado em outro software como em verificadores de conformidade. Assim, ao algorítmo de estrutura não pode ser confiada a entrega da estrutura do documento para os usuários. Autores são aconselhados a usar níveis de cabeçalho (h1-h6) para transmitir a estrutura do documento.

Fonte: https://developer.mozilla.org/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document

Artigo que recomendo a leitura: https://internetingishard.com/html-and-css/semantic-html/


Exemplo prático

Nesse exemplo vai ficar a critério do time definir o escopo e entendimento de como deve ser interpretado semanticamente "Missão, Visão e Valores". Se cada parte funciona sozinha ou se a mensagem só funciona em conjunto.

Se vc entende que a "Missão, Visão e Valores" pertencem ao mesmo contexto, e não faria sentido, por exemplo, usar apenas os Valores de forma insolada em outras partes do site, te sugiro usar um article montado como abaixo:

<article>
  <h2>Missão, Visão e Valores</h2>
  <section>
    <h3>Missão</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
  <section>
    <h3>Visão</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
  <section>
    <h3>Valores</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </section>
</article>

Já se vc acredita que é plenamente possível usar apenas a Missão em determinada parte da página e que mesmo insolada ela passaria a mensagem de forma adequada e não depende de Visão e Valores vc pode separar "Missão, Visão e Valores" em articles dentro de uma section, pois o article funciona de forma independente sem depender do restante do conteúdo ao redor.

<section>
  <h2>Missão, Visão e Valores</h2>
  <article>
    <h3>Missão</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
  <article>
    <h3>Visão</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
  <article>
    <h3>Valores</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>

8
  • Muito boa a reposta, só pra ver se eu entendi... Estou atualizando um site estático de página única baseada em <div>, nele há alguns <article>, como "Quem somos", "Missão, visão e valores" e "Contato", no segundo há 3 <section> ("Missão", "Visão" e "Valores"), estou certo?
    – Costamilam
    30/08/2018 às 0:42
  • 1
    @GuilhermeCostamilam veja que vc pode ter uma Section com um H2 chamado "Missão Visão e Valores" e dentro dessa Section vc pode ter um Article para H3 Missão, um Article para H3 Visão, etc... Eu acredito que vc pode usar por exemplo só o Article H3 Valores, em outras parte do site, sem precisar da Visão e Missão por exemplo. Então eu vejo esse conteúdo como independente. Mas se vc julgar que eles são "inseparáveis" Ai seria melhor começar com um Article, e dentro dele fazer uma Section para cada Missão, Visão e Valores, já que eles podem não fazer sentido pra vc se usados separados.
    – hugocsl
    30/08/2018 às 0:53
  • Pessoalmente, não vejo sentido em qualquer um dos três isolados, sem os outros dois, não que fique incompreensível, mas diminui bastante o seu significado, por isso o uso do <section>. No caso, cada um dos três, com um título e um parágrafo, sem um título pai "Missão Visão e Valores", como os três juntos podem estar separados do restante do conteúdo sem perder o sentido, imaginei colocar em um <article>. Valeu pela ajuda, no final o uso de cada um é um pouco subjetivo, já que vai da interpretação de cada um o quão dependente aquele elemento é de seu contexto
    – Costamilam
    30/08/2018 às 1:14
  • @GuilhermeCostamilam exato, esse é um caso um pouco mais particular... Repare no Exemplo Prático que acabei de colocar na edição da minha resposta. Abordo justamente isso
    – hugocsl
    30/08/2018 às 1:16
  • Uma última dúvida, o article deve independente dos outros elementos da página ou do contexto que ele está (aside, main, section ou outro article)? Porque no caso da segunda opção "Missão", "Visão" e "Valores" seriam article dentro de article (seguindo a ideia do seu primeiro exemplo prático)
    – Costamilam
    30/08/2018 às 1:22
5

Ambas servem para marcar blocos de código, para simplesmente separar as coisas, ou para usar uma formatação diferenciada.

Antes do HTML5, só havia a tag div com esse propósito mais genérico de separar as coisas, então tudo era separado no layout por divs, menus, navegação, seções de links, rodapés, headers, etc.

O HTML5 introduziu tags semânticas, ou seja, que tem mais uma funções pra ajudar no entendimento e interpretação do layout do que propriamente uma função de design, como table e h1 por exemplo.

Tags como header, footer, section e article tem essa função: marcar o que é cada coisa em separado no layout do html. Quando você olha uma estrutura assim:

<header>
   <nav>
   </nav>
</header>
<section>
</section>
<section>
</section>
<footer>
</footer>

Você facilmente identifica que há um cabeçalho com uma barra de navegação nele, duas sessões distintas, e no final um rodapé.
Isso poderia ser feito somente com div, mas imagina a confusão que seria para identificar rapidamente o que faz cada parte no layout?

Por isso a semântica é importante, as tags não tem um comportamento especial, mas marcam bem como é o layout, daí a diferença enter usar um section por exemplo e simplesmente um div.

Aproveitando, uma ótima leitura sobre semântica do Anderson Carlos Woss: O que é esboço HTML (HTML Outlines)?

EDIT para responder o comentário, vou usar as definições do mozilla:

ARTICLE: article

O Elemento HTML Article (<article>) representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuido de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.

SECTION: section

O elemento HTML <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Por exemplo, um menu de navegação deve estar dentro um elemento <nav>, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma <section>.

O site tableless.com.br traz uma definição simplificada mas interessante:

ARTICLE Define a área onde há um artigo, texto, redação, conteúdo e etc…

SECTION Define um bloco ou um grupo de um assunto específico. É importante entender que a section agrupa diversos elementos que tenham relação entre si. Por exemplo, se há uma área no site que há links, conteúdo, imagens e etc de um assunto em comum, você agrupará esses elementos com uma section. Nesse caso, ele entrou no lugar daquele div que fazíamos para dividir grandes blocos de assuntos em comum.

4
  • Sobre esta semântica que citou, eu falei um pouco em O que é esboço HTML (HTML Outlines)? Provavelmente será de interesse para quem ler sua resposta.
    – Woss
    30/08/2018 às 0:06
  • muito bom mesmo @AndersonCarlosWoss, inclui na resposta! 30/08/2018 às 0:14
  • Tá mas qual a diferença entre section e article? Entendo a questão do que é a semântica, e significado de outras tags, por exemplo,header, footer e aside. A dúvida é exclusivamente entre o uso e significado do section e article, em que situação usar um ou outro?
    – Costamilam
    30/08/2018 às 0:26
  • @GuilhermeCostamilam, adicionei ao texto da pergunta 30/08/2018 às 0:32
0

Sim, tanto o <section> como o <article> parecem que são a mesma coisa e que tanto faz usar um ou outro, mas não é bem assim.

Resumo: <section> por sí só não tem um significado, já <article> deve ser usado para representar elementos que são independentes e auto-explicativos.

section: A especificação diz que ele é um bloco de conteúdo semânticamente genérico, ou seja: ele não tem um significado explícito e você deveria usar ele caso não houver outros elementos mais semânticos que melhor descrevem o conteúdo em questão. A ponto chave aqui é que, o que vai dar o significado para o <section> é um título que está dentro dele (valores do atributo role também).
Ex.:

<section>
    <h2>Comentários da página</h2>
</section>

Nesse caso, o título está dando significado a aquela <section>. Vale deixar bem claro também que, se por acaso na <section> que você estiver usando não tiver um título dentro dela, muito possivelmente isso quer dizer que você está usando a <section> de forma errada, e seria mais apropriado por exemplo utilizar um <div>.
Ex.:

<section>
  <button>curtir</button>
  <button>não curtir</button>
  <button>salvar</button>
</section>

Nesse caso até que está correto (pois nenhum elemento mais semântico poderia ser usado aqui), mas seria mais apropriado usar <div>, principalmente se você quer apenas utilizar o elemento apenas para estilizar, onde se você apenas quer utilizar um wrapper para estilizar em hipótese alguma você usa <section>.

article: Ele basicamente é um elemento independente, que não possui relação direta com o restante da página e que mesmo se o seu conteúdo fosse tratado de forma independente ele continuaria fazendo sentido, pois o seu conteúdo não possui relação direita com a pagina. Ele é ideal para ser usado por exemplo para envolver o conteúdo dentro de um artigo (já que ele é independente do resto da página), tanto como os comentários da página (já que eles são independentes e podem reutilizados separadamente), ou até um card de um produto, uma propaganda, um card de um vídeo também (vídeos do YouTube)... E por aí vai. Nesse caso também é legal ter um título dentro do , mas não é obrigatório. Caso você tenha um <article> dentro de um outro <article> implica dizer que o elemento aninhado possui uma relação direta com o seu <article> pai, sendo isso útil para envolver semânticamente os comentários de um artigo.
Ex.:

<article>
  <header>
     <h1>Como Ter dinheiro</h1>
     <p>Henrique Barbosa</p>
  </header>
  <p>Basta ser rico KKK</p>

   <section>
     <h2>Comentários</h2>
     
     <article id="comment-1">
        <header>
          <p>Adriano Gomes</p>
        </header>
        <p>Mds cara esse artigo foi uma merdaKKKKKK</p>
     </article>
   </section>
</article>

OBS: Perceba que o <article> principal representa o artigo como um todo, e os artigos dentro dele representa os comentários, pois os comentários possuem uma relação direta com o artigo.
OBS2: Se você olhar bem, dentro de cada <article> tem um <header>. Esse header basicamente serve para dar mais informações sobre o <article>. Você poderia usar um <footer> também.
OBS3: Perceba também que eu usei um </section> dentro do <article>. Isso é normal, pois como eu disse:

ele é um bloco de conteúdo semânticamente genérico
Ou seja, você dá o significado que você quiser pra ele, especialmente nesse caso aqui que eu deixei claro que ele representa a seção de comentários do artigo. Também é permitido usar um adress dentro do article para dizer onde você pode encontrar o autor daquele artigo, mas colocar o adress dentro de um article que está aninhado dentro de outro article não funciona.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .