Docs ejecutables de HTML: Span en HTML

Q: ¿Qué diferencia hay entre div y span?

Un es un bloque: empieza en una línea nueva y ocupa todo el ancho. Un es en línea: se queda dentro de la línea de texto y solo es tan ancho como su contenido. Usa div para agrupar bloques de contenido y span para marcar palabras dentro de un texto.

Q: ¿Por qué width no funciona en mi span?

Los elementos en línea ignoran width, height y los márgenes verticales. Dale al span display: inline-block para que siga en la línea y acepte un tamaño, o display: block para que se comporte como un div.

Span en HTML: estilo a parte del texto y div vs span

La etiqueta <span> es un contenedor genérico en línea: envuelve unas palabras dentro de una línea para darles estilo o manejarlas con scripts sin romper la línea. Aprende a usarla, en qué se diferencia de div y cuándo encaja mejor una etiqueta más específica.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Qué hace la etiqueta span

<span> envuelve un fragmento de texto dentro de una línea para que puedas darle estilo o encontrarlo con JavaScript. Es el gemelo en línea de <div>: no tiene significado ni aspecto por defecto, y no empieza una línea nueva.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

La frase se queda en una línea. Solo cambian las palabras envueltas.

div vs span

Los dos tienen el mismo propósito (un contenedor sin significado) y se diferencian en cómo se colocan en la página:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

El div parte la frase en tres líneas y se estira a lo ancho de la página; el span se queda en la frase y se ajusta a su texto.

	`<div>`	`<span>`
Visualización	En bloque	En línea
Empieza una línea nueva	Sí	No
Ancho	Todo el ancho disponible	Tan ancho como su contenido
`width`, `height`, margen vertical	Se aplican	Se ignoran
Puede contener	Cualquier cosa, incluidos bloques	Solo texto y elementos en línea
Uso típico	Secciones, tarjetas, envoltorios de diseño	Una palabra o frase dentro de un texto

Una diferencia más: no se permite un <div> dentro de un <p>, y el navegador cierra el párrafo antes de tiempo si lo intentas, mientras que un span puede ir donde vaya el texto. Más sobre esto en la página de div.

Dar estilo a un span: qué funciona y qué no

El color, la fuente, el fondo y el padding horizontal funcionan en un span. El tamaño no: un elemento en línea ignora width, height y los márgenes superior e inferior. Cámbialo a inline-block para darle tamaño sin sacarlo de la línea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

El primer span solo es tan ancho como sus palabras. El segundo mide exactamente 120 por 40 píxeles y sigue dentro de la frase.

Spans con JavaScript

Un span es el marcador habitual para un valor que rellena un script, como un contador o un nombre de usuario:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Solo cambia el número; el resto de la frase no se toca.

Cuándo es mejor una etiqueta específica que un span

Un span no tiene significado, así que un lector de pantalla lo lee como texto normal. Cuando las palabras tienen un papel, usa la etiqueta de ese papel y dale el estilo que quieras:

Significado	Usa en lugar de un span
Texto importante	`<strong>`
Énfasis	`<em>`
Texto resaltado o marcado	`<mark>`
Código, un nombre de archivo	`<code>`
Una tecla del teclado	`<kbd>`
Una fecha u hora	`<time datetime="2026-09-24">`
Texto en otro idioma	`<span lang="fr">` (span más el atributo `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

La página de negrita explica la diferencia entre <strong>, <b>, <em> e <i>.

Errores comunes

Poner width a un span normal. Se ignora. Usa display: inline-block.
Meter un div o un párrafo dentro de un span. Es HTML no válido que rompe la línea. Cambia el span exterior por un div.
Spans clicables. Igual que un div, un span con onclick no se puede alcanzar con el teclado. Usa un <button> o un enlace.
Un span para cada estilo. Si párrafos o secciones enteras necesitan un estilo, pon la clase en el propio <p> o contenedor en lugar de envolver su texto en un span.

Preguntas frecuentes

¿Qué es un span en HTML?

<span> es un contenedor genérico en línea. Envuelve parte de una línea de texto, como una palabra, para que el CSS o el JavaScript puedan apuntar a ella, y no tiene aspecto ni significado propios.

¿Qué diferencia hay entre div y span?

Un <div> es un bloque: empieza en una línea nueva y ocupa todo el ancho. Un <span> es en línea: se queda dentro de la línea de texto y solo es tan ancho como su contenido. Usa div para agrupar bloques de contenido y span para marcar palabras dentro de un texto.

¿Por qué width no funciona en mi span?

Los elementos en línea ignoran width, height y los márgenes verticales. Dale al span display: inline-block para que siga en la línea y acepte un tamaño, o display: block para que se comporte como un div.

¿Cómo cambio el color de una palabra en HTML?

Envuelve la palabra en un span con una clase y dale color en el CSS: <span class="accent">word</span> con .accent { color: #2563eb; }. Para algo puntual, <span style="color: #2563eb">word</span> también funciona.

¿Un span puede contener un div?

No. Un span solo puede contener contenido en línea, como texto, enlaces, imágenes y otros spans. Los navegadores muestran igualmente un div dentro de un span, pero es HTML no válido y rompe la línea, así que cambia el elemento exterior por un div.

Conceptos relacionados