Etiqueta HTML <span>
La etiqueta HTML <span> es un contenedor en línea genérico sin significado semántico, usado para estilizar o manipular texto. Ejemplos y buenas prácticas.
La etiqueta HTML <span> es un contenedor en línea genérico para un fragmento de texto o contenido. A diferencia de la mayoría de los elementos HTML, no tiene significado semántico — no comunica al navegador ni a las tecnologías de asistencia nada sobre lo que el contenido es. Su único propósito es marcar un tramo de contenido en línea para poder aplicarle estilos con CSS o manipularlo con JavaScript.
Dado que no añade ningún significado, <span> debe ser tu último recurso, no el primero. Siempre que un elemento semántico se ajuste al contenido, úsalo en su lugar:
| Si el texto es… | Usa esto, no <span> |
|---|---|
| enfatizado | <em> |
| importante / fuerte | <strong> |
| resaltado / relevante | <mark> |
| una abreviatura | <abbr> |
| código | <code> |
| una fecha u hora | <time> |
Usa <span> solo cuando ningún elemento en línea semántico aplica y simplemente necesitas un gancho para estilos o scripts — por ejemplo, colorear una sola palabra, envolver un carácter para un efecto de letra capital o etiquetar un icono decorativo.
Preferir elementos semánticos
Los dos fragmentos a continuación se ven idénticos en el navegador, pero no son iguales. El primero usa un <span> con un estilo en línea; el segundo usa <mark>, que realmente comunica "este texto está resaltado por relevancia" a los lectores de pantalla y motores de búsqueda.
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>Cuando solo necesitas un gancho para estilizar y no hay coincidencia semántica, <span> es la herramienta adecuada. Cuando el estilo refleja un significado, elige el elemento que transmite ese significado.
<span> vs <div>
<span> y <div> son los dos contenedores genéricos "sin significado" en HTML. La diferencia está en el tipo de caja que crean:
<span>es en línea — fluye dentro de una línea de texto y ocupa solo el ancho de su contenido. No puede contener legalmente elementos de bloque.<div>es de bloque — comienza en una nueva línea y se extiende al ancho completo de su elemento padre. Úsalo para agrupar secciones más grandes.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Regla general: usa <span> para una porción de una línea y <div> para un bloque de contenido.
Sintaxis
La etiqueta <span> viene en pares. El contenido se escribe entre las etiquetas de apertura (<span>) y cierre (</span>).
En el siguiente ejemplo, aplicamos un estilo directamente dentro de la etiqueta.
Ejemplo de la etiqueta HTML <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Veamos otro ejemplo en el que añadimos un atributo class a la etiqueta y aplicamos los estilos por separado en una hoja de estilos. Esto crea una letra capital — una primera letra de mayor tamaño, un clásico toque tipográfico al inicio de un capítulo.
Ejemplo de la etiqueta HTML <span> con el atributo class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Casos de uso de accesibilidad
Dos patrones hacen que <span> sea genuinamente útil para la accesibilidad.
Texto solo para lectores de pantalla. Una clase visually-hidden oculta el texto de la pantalla pero lo mantiene disponible para los lectores de pantalla. Esta es la forma estándar de proporcionar contexto que los usuarios videntes obtienen solo del diseño.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Etiquetar iconos. Las fuentes de iconos y los glifos decorativos no tienen texto para que un lector de pantalla anuncie. Oculta el <span> decorativo con aria-hidden y proporciona un nombre accesible con aria-label en el enlace o botón.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Aquí aria-hidden="true" elimina la "×" visual del árbol de accesibilidad, mientras que aria-label indica a la tecnología de asistencia que el botón significa "Close dialog".
Atributos
<span> no tiene atributos propios. En la práctica, estos atributos globales hacen casi todo el trabajo:
| Atributo | Propósito |
|---|---|
class | Vincula el elemento a una o más reglas CSS. |
id | Proporciona un identificador único para selección con CSS o JavaScript. |
style | Aplica CSS en línea directamente (útil para estilos puntuales). |
lang | Marca un fragmento de texto como en un idioma diferente, p. ej. <span lang="fr">. |
La etiqueta también admite los atributos de eventos, por lo que puedes reaccionar a las acciones del usuario como clics o movimientos del cursor. Un evento ocurre cuando el navegador reacciona a una acción del usuario — hacer clic con el ratón, reproducir un video, enviar un formulario, etc.