Explicación detallada de las diferencias entre DIV, sección y artículo en HTML5

Este artículo presenta principalmente los detalles de la diferencia entre DIV, sección y artículo en HTML5. Se cita de W3C y se enumera con ejemplos de código. Los amigos que lo necesitan pueden referirse a él.

Cuando comencé a entrar en contacto con HTML5, me sentí muy incómodo con sus etiquetas e incluso me sentí un poco disgustado en un momento. Especialmente para div, sección, etiquetas de artículo, realmente no puedo entender qué ocasiones usar.

Especificación HTML:

El elemento div no tiene un significado especial en absoluto.

Esta etiqueta es la etiqueta más utilizada que vemos y usamos más. No tiene semántica en sí, y se usa como un gancho para el diseño y el estilo o las secuencias de comandos.

Especificación HTML: el elemento de sección representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, típicamente con un encabezado.

En contraste con la semántica de Div, la sección simplemente es un DIV con semántica, pero no piense que es realmente tan simple. La sección representa una sección de contenido tópico, generalmente con un título. Después de ver esto, ¿podemos pensar que no sería una publicación de blog o un comentario separado para usar la sección? Siguiente mirada:

Se alienta a los autores a usar el elemento del artículo en lugar del elemento de sección cuando tendría sentido sindicar el contenido del elemento.

Cuando el contenido de los elementos es más interesante, el artículo debe usarse para reemplazar la sección.

Entonces, ¿cuándo se debe usar la sección? Sigamos viendo:

Ejemplos de secciones serían capítulos, las diversas páginas con pestañas en un cuadro de diálogo con pestañas o las secciones numeradas de una tesis. La página de inicio de un sitio web podría dividirse en secciones para una introducción, noticias e información de contacto.

Los escenarios típicos para la aplicación de la sección incluyen capítulos de artículos, páginas de pestañas en cuadros de diálogo de etiquetas o piezas numeradas en documentos. La página de inicio de un sitio web se puede dividir en varias partes, como la introducción, las noticias y la información de contacto. En realidad, estoy muy interesado en transmitir la información aquí, porque siento que la sección y la artilce que se introducirán a continuación son más adecuadas para aplicaciones modulares. Este tema se discutirá en el futuro, y lo saltaré aquí por ahora.

Tenga en cuenta que W3C también advierte:

El elemento de sección no es un elemento de contenedor genérico. Cuando se necesita un elemento para fines de estilo o como conveniencia para las secuencias de comandos, se alienta a los autores a usar el elemento DIV. Una regla general es que el elemento de sección es apropiado solo si el contenido del elemento se enumeraría explícitamente en el esquema del documento.

La sección es más que una etiqueta de contenedor normal. Cuando una etiqueta es solo para estilo o fácil de usar en scripts, Div debe usarse. En términos generales, la sección se aplica cuando el contenido del elemento aparece explícitamente en el esquema del documento.