ou , que está contido em que

StackOverflow https://stackoverflow.com/questions/1789692

  •  22-09-2019
  •  | 
  •  

Pergunta

Tentando entender os novos elementos semânticos no HTML5.

Faz um <section> pertencem dentro de um <article> Ou é o contrário? Isso importa?

Estou procurando reestruturar um blog WordPress.

Foi útil?

Solução

De HTML5 Spec:

o section O elemento representa uma seção de documentos ou aplicativos genéricos. Uma seção, neste contexto, é um agrupamento temático de conteúdo, normalmente com um cabeçalho e possivelmente um rodapé.

e

o article O elemento representa uma seção independente de um documento, página ou site. Este pode ser um post do fórum, um artigo de revista ou jornal, uma entrada no blog, um comentário substituído pelo usuário ou qualquer outro item independente de conteúdo.

Então eu diria ambos section e article Os elementos podem conter o outro elemento, se apropriado. Eu acho que seu diagrama faz sentido, além dos elementos da seção aninhada:

O elemento de seção não é um elemento genérico de contêiner. Quando um elemento é necessário para fins de estilo ou como uma conveniência para scripts, os autores são incentivados a usar o elemento div. Uma regra geral é que o elemento da seção é apropriado apenas se o conteúdo do elemento for listado explicitamente no esboço do documento.

Talvez use um <div> para o externo?

Outras dicas

No Página W3 Wiki sobre estruturar HTML5, diz:

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

E depois exibe uma imagem que eu limpei:

enter image description here

Também é importante saber como usar o <article> tag (do mesmo link W3 acima):

<article> está relacionado a <section>, mas é distintamente diferente. Enquanto <section> é para agrupar seções distintas de conteúdo ou funcionalidade, <article> é para conter peças independentes de conteúdo individuais relacionadas, como postagens individuais de blog, vídeos, imagens ou itens de notícias. Pense dessa maneira - se você tiver vários itens de conteúdo, cada um dos quais seria adequado para ler por conta própria, e faria sentido para sindicicar como itens separados em um feed RSS, então <article> é adequado para marcá -los.

Em nosso exemplo, <section id="main"> contém entradas de blog. Cada entrada do blog seria adequada para sindicação como um item em um feed RSS e faria sentido quando lida por conta própria, fora de contexto, portanto <article> é perfeito para eles:

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

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

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

Simples hein? Esteja ciente, porém, que você também pode aninhar as seções dentro dos 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á colocar seções dentro de seus artigos. Pode parecer algo assim:

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

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

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

Eu usaria o div para o externo e o div para o interno, a menos que você tenha um cabeçalho diretamente dentro da seção interna.

Ta

Rico

Ver http://html5doctor.com/the-section-element/ para mais informações.

IMOO, deve ser simples, tão simples quanto o que as pessoas normais o considerarão como garantidas. Se um nome simples de tag confunde pessoas, é uma falha. Para mim:

  • Um <article> é um artigo. As pessoas compartilham artigos. Quando você diz que algo é um artigo, espero que ele tenha um título, e talvez um pouco de resumo também, para que eu possa decidir lê -lo ou não. Se for interessante, vou compartilhar com meus amigos. É independente.

  • UMA <section> é uma seção. Isso é separado de coisas relacionadas. Basicamente, você precisará de outras seções para obter o quadro inteiro.

Por que você coloca um <section> dentro de <body>? Oh porque faz parte do corpo; parte do meu site. Vou colocar meus artigos dentro desta parte.

Por que você coloca um <section> dentro de a <section>? Porque faz parte de este seção.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top