Ejercicio práctico 16: Divisiones y span
Aprende a utilizar las etiquetas <div> y <span> en HTML para estructurar y estilizar tu contenido web. Este ejercicio práctico te enseña cómo aplicar divisiones de bloque e inline de forma efectiva en tus páginas.
Actividad
Usa las etiquetas <div> y <span> para organizar y dar estilo a tu contenido.
Solución interactiva
Solución con el código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Div y Span</title>
<style>
.contenedor {
background-color: #f0f0f0;
padding: 20px;
}
.texto-destacado {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="contenedor">
<p>
Este es un párrafo dentro de un
<span class="texto-destacado">div</span> contenedor.
</p>
</div>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Layout de cards con <div>
Los <div> son perfectos para crear tarjetas de contenido. Combinados con CSS, te permiten armar grillas de cards organizadas visualmente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Cards con Div</title>
<style>
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
width: 250px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card img {
width: 100%;
border-radius: 8px;
margin-bottom: 12px;
}
.card h3 {
margin: 0 0 8px;
font-size: 18px;
}
.card .precio {
color: #28a745;
font-weight: bold;
font-size: 22px;
}
.card .precio span {
font-size: 14px;
color: #666;
font-weight: normal;
}
.card .stock {
color: #dc3545;
font-size: 13px;
}
.card button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Productos Destacados</h1>
<div class="cards">
<div class="card">
<img src="https://via.placeholder.com/250x150?text=Notebook" alt="Notebook" />
<h3>Notebook Pro</h3>
<p class="precio">$1299 <span>USD</span></p>
<p>Procesador i7, 16GB RAM, SSD 512GB</p>
<p class="stock">✅ En stock</p>
<button>Agregar al carrito</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/250x150?text=Monitor" alt="Monitor" />
<h3>Monitor 27" 4K</h3>
<p class="precio">$499 <span>USD</span></p>
<p>Resolución 3840x2160, IPS, HDR</p>
<p class="stock">⚠️ Pocas unidades</p>
<button>Agregar al carrito</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/250x150?text=Teclado" alt="Teclado" />
<h3>Teclado Mecánico</h3>
<p class="precio">$89 <span>USD</span></p>
<p>Switches Cherry MX, RGB, USB-C</p>
<p class="stock">✅ En stock</p>
<button>Agregar al carrito</button>
</div>
</div>
</body>
</html>
Cada <div class="card"> agrupa los elementos de un producto: imagen, nombre, precio y botón. El <div class="cards"> externo organiza las cards en fila usando display: flex.
Variante 2: <span> para estilizar palabras y frases inline
Mientras <div> es bloque (ocupa todo el ancho), <span> es inline (solo ocupa el espacio de su contenido). Es ideal para resaltar palabras, cambiar colores en medio de un texto o aplicar estilos puntuales.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Span Inline</title>
<style>
body {
font-family: Georgia, serif;
line-height: 1.8;
max-width: 700px;
margin: 40px auto;
padding: 0 20px;
}
.highlight {
background: #fff3cd;
padding: 2px 6px;
border-radius: 3px;
}
.keyword {
color: #007bff;
font-weight: bold;
}
.strikethrough {
text-decoration: line-through;
color: #999;
}
.new-price {
color: #28a745;
font-size: 1.3em;
font-weight: bold;
}
.code-inline {
background: #2d2d2d;
color: #f8f8f2;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>Oferta Especial de Cursos</h1>
<p>
Aprendé <span class="keyword">HTML</span>,
<span class="keyword">CSS</span> y
<span class="keyword">JavaScript</span> desde cero con
nuestros cursos <span class="highlight">100% online y gratuitos</span>.
</p>
<p>
Antes: <span class="strikethrough">$199 USD</span>
Ahora: <span class="new-price">$49 USD</span>
<span class="highlight">(75% OFF)</span>
</p>
<p>
Para crear una card usá la etiqueta
<span class="code-inline"><div class="card"></span>
en tu HTML y luego estilizala con CSS.
</p>
<p>
Este curso incluye
<span style="color: #e83e8c; font-weight: bold;">6 proyectos reales</span>,
<span style="background: #d4edda; padding: 2px 6px;">certificado de finalización</span>
y <span style="border-bottom: 2px dashed #6c757d;">acceso de por vida</span>
a todas las actualizaciones.
</p>
</body>
</html>
Con <span> podés cambiar el color de fondo, color de texto, tamaño, peso de fuente o cualquier estilo sin romper el flujo del texto. Es la herramienta perfecta para estilizar fragmentos de contenido sin afectar la estructura.
Variante 3: Estructura de página completa con <div> anidados
Antes de las etiquetas semánticas (header, nav, main), las páginas web se estructuraban enteramente con <div>. Este ejemplo muestra cómo se hacía para que entiendas el enfoque clásico.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Layout con Divs</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
.nav {
background: #444;
padding: 12px;
text-align: center;
}
.nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
.container {
display: flex;
max-width: 1100px;
margin: 20px auto;
gap: 20px;
padding: 0 20px;
}
.main-content {
flex: 3;
}
.sidebar {
flex: 1;
background: #f8f8f8;
padding: 20px;
border-radius: 8px;
}
.footer {
background: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="header">
<h1>Mi Sitio Web</h1>
<p>Estructurado completamente con divs</p>
</div>
<div class="nav">
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Portfolio</a>
<a href="#">Contacto</a>
</div>
<div class="container">
<div class="main-content">
<h2>Artículo Principal</h2>
<p>
Este es el contenido principal de la página. Acá va la información más importante
que queremos que los visitantes vean primero.
</p>
<p>
Los divs nos permiten agrupar contenido en bloques lógicos. Cada sección de la
página está contenida en su propio div con una clase descriptiva.
</p>
<h3>Sub-sección</h3>
<p>
Podemos anidar divs dentro de divs para crear estructuras más complejas. Esta
sub-sección está dentro del contenido principal.
</p>
</div>
<div class="sidebar">
<h3>Barra Lateral</h3>
<p>Enlaces relacionados, publicidad o contenido secundario.</p>
<ul>
<li><a href="#">Artículo relacionado 1</a></li>
<li><a href="#">Artículo relacionado 2</a></li>
<li><a href="#">Últimas noticias</a></li>
</ul>
</div>
</div>
<div class="footer">
<p>© 2026 Mi Sitio Web. Todos los derechos reservados.</p>
</div>
</body>
</html>
Variante 4: Comparativa visual: bloque vs inline
Esta variante demuestra visualmente la diferencia de comportamiento entre elementos de bloque e inline. Es clave para entender cuándo usar <div> (bloque) y <span> (inline).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Bloque vs Inline</title>
<style>
.demo-container {
border: 2px dashed #999;
padding: 20px;
margin: 20px 0;
}
.bloque {
display: block;
background: #cce5ff;
border: 2px solid #007bff;
padding: 10px;
margin: 8px 0;
}
.inline {
display: inline;
background: #d4edda;
border: 2px solid #28a745;
padding: 4px 8px;
}
.inline-block {
display: inline-block;
background: #fff3cd;
border: 2px solid #ffc107;
padding: 8px 12px;
width: 150px;
}
</style>
</head>
<body>
<h1>Comportamiento: Bloque vs Inline</h1>
<div class="demo-container">
<h3>Elementos de bloque (div por defecto)</h3>
<p>Ocupan todo el ancho disponible y fuerzan salto de línea.</p>
<div class="bloque">Bloque 1</div>
<div class="bloque">Bloque 2</div>
<div class="bloque">Bloque 3</div>
</div>
<div class="demo-container">
<h3>Elementos inline (span por defecto)</h3>
<p>Solo ocupan el ancho de su contenido. Fluyen uno al lado del otro.</p>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<span class="inline">Inline 3</span>
</div>
<div class="demo-container">
<h3>Elementos inline-block (híbrido)</h3>
<p>Fluyen como inline pero respetan width y height como bloque.</p>
<span class="inline-block">Item A</span>
<span class="inline-block">Item B</span>
<span class="inline-block">Item C</span>
</div>
</body>
</html>
Buenas y Malas Prácticas
| ✅ Buena práctica | ❌ Mala práctica |
|---|---|
Usar <div> para agrupar bloques de contenido relacionados | Usar <div> cuando una etiqueta semántica (<section>, <article>) es más apropiada |
Nombrar clases descriptivas: .card, .sidebar, .producto | Nombrar clases según apariencia: .caja-azul, .texto-grande |
Usar <span> solo para estilizar fragmentos inline de texto | Anidar <div> dentro de <p> (HTML no lo permite) |
Combinar <div> con Flexbox/Grid para layouts modernos | Crear layouts complejos solo con <div> y float/clear |
| Anidar divs con propósito estructural claro | Sobrecargar el HTML con "divitis" (divs innecesarios) |
Preguntas Frecuentes (FAQ)
¿Cuándo usar <div> y cuándo usar etiquetas semánticas?
Siempre que exista una etiqueta semántica que describa el propósito del contenido (<header>, <nav>, <main>, <section>, <article>, <footer>, <aside>), usala en lugar de <div>. Las etiquetas semánticas mejoran el SEO y la accesibilidad. Reservá <div> para contenedores genéricos sin significado semántico, como agrupar cards o crear wrappers para estilos.
¿El uso excesivo de <div> afecta al SEO?
No directamente, pero indirectamente sí. Un HTML lleno de <div> sin estructura semántica es más difícil de interpretar para Google y los lectores de pantalla. Google favorece sitios con estructura clara (headings jerárquicos, etiquetas semánticas). Usar <div> donde debería ir un <section> no te penaliza, pero perdés oportunidades de posicionamiento.
¿Puedo poner un <div> dentro de un párrafo <p>?
No. HTML no permite elementos de bloque (como <div>) dentro de elementos de párrafo <p>. Si lo hacés, el navegador cerrará automáticamente el <p> antes del <div>, rompiendo tu estructura. Dentro de un <p> solo podés usar elementos inline como <span>, <a>, <strong>, <em>.
¿<span> puede tener width y height?
Por defecto no, porque <span> es un elemento inline. Para que un <span> acepte width y height, necesitás cambiar su display a inline-block o block mediante CSS. La alternativa moderna es usar display: inline-block para mantener el flujo inline mientras controlás las dimensiones.
📐 ¿Querés profundizar en layouts con Flexbox y CSS Grid? Estos layouts modernos funcionan perfectamente con <div> como contenedores. Visitá Flexbox en CSS para aprender a crear diseños responsivos sin float ni position.