Div, Span, Clases e Identificadores (ID)
Aprende a agrupar contenido con <div> y <span>, y a conectar tu diseño y lógica con clases reutilizables e IDs únicos.
Contenedores Genéricos: <div> y <span>
HTML provee dos etiquetas sin significado semántico intrínseco, pensadas específicamente para agrupar elementos y aplicarles estilos CSS o manipularlos con JavaScript:
<div>(División): Contenedor genérico a nivel de bloque. Agrupa múltiples elementos (párrafos, títulos, imágenes) para crear tarjetas, columnas o paneles.<span>: Contenedor genérico en línea. Se utiliza para envolver una frase, una sola palabra o un icono dentro de un texto continuo sin romper el renglón.
Clases (class) vs Identificadores (id)
| Característica | El Atributo class | El Atributo id |
|---|---|---|
| Unicidad | Reutilizable: múltiples elementos pueden compartir exactamente la misma clase. | Estrictamente único: solo puede existir un elemento con ese id específico en todo el documento. |
| Múltiples valores | Permite múltiples clases separadas por espacios: class="boton primario grande". |
Solo admite un único valor alfanumérico: id="menu-principal". |
| Selector en CSS | Punto (.boton) |
Almohadilla o numeral (#menu-principal) |
| Uso en JavaScript | document.querySelectorAll('.clase') |
document.getElementById('mi-id') |
| Navegación | No sirve como ancla directa. | Sirve como ancla de enlace con href="#mi-id". |
⚡ Maquetación con Divs, Clases y Spans
Observa cómo las clases permiten reutilizar estilos de tarjeta, y los span destacan palabras clave dentro de un párrafo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Divs, Spans, Clases e IDs</title>
<style>
body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
/* Regla reutilizable para todas las tarjetas */
.tarjeta-curso {
background: white;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
max-width: 480px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Regla para el elemento con ID específico */
#curso-destacado {
border-left: 5px solid #6366f1;
background: #faf5ff;
}
/* Estilos para spans en línea */
.badge-tecnologia {
background: #e0e7ff;
color: #4338ca;
font-size: 0.75rem;
font-weight: bold;
padding: 3px 8px;
border-radius: 4px;
}
.texto-precio {
color: #059669;
font-weight: bold;
font-size: 1.1rem;
}
</style>
</head>
<body>
<!-- Tarjeta con ID único y clase compartida -->
<div id="curso-destacado" class="tarjeta-curso">
<span class="badge-tecnologia">RECOMENDADO</span>
<h3 style="margin: 8px 0;">Desarrollo Web Fullstack</h3>
<p>
Aprende a maquetar con <span style="color: #e34f26; font-weight: bold;">HTML5</span> y diseñar con <span style="color: #2563eb; font-weight: bold;">CSS3</span>.
</p>
<span class="texto-precio">Gratis con Kilopolis</span>
</div>
<!-- Tarjeta regular usando la misma clase -->
<div class="tarjeta-curso">
<span class="badge-tecnologia">BÁSICO</span>
<h3 style="margin: 8px 0;">Algoritmos y Lógica</h3>
<p>Comprende la resolución sistemática de problemas antes de codificar.</p>
<span class="texto-precio">Disponible</span>
</div>
</body>
</html>¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?
Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.
🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.