Referencia de etiquetas

Etiqueta span en HTML: agrupar partes de un texto

La etiqueta  agrupa contenido de frase sin aportar un significado especial. Permite aplicar atributos a unas palabras dentro de un párrafo: por ejemplo, dar una clase al estado de un producto o indicar que una palabra está en otro idioma. Úsala cuando necesites ese contenedor y ninguna etiqueta describa mejor el significado del fragmento.

Ejemplo mínimo: un estado dentro de un párrafo

<p>Estado: <span class="estado">disponible</span>.</p>

Verás «Estado: disponible.» en el mismo párrafo. El nombre estado es una clase elegida por quien escribe el HTML; no cambia el color por sí solo. Para colorear únicamente el fragmento, añade esta regla CSS:

.estado {
  color: #14532d;
}

Sobre un fondo blanco, «disponible» aparecerá en verde oscuro. El resto de la frase conserva su color. Puedes probar el fragmento dentro del <body> de un documento y colocar la regla en un <style> del <head>; el caso práctico de abajo muestra un archivo completo.

Si retiras solo  y , el texto permanece, pero la regla deja de tener un elemento al que aplicarse. Si conservas el elemento y quitas el CSS, desaparece el color añadido. HTML agrupa el fragmento; CSS determina su presentación.

Sintaxis y contexto válido

Escribe una etiqueta de apertura  y su cierre : ambas son necesarias. En HTML,  no cierra el elemento. La referencia de MDN recoge estas reglas de sintaxis.

 admite contenido de frase, como texto, enlaces,  y otros . Puede usarse dentro de , de un encabezado o de otro contexto que admita ese contenido. Los elementos hijos mantienen sus propias restricciones.

No coloques <div>, párrafos ni listas dentro de : no pertenecen al contenido que admite. Para agrupar varios párrafos con un propósito de diseño, considera <div>. El modelo de contenido del estándar fija la diferencia.

Cuándo elegir em, strong o mark

Que unas palabras tengan un color diferente no explica su significado. Elige el elemento según el mensaje:

 expresa énfasis: «Lo necesito hoy» cambia el acento de la frase.
 expresa importancia, gravedad o urgencia: una advertencia de seguridad necesita ese significado, aunque su CSS sea discreto.
 señala relevancia en el contexto, por ejemplo una coincidencia de búsqueda.
 permite agrupar un fragmento para aplicarle atributos sin añadir esos significados.

La negrita con font-weight o un fondo amarillo con CSS no convierte un  en  o . Estas funciones se distinguen en las definiciones de semántica del texto de HTML.

Caso práctico: disponibilidad e idioma de un producto

Guarda este código como producto-span.html y ábrelo en un navegador. El archivo contiene los estilos necesarios y funciona localmente, sin recursos externos ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Disponibilidad del cuaderno Horizonte</title>
    <style>
      body {
        margin: 1rem;
        max-width: 36rem;
        background: #ffffff;
        color: #172033;
        font-family: sans-serif;
        line-height: 1.6;
      }

      .estado {
        color: #14532d;
        background: #dcfce7;
        border: 1px solid currentColor;
        padding: 0.1em 0.3em;
      }
    </style>
  </head>
  <body>
    <h1>Cuaderno Horizonte</h1>
    <p>Color: <span lang="en">blue</span> (azul).</p>
    <p>Disponibilidad: <span class="estado">Disponible: 8 unidades</span>.</p>
    <p>Recogida en la tienda durante el horario habitual.</p>
  </body>
</html>

Verás la disponibilidad en verde oscuro, con fondo claro y borde. «Disponible: 8 unidades» comunica el estado incluso sin colores. La palabra inglesa «blue» tiene su idioma declarado y una traducción visible; lang="en" no la traduce ni añade una marca visual.

Prueba estos cambios por separado:

Quita la regla .estado: permanece la disponibilidad completa, con la apariencia normal del párrafo.
Cambia el color de .estado y comprueba el contraste con su fondo. El estado debe poder entenderse también por las palabras «Disponible: 8 unidades».
Retira únicamente las etiquetas del : conserva sus palabras. Desaparecen el fondo, el borde y el color aplicado al fragmento.
Retira lang="en" del otro : la palabra se sigue viendo igual, pero hereda el idioma español del documento.

Atributos y accesibilidad

 no tiene atributos específicos propios. Admite atributos globales de HTML:

class permite seleccionar el fragmento desde CSS o JavaScript.
lang="en" indica inglés. Ayuda a herramientas de lectura a elegir una pronunciación adecuada; el resultado depende del lector de pantalla y de las voces disponibles.
dir indica dirección del texto: ltr para izquierda a derecha, rtl para derecha a izquierda y auto para determinarla a partir del contenido. Dirección e idioma son datos distintos.
data-producto="cuaderno-horizonte" guarda un dato personalizado. No lo muestra ni ejecuta una acción. Un script podría leerlo mediante la propiedad DOM dataset.producto.

color, background y display son propiedades CSS, no atributos de . Tampoco existe un atributo HTML color válido para este elemento. El atributo global style admite declaraciones CSS, aunque una clase facilita compartirlas.

Al colorear un estado, mantén texto explícito y suficiente contraste entre texto y fondo. El ejemplo conserva la información al retirar sus estilos. No hace falta añadir un rol ARIA a estos fragmentos estáticos.

Errores frecuentes y preguntas

¿Span hace un salto de línea? Normalmente no: se presenta en línea y las palabras se ajustan al ancho disponible. CSS puede cambiarlo; añadir display: block a .estado coloca el fragmento en una caja de bloque. Esto modifica su presentación, pero no permite introducir párrafos o <div> dentro de él.

¿Puedo usar span para texto importante? Si el mensaje tiene importancia semántica, utiliza . Si solo necesitas una diferencia visual,  con CSS puede servir. Cambiar la apariencia de cualquiera de ellos conserva su significado HTML.

¿Por qué no cambia el color? Comprueba que class="estado" coincide con .estado, que el CSS se carga y que otra regla no lo sustituye. Escribir una clase sin su regla no produce un estilo.

¿Puedo usar span como botón? Para una acción, usa <button>; para navegar, <a>. Un  con un evento de clic no incorpora el foco ni la activación con Enter y Espacio de un botón. Añadir un rol tampoco implementa esa interacción, descrita en el patrón de botón de WAI.

Compatibilidad y fuentes

 tiene soporte consolidado en los navegadores actuales. La compatibilidad de MDN y sus datos de soporte del elemento, consultados el 4 de octubre de 2026, no señalan una limitación relevante para estos ejemplos.