El elemento SECTION se define como una sección semántica de una página web o sitio que no es de otro tipo más específico como ARTICLE o ASIDE. Los diseñadores utilizan con frecuencia este elemento al marcar una sección distinta de la página, una sección completa que podría moverse y usarse en otras páginas o partes del sitio. Es una pieza de contenido distinta.
Por el contrario, el elemento DIV es apropiado para partes de la página que desea dividir para fines distintos a semántica. Por ejemplo, puede envolver algún contenido en un DIV para darle un "gancho" al estilo con CSS. Puede que no sea una sección de contenido distinta semánticamente, pero está separada para que pueda lograr el diseño o la sensación deseados.
Se trata de semántica
La única diferencia entre los elementos DIV y SECTION es la semántica: la significado del contenido que estás dividiendo.
Cualquier contenido incluido en un elemento DIV no tiene un significado inherente. Se usa mejor para cosas como:
- Estilos CSS y ganchos para estilos CSS
- Contenedores de diseño
- Ganchos de JavaScript
- Divisiones que facilitan la lectura del contenido o HTML
El elemento DIV solía ser el único elemento disponible para agregar ganchos a los documentos y diseños de estilo. Antes de HTML5, la página web típica estaba plagada de elementos DIV. De hecho, algunos editores WYSIWYG utilizaron el elemento DIV exclusivamente, a veces en lugar de párrafos.
HTML5 introdujo elementos de seccionamiento que crearon documentos más semánticamente descriptivos y ayudaron a definir estilos en esos elementos.
¿Qué pasa con el elemento SPAN?
Otro elemento no semántico común es SPAN. Es usado en línea para agregar ganchos para estilos y scripts alrededor de bloques de contenido (generalmente texto). En ese sentido, es exactamente como el DIV, pero no es un elemento de bloque. Piense en el DIV como un SPAN a nivel de bloque y utilícelo de la misma manera, pero para bloques completos de contenido HTML.
HTML no tiene ningún elemento de sección en línea comparable.
Para versiones anteriores de Internet Explorer
Incluso si admite versiones dramáticamente más antiguas de Internet Explorer de Microsoft que no reconocen HTML5 de manera confiable, debe usar etiquetas HTML semánticamente correctas. La semántica le ayudará a usted y a su equipo a administrar la página en el futuro. Las últimas versiones de Internet Explorer, así como su reemplazo, Microsoft Edge, reconocen HTML5.
Uso de elementos DIV y SECTION
Puede utilizar los elementos DIV y SECTION juntos en un documento HTML5 válido, SECTION, para definir porciones semánticamente discretas del contenido, y DIV, para definir ganchos para CSS, JavaScript y diseño propósitos.
Artículo original de Jennifer Krynin. Editado por Jeremy Girard el 15/03/17.