Cuando HTML5 irrumpe en la escena hace varios años, se añadieron al langauge un montón de nuevos elementos de sección, incluido elSECCIÓN elemento. La mayoría de los nuevos elementos que introduce HTML5 tienen usos claros. Por ejemplo, el elemento se usa para definir artículos y partes principales de una página web, el elemento se usa 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 se explican por sí mismos. El recién agregadoSECCIÓN El elemento, sin embargo, es un poco menos claro.
Mucha gente cree que los elementos HTML SECCIÓN y en realidad son exactamente lo mismo: elementos genéricos de contenedor utilizados para contener contenido en una página web. La realidad, sin embargo, es que estos dos elementos, mientras que ambos son elementos contenedores, son todo menos genéricos. Hay razones específicas para usar tanto la SECCIÓN elemento y el Div Elemento - y este artículo explicará esas diferencias.
Secciones y divs
los SECCIÓN elemento 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 artículo o aparte). Tiendo a usar este elemento cuando estoy marcando una sección distinta de la página, una sección que se podría mover y usar en otras páginas o partes del sitio. Es una pieza de contenido distinta, o una "sección" de contenido, por así decirlo.
En contraste, usas el Div Elemento para las partes de la página que desea dividir, pero para fines distintos de la semántica. Envolvería un área de contenido en una división si lo hago simplemente para darme un "gancho" para usar con CSS. Puede que no sea una sección distinta de contenido basado en semántica, pero es algo que estoy dictando para lograr el diseño que quiero para mi página.
Se trata de la semántica
Este es un concepto difícil de entender, pero la única diferencia entre los Div elemento y el SECCIÓN El elemento es semántica. En otras palabras, es el sentido de la sección de código que estás dividiendo.
Cualquier contenido que esté contenido dentro de un Div El elemento no tiene ningún significado inherente. Es mejor usarlo para cosas como:
- Estilos CSS y ganchos para estilos CSS
- Contenedores de diseño
- Ganchos de JavaScript
- Divisiones para el HTML para que sea más fácil de leer.
los Div El elemento solía ser el único elemento que teníamos para agregar ganchos para dar estilo a nuestros documentos y crear columnas y diseños elegantes. Debido a eso, terminamos con HTML que estaba plagado de Div elementos: lo que los diseñadores web pueden llamar "divitis". Incluso hubo editores WYSIWYG que utilizaron el Div Elemento exclusivamente. De hecho, me he encontrado con HTML que utiliza el Div ¡Elemento en lugar de párrafos!
Con HTML5, podemos comenzar a usar elementos de sección para crear más documentos semánticamente descriptivos (usando 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 que la mayoría de la gente piensa cuando piensa en el Div El elemento es el elemento. Este elemento, como Div, no es un elemento semántico. Es un elemento en línea que puede usar para agregar ganchos para estilos y scripts alrededor de bloques de contenido en línea (generalmente texto). En ese sentido es exactamente como el Div Elemento, solo 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 bloque de nivel LAPSO Elemento y usarlo de la misma manera que lo haría LAPSO Solo para bloques enteros de contenido HTML.
No hay ningún elemento de corte en línea comparable en HTML5.
Para versiones anteriores de Internet Explorer
Incluso si admite versiones mucho más antiguas de IE (como IE 8 y versiones inferiores) que no reconocen de forma fiable HTML5, no debe tener miedo de usar etiquetas HTML semánticamente correctas. La semántica lo ayudará a usted y a su equipo a administrar la página en el futuro (porque sabrá que esa sección es el artículo si está rodeado por la ARTÍCULO elemento). Además, los navegadores que reconocen esas etiquetas los soportarán mejor.
Aún puede usar elementos de sección semántica de HTML5 con Internet Explorer, solo necesita agregar secuencias de comandos y posiblemente algunos elementos circundantes. Div Elementos para que reconozcan las etiquetas como HTML.
Usando los elementos DIV y SECTION
Si los está usando correctamente, puede usar ambos Div y SECCIÓN elementos juntos en un documento válido de HTML5. Como has visto aquí en este artículo, usas el SECCIÓN elemento para definir partes semánticamente discretas del contenido, y utiliza el Div elemento como ganchos para CSS y JavaScript, así como definición de diseño que no tiene un significado semántico.
Artículo original de Jennifer Krynin. Editado por Jeremy Girard el 15/03/17
