Hasta este punto hemos tratado varios ejemplos en los que ha estado presente el elemento div, sin embargo, no hemos hablado de él específicamente.
El elemento div es un contenedor que permitirá en conjunto con los estilos css presentar y organizar el contenido, no es el único tipo de contenedor, pero sí el más utilizado.
Vamos a tomar en consideración que si no aplicamos ningún estilo, no se podrá apreciar absolutamente nada en el navegador. Este tipo de elemento depende totalmente del css para poder organizar correctamente el contenido.
En el siguiente ejemplo vamos a colocar cinco contenedores para hacer un diseño muy típico con header, sección izquierda, sección derecha y un footer. Podrás apreciar que al no tener estilos no vas a notar, absolutamente nada:
Ahora vamos a repetir exactamente el mismo html, pero con estilos css. Este va a ser un layout básico para un sitio web funcional. Se ha agregado diferente color de fondo a cada elemento para que se pueda apreciar correctamente:
El ejemplo que acabas de ver es perfectamente válido en términos de diseño, sin embargo, html ofrece etiquetas semánticas que son la mejor opción para el SEO. Si te preguntas en qué se diferencian, te podemos decir que a nivel de maquetación no se diferencian en nada, pero además del posicionamiento incluso se lee mejor qué es cada sección.
Trataremos con mayor profundidad elementos semánticos en futuras entregas, pero algunas de las etiquetas son:
- header
- nav
- section
- article
- aside
- details
- footer
- summary
- time