Hoy toca hablar de una de las etiquetas más famosas y más utilizadas en HTML: la etiqueta DIV.
Si te preguntara cuál crees que es la etiqueta más usada en todo HTML, probablemente pensarías en ella. Y sí, es probablemente una de las más utilizadas en este lenguaje.
Si estás empezando en HTML, te vas a hinchar a escribir esta etiqueta.
Su uso está tan generalizado que hay personas que solamente utilizan DIVs por todos lados. Pero, ¡ojo! No todo en la vida son DIVs. También hay etiquetas article, span, section y muchas más.
Hoy vamos a descubrir cuándo y cómo utilizar esta etiqueta de manera efectiva
Y antes de meternos de lleno en el tema, recuerda que este post forma parte del diccionario HTML del Blog.
¡Vamos al lío con la etiqueta DIV!
¿Qué es un Div y para qué sirve en HTML?
Vamos a empezar con lo básico: ¿qué significa DIV? Esta palabra proviene de «division», o sea, división (en español).
Pero, ¿qué implica esto en HTML? Básicamente, un DIV es un contenedor genérico de bloque que se utiliza para agrupar elementos.
Es importante saber que esta etiqueta, por sí misma, no tiene ningún significado semántico. Su función principal es ayudarnos a organizar nuestro código HTML de una manera más clara y estructurada.
Ahora, para que lo veas más claro, vamos a saltar al editor y te mostraré un ejemplo práctico.
Ejemplo de cómo usar un Div correctamente
Aquí estamos en el editor, y te traigo un ejemplo sencillo pero revelador. Imagina que estás creando una sección Hero en tu página web, esa parte que es lo primero que ve el usuario al entrar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="hero">
<div class="caja-dentro-hero">
<h1>Título de nuestra Página Web</h1>
<p>Párrafo donde explicamos lo guays y magnificos que somos. Que se nos da todo bien y somos perfectos.</p>
<a href="#">Contactar (Por un módico precio)</a>
</div>
</section>
</body>
</html>Aquí hemos usado un DIV para envolver toda la sección. Dentro de este DIV de Hero, hemos colocado otro DIV para el título, un párrafo y un enlace que funciona como botón. Aquí el DIV actúa como un envoltorio, facilitando la organización y posterior estilización con CSS.
Pero, mucho cuidado, aquí hemos cometido un error intencionado. En lugar de un DIV para la sección Hero, lo ideal sería usar una etiqueta SECTION.
¿Por qué? Porque aporta más riqueza semántica y le dice claramente a los navegadores y buscadores que esto es una sección importante de nuestra página.
¿Cuál es la diferencia entre div y span?
Esta es una pregunta común: ¿cuál es la diferencia entre un DIV y un SPAN? Aunque ambos se usan para agrupar elementos, tienen diferencias fundamentales tanto en diseño como en estructura.
Empecemos con el DIV. Este es un elemento de bloque, lo que significa que ocupa toda la anchura disponible y crea un salto de línea antes y después de él. Es ideal para agrupar grandes bloques de contenido.
Por otro lado, el SPAN es un elemento en línea. No ocupa todo el ancho disponible y se puede colocar dentro de un párrafo sin alterar el flujo del texto. Se utiliza principalmente para aplicar estilos específicos o ejecutar scripts. Estas diferencias no son solo semánticas, sino que también afectan a cómo se visualizan y comportan estos elementos en tu página web.
Y así llegamos al final de nuestro viaje con la etiqueta DIV. Espero que ahora tengas una idea clara de qué es un DIV, cómo y cuándo usarlo, y cómo se diferencia de otras etiquetas como SPAN.
Recuerda, el uso de DIV puede ser un poco ambiguo a veces, así que siempre busca la etiqueta que mejor se ajuste semánticamente a lo que necesitas.
Con la llegada de HTML5, tienes muchas opciones como HEADER, FOOTER, ARTICLE, SECTION y muchas más.
Si te queda alguna duda o quieres saber más sobre alguna etiqueta en particular, déjamelo saber en los comentarios. Estaré encantado de ayudarte.
Nos vemos en la próxima lección. ¡Adiós!