Cover Image

¿Qué es la etiqueta <div> en HTML y para qué sirve?
Marzo 10, 2025 - Tiempo de lectura: 9 minutos

Si estás empezando con HTML y CSS, seguramente ya te cruzaste con la etiqueta <div>. Aunque al principio parezca que no hace nada, la verdad es que es uno de los elementos más usados en diseño web.

En este artículo te explico qué es un <div>, cómo se usa, y por qué es tan importante cuando se trata de estructurar tu sitio web.

🧱 ¿Qué es un <div>?

La palabra "div" viene de "division". En términos simples, un <div> es un contenedor genérico que te permite agrupar elementos HTML.

No tiene estilo propio ni significado semántico. Pero te da el control para aplicar estilos, scripts, organizar contenido y crear estructuras personalizadas.

🔧 ¿Cómo se usa?

Aquí tienes un ejemplo básico:

<div> <h1>Bienvenido</h1> <p>Este es mi sitio web.</p> </div>

Esto simplemente agrupa el título y el párrafo dentro de un bloque. A simple vista, no pasa nada… ¡hasta que le agregas CSS!

🎨 Aplicando estilo con CSS

<div style="background-color: lightblue; padding: 20px;"> <h2>Hola Mundo</h2> <p>Este texto está dentro de un div con fondo azul claro.</p> </div>

El <div> no se ve si no le pones estilo, pero en cuanto le agregas color, márgenes o bordes, empieza a cumplir su función como contenedor visual.

🔄 ¿Por qué es útil?

  • Organiza contenido: puedes agrupar secciones de la página (como encabezado, menú, pie de página, etc.).

  • Aplicar estilos de forma eficiente: en vez de aplicar estilo a cada elemento por separado, lo haces al div.

  • Manipular con JavaScript: puedes usar div como objetivo de interacciones dinámicas.

🧠 ¿Cuándo usar <div> y cuándo no?

Usa <div> cuando no haya una etiqueta semántica más específica. Por ejemplo:

✅ Correcto:

<div class="galeria"> <img src="1.jpg"> <img src="2.jpg"> </div>

❌ Evita usarlo así:

<div><strong>Nombre:</strong></div> <div><span>Juan</span></div>

Mejor usar etiquetas como <p>, <section>, <article>, <header>, etc., cuando apliquen.

Categories