HTML Academy · Lección

Los elementos span y div

Use contenedores genéricos en línea y de bloque como puntos de enganche para estilos.

Los elementos span y div es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Contenedores genéricos

HTML tiene dos elementos contenedores genéricos y semánticamente neutros:

<div> — un contenedor a nivel de bloque
<span> — un contenedor en línea

Por sí mismos no tienen significado; existen únicamente como puntos de enlace para aplicar estilos y usar scripts.

El elemento div

<div> es un contenedor a nivel de bloque: crea una nueva línea antes y después:

<div class="card">
  <h2>Card Title</h2>
  <p>Card content here.</p>
</div>

<div class="sidebar">
  <p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->

El elemento span

<span> es un contenedor en línea: fluye dentro del texto:

<p>The price is <span class="price">$29.99</span> per month.</p>

<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>

<!-- span targets a part of text for styling or scripting
     without adding block-level line breaks -->

Cuándo usar div frente a elementos semánticos

Antes de recurrir a <div>, compruebe si encaja un elemento semántico:

Encabezado de la página → <header>
Navegación → <nav>
Contenido principal → <main>
Entrada de blog → <article>
Barra lateral → <aside>
Pie de página → <footer>

Use <div> solo cuando no sea aplicable ningún elemento semántico.

Divitis

Divitis: usar <div> en exceso para todo:

<!-- Divitis: meaningless nesting -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Better: semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Ganchos de CSS con class e id

Tanto <div> como <span> se usan con los atributos class o id para seleccionarlos desde CSS:

<div class="hero-section">
  <h1>Welcome</h1>
  <p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>

<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->

Selección desde JavaScript

<div> y <span> también son objetivos de JavaScript:

<span id="counter">0</span>

<script>
  const counter = document.getElementById('counter');
  let count = 0;
  setInterval(() => {
    count++;
    counter.textContent = count;
  }, 1000);
</script>

Reglas de anidamiento

Reglas de anidamiento para contenedores genéricos:

<div> puede contener <div> y <span>
<span> solo puede contener <span> y contenido en línea
No coloque <div> dentro de <span>

<span>
  Inline text
  <span>Nested span OK</span>
  <!-- <div> inside span: INVALID -->
</span>

div para el diseño

Patrón de diseño habitual con div:

<div class="layout">
  <div class="sidebar"><!-- sidebar --></div>
  <div class="content"><!-- main content --></div>
</div>

<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->

span para aplicar estilos en línea

Patrones habituales para aplicar estilos en línea:

<p>Status: <span class="badge badge-success">Active</span></p>

<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
        <span style="color: green; font-weight: bold;">$30</span></p>

div y span son invisibles

De forma predeterminada, <div> y <span> son contenedores invisibles:

<div> no añade estilos visuales aparte de mostrarse como bloque
<span> no añade ningún estilo
Todo el aspecto proviene del CSS que aplique
Esto los convierte en contenedores neutros ideales

Comprobación rápida

¿Qué elemento debería usar para aplicar estilo a una sola palabra dentro de un párrafo?

Resumen: span y div

Aspectos esenciales de los contenedores genéricos:

<div> — a nivel de bloque, agrupa elementos para el diseño
<span> — en línea, permite seleccionar partes del texto para aplicarles estilos
Ambos son semánticamente neutros: no añaden significado
Prefiera los elementos semánticos de HTML5 cuando sean aplicables
Use class e id para conectarlos con CSS y JavaScript

Preguntas frecuentes

¿La lección «Los elementos span y div» es gratis?

Sí — el texto completo de «Los elementos span y div» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Los elementos span y div»?

Use contenedores genéricos en línea y de bloque como puntos de enganche para estilos. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Los elementos span y div»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a HTML Academy