Taller > HTML
La Etiqueta <div> en HTML
se considera una mala práctica conocida como «Divitis» o «Sopa de Divs». El navegador no sabe qué hay dentro de un div; para él, es solo una caja genérica.
Cuándo NO usar <div>
Antes de escribir un <div>, pregúntate si existe una etiqueta más descriptiva. No lo uses para:
Encabezados principales: Usa <header>.
Navegación: Usa <nav>.
Contenido principal: Usa <main>.
Artículos independientes: Usa <article>.
Secciones temáticas: Usa <section>.
Pies de página: Usa <footer>.
Cuándo SÍ usar <div>
El <div> es la opción correcta cuando no existe un elemento semántico apropiado. Sus casos de uso ideales son:
Contenedores de diseño (Wrappers): Para centrar contenido o crear rejillas.
Agrupación para estilos: Aplicar un borde, fondo o sombra a varios elementos juntos.
Manipulación JS: Crear ganchos para ocultar/mostrar contenido dinámicamente.
Estilizado y Maquetación con CSS
El verdadero poder del <div> se desbloquea con CSS. Al ser un elemento de bloque sin estilos predefinidos (más allá de display: block), es un lienzo en blanco.
Transformación con Flexbox y Grid
Hoy en día, los <div> suelen actuar como padres en sistemas de diseño modernos.
.contenedor-flexible {
display: flex;
justify-content: space-between;
align-items: center;
}
.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
El Clásico: Centrar un Div
Una de las tareas más comunes es centrar un <div> dentro de otro. Aquí tienes la técnica moderna más robusta:
<div class="padre">
<div class="hijo">Estoy centrado</div>
</div>
Lenguaje del código: HTML, XML (xml)
.padre {
display: grid;
place-items: center;
height: 100vh; /* Altura completa de la ventana */
}
.hijo {
background: #f0f0f0;
padding: 2rem;
}
Atributos Globales Esenciales
Aunque <div> no tiene atributos exclusivos, depende en gran medida de los atributos globales para ser útil.
Identificadores y Clases
class: Permite agrupar múltiples divs bajo un mismo estilo. Es reutilizable.
id: Identificador único. Útil para anclas de navegación o selección específica en JavaScript. Debe ser único en todo el documento.
<!-- Uso correcto de clases para componentes repetitivos -->
<div class="tarjeta-producto">...</div>
<div class="tarjeta-producto">...</div>
<!-- Uso de ID para secciones únicas -->
<div id="hero-banner">...</div>
Atributos de Datos (data-*)
Los atributos data-* permiten almacenar información personalizada dentro del HTML, accesible fácilmente por CSS y JavaScript, sin afectar la presentación.
<div class="usuario" data-id="4521" data-rol="admin">
Panel de Administración
</div>
Accesibilidad (A11y) y Roles ARIA
Un error grave es usar <div> para elementos interactivos como botones. Un <div> no es accesible por teclado (no recibe foco con la tecla Tab) y los lectores de pantalla no anuncian que es un elemento interactivo.
El problema del «Botón Div»
Si usas un div como botón, rompes la accesibilidad nativa.
<!-- ❌ INCORRECTO: Inaccesible -->
<div onclick="enviar()">Enviar</div>
<!-- ✅ CORRECTO: Semántico y accesible -->
<button onclick="enviar()">Enviar</button>
Uso de ARIA
Si por una razón de fuerza mayor debes usar un div para algo semántico, debes asignar roles ARIA explícitos, aunque siempre es preferible usar la etiqueta nativa.
<!-- Solo si es estrictamente necesario -->
<div role="button" tabindex="0" aria-label="Cerrar modal">X</div>
El atributo tabindex="0" permite que el elemento reciba foco mediante el teclado, algo que el div no hace por defecto.
Manipulación con JavaScript
El <div> es el objetivo frecuente de la manipulación del DOM (Document Object Model). Podemos crear, eliminar o modificar divs dinámicamente.
Creación Dinámica
Este patrón es fundamental en el desarrollo de Single Page Applications (SPA) o interfaces modernas.
// 1. Crear el elemento
const nuevoDiv = document.createElement('div');
// 2. Asignar clases y contenido
nuevoDiv.classList.add('alerta', 'alerta-exito');
nuevoDiv.textContent = 'Operación realizada correctamente';
// 3. Insertar en el DOM
document.body.appendChild(nuevoDiv);
Lenguaje del código: JavaScript (javascript)
Ejemplo Práctico: Componente «Card» Moderno
A continuación, un ejemplo que combina estructura, semántica interna y clases para crear un componente de interfaz común, demostrando el uso correcto de
como contenedor de agrupación.
<div class="card">
<!-- El div agrupa la imagen para controlar su desbordamiento -->
<div class="card-image">
<img src="paisaje.jpg" alt="Montañas al atardecer">
</div>
<!-- Contenedor para el texto y acciones -->
<div class="card-body">
<h3>Explora el Mundo</h3>
<p>Descubre destinos increíbles con nuestros paquetes.</p>
<button>Ver más</button>
</div>
</div>
.card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
max-width: 300px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card-body {
padding: 16px;
background-color: #fff;
}
Consideraciones de Rendimiento
Aunque un solo <div> tiene un impacto insignificante, el anidamiento excesivo (ejemplo: div > div > div > div) aumenta la profundidad del DOM.
Un DOM excesivamente profundo puede ralentizar el renderizado de la página y afectar el rendimiento de los selectores CSS. Mantén tu estructura lo más plana posible y utiliza CSS Grid o Flexbox para evitar divs «parche» que solo sirven para posicionar elementos.
La Etiqueta <template> en HTML
Product Name
Product Description