Comentario: HTML5 trae una serie de nuevos elementos, los siguientes dos elementos nuevos: el artículo y la sección son bastante confusos. A menudo mencionamos qué circunstancias debemos usar estos elementos. A continuación, presentaremos las aplicaciones de los dos. Los interesados pueden referirse a él.
HTML5 trae una serie de nuevos elementos y se utilizará ampliamente en el futuro. Sin embargo, algunos elementos se confunden fácilmente cuando se usan, incluidos los siguientes dos elementos nuevos: <Artículo> y <Sección>.
La pregunta más común es: ¿En qué circunstancias debemos usar estos elementos? ¿Y cómo debemos usar estos elementos correctamente?
Elemento de sección
Este es el elemento más ambiguo. ¿Cuál es la diferencia entre él y el elemento <div>? Hemos estado usando <iv> para dividir los párrafos, así que a excepción de <div>, ¿cuándo usamos este elemento? Citamos la documentación oficial para ilustrarla. Según la documentación de WhatWG, se hace la siguiente descripción para el elemento <section>:
<section> Element representa un párrafo común en un documento o aplicación - Whatwg
A partir de la descripción, podemos ver que la función del elemento <section> es la segmentación, más o menos similar a <div>. Pero todavía tiene un caso especial. En el documento, se agrega una declaración especial:
Cuando un elemento se usa solo para el estilo o para la comodidad de secuencias de comandos, alentamos a los autores a usar <Viv>. El elemento <section> es adecuado para cuando el contenido del elemento necesita ser enumerado explícitamente. - whatwg
Según este punto, podemos resumir los siguientes dos puntos:
Primero, aunque los elementos de sección son técnicamente de estilo, aún recomendamos usar elementos DIV cuando hay estilos o scripts complejos.
En segundo lugar, similar al elemento <li>, el elemento de sección se usa para enumerar el contenido.
Entonces, en un ejemplo realista, la razón para usar el elemento <section> es estructurar el contenido del blog, el código es el siguiente:
<div>
<Sección>
<h2> Título de la publicación de blog </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O. </p>
</section>
<Sección>
<h2> Título de la publicación de blog </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O. </p>
</section>
<Sección>
<h2> Título de la publicación de blog </h2>
<p> Ice Cream Tart Powder Jelly-O.
Gummies Chocolate Cake Ice Cream Cookie Halvah Tiramisu Jelly-O. </p>
</section>
</div>
Este es solo un ejemplo, y el elemento <section> también se puede usar para otros fines.
Elemento de artículo
Del nombre, ya se ha interpretado bien, pero aún tenemos que ver cómo se describe en la documentación oficial:
Una sección separada en un documento, página, aplicación o sitio y, en general, se puede asignar o reutilizar de forma independiente, por ejemplo, en la publicación. Esta puede ser una publicación en el foro, revista o noticias, entradas de blog, comentarios enviados por el usuario, widgets o widgets interactivos, o contenido para cualquier otro proyecto independiente.
De la descripción anterior, podemos resumir que el elemento <artículo> está dedicado a artículos estructurados, especialmente aquellos que queremos publicar, como blogs, contenido de página o publicaciones de foro.
El siguiente ejemplo muestra cómo construir una publicación de blog usando <ATITA>.
<Artículo>
<Header>
<h1> Este es el título de la publicación de blog </h1>
<div>
<ul>
<li> Nombre del autor </li>
<li> Guardar en categorías </li>
</ul>
</div>
</Header>
<div>
Sweet Roll Halvah Biscuit Toffee Retoriz Tart Pudding Sesame Snaps.
Polvo de galletas Jelly-O Fruitcake Faworki Chocolate Bar. Avena de pudín
Cake Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gomitas
Halvah Gummies Danish Biscuit Aplicar pastel de jalea de pan de jengibre.
</div>
</artículo>
Además, el elemento <artículo> también se puede combinar con el elemento de sección. Cuando sea necesario, puede usar el elemento <Section> para dividir el artículo en varios párrafos, como se muestra en el siguiente ejemplo.
<Artículo>
<Header>
<h1> Este es el título de la publicación de blog </h1>
<div>
<ul>
<li> Nombre del autor </li>
<li> Guardar en categorías </li>
</ul>
</div>
</Header>
<div>
<Sección>
<h2> Este es el subtallado </h2>
Sweet Roll Halvah Biscuit Toffee Retoriz Tart Pudding Sesame Snaps.
Polvo de galletas Jelly-O Fruitcake Faworki Chocolate Bar. Pastel de avena de pudín
Tootsie Roll Sesame Snaps Lollipop Gingerbread Bonbon. Gommies halvah
Gummies Biscuit danés aplican pasteles de jalea de pan de jengibre.
</section>
<Sección>
<h3> Este es otro subtalling </h3>
Tachada de queso pastel de pastel dulce pastel de zanahoria rollo dulce. Gummi Bears Gotas de limón
Toffee Sesame Snaps Tarta Topping Chupa Chups Gomme de pastel de manzana. Chocolate de obleas
pastel. Barra de chocolate de ciruela de azúcar para cubrir pastel de zanahoria de zanahoria bonbón danés.
Tarta de queso gummi osos dragée jujubes dragée dragée brownie jelly biscuit. Pastelería de jelly de croissant en polvo.
</section>
</div>
</artículo>
Resumir
Según lo predicho por el fundador de la World Wide Web y los directores de W3C, todos los nuevos elementos creados por HTML5 tienen el propósito de hacer que la estructura de la red sea más semántica. Todavía existe un debate entre los desarrolladores web y los diseñadores sobre cómo aplicar correctamente estos elementos.
Pase lo que pase, no confunda el punto de vista. Como mencioné antes, siempre que sea una situación razonable y verá que usarla hace que la estructura sea significativa, úsela.