Comentário: HTML5 traz uma série de novos elementos, os dois novos elementos a seguir: Artigo e seção são bastante confusos. Muitas vezes mencionamos que circunstâncias devemos usar esses elementos. Em seguida, apresentaremos as aplicações dos dois. Aqueles que estão interessados podem se referir a ele.
O HTML5 traz uma série de novos elementos e será amplamente utilizado no futuro. No entanto, alguns elementos são facilmente confundidos quando usados, incluindo os dois novos elementos a seguir: <Artigo> e <Section>.
A pergunta mais comum é: em que circunstâncias devemos usar esses elementos? E como devemos usar esses elementos corretamente?
Elemento da seção
Este é o elemento mais ambíguo. Qual é a diferença entre ele e o elemento <div>? Temos usado <div> para dividir os parágrafos, então, exceto <div>, quando usamos esse elemento? Citamos documentação oficial para ilustrá -la. De acordo com a documentação Whatwg, a seguinte descrição é feita para o elemento <Section>:
<Section> elemento representa um parágrafo comum em um documento ou aplicativo - Whatwg
A partir da descrição, podemos ver que a função do elemento <Section> é a segmentação, mais ou menos semelhante a <div>. Mas ainda tem um caso especial. No documento, uma declaração especial é adicionada:
Quando um elemento é usado apenas para o estilo ou para a conveniência de script, incentivamos os autores a usar <div>. O elemento <Section> é adequado para quando o conteúdo do elemento precisa ser listado explicitamente. - Whatwg
Com base neste ponto, podemos resumir os dois pontos a seguir:
Primeiro, embora os elementos da seção estejam tecnicamente estilizados, ainda recomendamos o uso de elementos DIV quando houver estilos ou scripts complexos.
Segundo, semelhante ao elemento <li>, o elemento de seção é usado para enumerar o conteúdo.
Portanto, em um exemplo realista, o motivo do uso do elemento <Section> é estruturar o conteúdo do blog, o código é o seguinte:
<div>
<Section>
<H2> Título da postagem do blog </h2>
<p> sorvete torta em pó geléia-o.
Gummies Chocolate Cake Cream Cookie Halvah Tiramisu Jelly-O. </p>
</seção>
<Section>
<H2> Título da postagem do blog </h2>
<p> sorvete torta em pó geléia-o.
Gummies Chocolate Cake Cream Cookie Halvah Tiramisu Jelly-O. </p>
</seção>
<Section>
<H2> Título da postagem do blog </h2>
<p> sorvete torta em pó geléia-o.
Gummies Chocolate Cake Cream Cookie Halvah Tiramisu Jelly-O. </p>
</seção>
</div>
Este é apenas um exemplo, e o elemento <Section> também pode ser usado para outros fins.
Elementos do artigo
Pelo nome, ele já se interpretou bem, mas ainda temos que ver como é descrito na documentação oficial:
Uma seção separada em um documento, página, aplicativo ou site e, geralmente, pode ser alocada ou reutilizada independentemente, por exemplo, na publicação. Este pode ser um post, revista ou notícias do fórum, entradas de blog, comentários submitidos pelo usuário, widgets ou widgets interativos ou conteúdo para qualquer outro projeto independente.
A partir da descrição acima, podemos resumir que o elemento <Artigo> é dedicado a artigos estruturados, especialmente aqueles que queremos publicar, como blogs, conteúdo de página ou postagens do fórum.
O exemplo a seguir mostra como criar uma postagem no blog usando <Artigo>.
<Artigo>
<header>
<H1> Este é o título da postagem do blog </h1>
<div>
<ul>
<li> Nome do autor </li>
<li> Salvar em categorias </li>
</ul>
</div>
</header>
<div>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart Pudding Sesame Snaps.
Biscuit Powder Jelly-O Fruitcake Faworki Barra de chocolate. Pudim aveia
Bolo Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gummies
Halvah Gummies Biscoito dinamarquês Aplica a massa de jelly-o de gengibre.
</div>
</artigo>
Além disso, o elemento <Artigo> também pode ser combinado com o elemento de seção. Quando necessário, você pode usar o elemento <Section> para dividir o artigo em vários parágrafos, conforme mostrado no exemplo a seguir.
<Artigo>
<header>
<H1> Este é o título da postagem do blog </h1>
<div>
<ul>
<li> Nome do autor </li>
<li> Salvar em categorias </li>
</ul>
</div>
</header>
<div>
<Section>
<H2> Esta é a sub-título </h2>
Sweet Roll Halvah Biscuit Toffee Liquorice Tart Pudding Sesame Snaps.
Biscuit Powder Jelly-O Fruitcake Faworki Barra de chocolate. Bolo de aveia de pudim
Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gummies Halvah
Os gomas dinamarquês Biscuit aplicam a pastelaria Jelly-O.
</seção>
<Section>
<H3> Este é outro sub-título </h3>
Topping Cheesecake Sweet Pie Cenout Cake Roll Sweet Roll. Gummi urso gotas de limão
Toffee Sesame Snaps Tart Topping chupa chups gummies de torta de maçã. Chocolate de bolacha
bolo. Sugar Plum Chocolate Barpping Sce Cream Carrot Cake Bonbon.
Cheesecake gummi urso dragée jujubes dragée dragée brownie geléia biscoito. Postral de jujubas croissant em pó.
</seção>
</div>
</artigo>
Resumir
Conforme previsto pelo fundador da World Wide Web e pelos diretores do W3C, todos os novos elementos criados pelo HTML5 têm o objetivo de tornar a estrutura da rede mais semântica. Ainda há debate entre desenvolvedores e designers da Web como aplicar corretamente esses elementos.
Não importa o quê, não confunda o ponto de vista. Como mencionei antes, desde que seja uma situação razoável e você veja que o uso da estrutura torna a estrutura significativa, use -a.