Cuando HTML5 apareció en escena hace algunos años, añadió un montón de nuevos elementos de sección al lenguaje, incluyendo el elemento SECTION. La mayoría de los nuevos elementos que introduce HTML5 tienen usos claros. Por ejemplo, el elemento se utiliza para definir s y partes principales de una página web, el elemento se utiliza para definir contenido relacionado que no es crítico para el resto de la página, y el encabezado, la navegación y el pie de página son bastante autoexplicativos. Sin embargo, el nuevo elemento SECTION añadido es un poco menos claro.
Mucha gente cree que los elementos HTML de la SECCIÓN y son realmente los mismos elementos genéricos del contenedor utilizados para contener contenido en una página web. La realidad, sin embargo, es que estos dos elementos, aunque ambos son elementos de contenedor, son cualquier cosa menos genéricos. Hay razones específicas para usar tanto el elemento SECTION como el elemento DIV – y esto explicará esas diferencias.
Índice de contenidos
Secciones y Divisiones
El elemento SECTION se define como una sección semántica de una página web o sitio que no es otro tipo más específico (como o aparte). Tiendo a usar este elemento cuando estoy marcando una sección distinta de la página – una sección que podría ser movida al por mayor y usada en otras páginas o partes del sitio. Es un contenido distinto, o una «sección» de contenido, si se quiere.
Por el contrario, se utiliza el elemento DIV para las partes de la página que se desean dividir, pero con fines distintos de la semántica. Envolvería un área de contenido en una división si lo estoy haciendo simplemente para darme un «gancho» para usar con CSS. Puede que no sea una sección distinta de contenido basada en la semántica, pero es algo que estoy dictando para lograr el diseño que quiero para mi página.
Todo se trata de semántica
Este es un concepto difícil de entender, pero la única diferencia entre el elemento DIV y el elemento SECTION es la semántica. En otras palabras, es el significado de la sección de código que estás dividiendo.
Cualquier contenido que se encuentre dentro de un elemento DIV no tiene ningún significado inherente. Es mejor usarla para cosas como:
- Estilos CSS y ganchos para estilos CSS
- Diseño de contenedores
- Ganchos JavaScript
- Divisiones para el HTML para que sea más fácil de leer
El elemento DIV solía ser el único elemento que teníamos para añadir ganchos para dar estilo a nuestros documentos y crear columnas y diseños elegantes. Por eso, terminamos con HTML que estaba plagado de elementos DIV, lo que los diseñadores web llaman «divitis». Incluso había editores WYSIWYG que utilizaban exclusivamente el elemento DIV. En realidad me he encontrado con HTML que utiliza el elemento DIV en lugar de para los párrafos!
Con HTML5, podemos empezar a utilizar elementos de sección para crear documentos más semánticamente descriptivos (utilizando para la navegación y para figuras descriptivas, etc.) y también definir los estilos de esos elementos.
¿Qué pasa con el elemento SPAN?
El otro elemento en el que la mayoría de la gente piensa cuando piensa en el elemento DIV es el elemento. Este elemento, al igual que el DIV, no es un elemento semántico. Es un elemento en línea que puede utilizar para añadir ganchos para estilos y scripts alrededor de bloques de contenido en línea (normalmente texto). En ese sentido es exactamente igual que el elemento DIV, sólo que en línea en lugar de un elemento de bloque. De alguna manera, podría ser más fácil pensar en el DIV como un elemento SPAN a nivel de bloque y usarlo de la misma manera que SPAN sólo para bloques enteros de contenido HTML.
No hay ningún elemento de seccionamiento en línea comparable en HTML5.
Para versiones anteriores de Internet Explorer
Incluso si usted está soportando versiones dramáticamente más antiguas de IE (como IE 8 e inferiores) que no reconocen de forma fiable HTML5, no debería tener miedo de usar etiquetas HTML semánticamente correctas. La semántica te ayudará a ti y a tu equipo a gestionar la página en el futuro (porque sabrás que esa sección es la que está rodeada por el elemento). Además, los navegadores que reconocen esas etiquetas las soportarán mejor.
Todavía puede utilizar elementos de sección semántica HTML5 con Internet Explorer, sólo tiene que añadir scripts y posiblemente algunos elementos DIV circundantes para conseguir que reconozcan las etiquetas como HTML.
Uso de los elementos DIV y SECTION
Si los está utilizando correctamente, puede utilizar los elementos DIV y SECTION juntos en un documento HTML5 válido. Como has visto aquí en esto, usas el elemento SECTION para definir porciones semánticamente discretas del contenido, y usas el elemento DIV como gancho para CSS y JavaScript, así como para definir un diseño que no tiene un significado semántico.
Original de Jennifer Krynin. Editado por Jeremy Girard el 15/3/17
