3

Seria correto utilizar o código conforme abaixo?

<article>
  ...
  <section>
    <article>...</article>
    <article>...</article>
    <article>...</article>
  </section>
</article>

Caso não, qual seria a melhor forma relacionar as sub-páginas ao article principal?

3
  • Se são sub-páginas, por quê estariam no mesmo arquivo?
    – Woss
    Commented 10/05/2018 às 3:08
  • Pois seria um resumo das sub-páginas, com links "Leia mais" para ir para a sub-página completa Commented 10/05/2018 às 3:28
  • Então acredito que seja <aside>, visto que não fazem parte do conteúdo principal da página.
    – Woss
    Commented 10/05/2018 às 3:34

1 Resposta 1

1

Aqui tem um excelente artigo do HTML5 Doctor e o exemplo que ele usa é muito próximo do seu veja:

"Um <article> com <section>s
Você pode usar o elemento <section> para dividir o <article> em grupos lógicos de conteúdo com títulos"

An <article> with <section>s
You can use the <section> element to split the article into logical groups of content with headings:

<article>
  <h1>Apple varieties</h1>
  <p>The apple is the pomaceous fruit of the apple tree...</p>

  <section>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many supermarkets...</p>
  </section>

  <section>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies...</p>
  </section>

</article>

FONTE: Aqui tem o artigo completo, outros exemplos, e inclusive uma explicação sobre a diferença entre <article> e <section> na qual ele explica que o article tem mais valor semântico que o section


TL;DR

Exite muita confusão sobre a diferença entre os elementos <article> e <section>. O elemento <article> é um tipo especializado de <section>; tem um significado semântico mais específico do que <section> até pelo fato de ser um bloco independente e autônomo de conteúdo. Poderíamos usar <section>, mas usando <article> dá mais significado semântico ao conteúdo.

Por outro lado, <section> é apenas um bloco de conteúdo relacionado e <div> é apenas um bloco de conteúdo.

Para decidir qual desses três elementos é apropriado, escolha a primeira opção adequada:

  • O conteúdo faria sentido sozinho em um leitor de feeds? Se sim, use <article> (conteúdo independente)
  • O conteúdo está relacionado? Se sim, use <section> (section dentro do article)
  • Finalmente, se não houver relacionamento semântico, use <div> (div dentro do article)

(o trecho acima foi retirado do artigo citado)

Agora as palavras do Dr. Bruce Lawson:

Sobre o article

The spec says “When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article.”

Tradução simplificada: Quando os elementos articles são aninhados os articles dentro dos articles representam artigos que, em princípio, estão relacionados ao conteúdo do article externo".

Sobre o section

Section, on the other hand, isn’t “a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”. It’s either a way of sectioning a page into different subject areas, or sectioning an article into … well, sections.

Tradução simplificada: A section, por outro lado, não é “uma composição autônoma em um documento, página, aplicativo ou site e que se destina a ser distribuída ou reutilizável de forma independente”. Section é uma maneira de dividir uma página em diferentes áreas de assunto ou de dividir um article em bem... seções.

Fonte: http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/

2
  • Utilizar um <article> com múltiplos <section> é diferente de usar um <section> com múltiplos <article>. Se entendi bem, a dúvida é como representar sub-páginas dentro da página e não sub-seções da própria, o que, semanticamente, faz toda a diferença. Acho que se você trazer a diferença entre os elementos para a resposta será mais esclarecedor.
    – Woss
    Commented 10/05/2018 às 12:32
  • Legal @AndersonCarlosWoss incluí algumas infos adicionais. Eu entendi que o autor da pergunta queria secionar páginas de conteúdo independente dentro de um página pai. No caso entendi que seri algo como article pai > section com filhos > article para cada filho independente
    – hugocsl
    Commented 10/05/2018 às 13:45

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 .