<span>

<span> es la versión en línea de <div>: un contenedor sin semántica que puede envolver fragmentos de texto o elementos en línea sin romper el flujo del texto que lo rodea. No le dice nada al navegador, al lector de pantalla ni al motor de búsqueda sobre el significado de lo que contiene. No genera ningún landmark, ningún rol, ninguna anotación semántica. Es, como <div>, una caja neutral — pero en línea en lugar de bloque.

La diferencia entre <span> y <div> está en el contexto de uso: <div> es para agrupar elementos de bloque (párrafos, headings, secciones) o crear contenedores de layout; <span> es para marcar fragmentos dentro de un flujo de texto continuo. Un <span> dentro de un <p> no rompe el párrafo en líneas separadas — fluye con el texto que lo rodea, igual que <strong>, <em> o <a>.

Igual que <div>, <span> es el último recurso para contenido en línea. Antes de usarlo, preguntate si existe un elemento semántico que comunique el significado: <strong> para importancia, <em> para énfasis, <mark> para resaltado, <abbr> para abreviaciones, <time> para fechas y horas, <code> para código, <cite> para referencias. Si ninguno aplica, ahí tiene lugar <span>.

Cómo funciona

<span> es un elemento de contenido en línea (phrasing content) con display inline por defecto. Al estar en línea, puede estar dentro de un <p>, dentro de un heading, dentro de un <li>, dentro de otro elemento en línea — sin generar salto de línea. No acepta elementos de bloque como hijos (no se puede poner un <p> dentro de un <span>).

No genera ningún rol ARIA. Para los lectores de pantalla, el texto dentro de un <span> se lee exactamente igual que el texto sin él — el contenedor es invisible semánticamente. Esta neutralidad es su principal utilidad: permite aplicar estilos CSS a un fragmento de texto sin agregar significado que no corresponde.

Modelo de contenido

<span> acepta contenido en línea (phrasing content): texto, <a>, <strong>, <em>, <img>, <br>, <code> y otros elementos de phrasing. No acepta elementos de bloque como <p>, <div>, <h1>, <section>, etc. Puede anidarse dentro de sí mismo o dentro de cualquier elemento que acepte phrasing content.

Sintaxis

<!-- Estilo de una parte del texto: precio destacado -->
<p>El precio es <span class="precio-destacado">$12.000</span> con envío incluido.</p>

<!-- Logo dentro del header: texto sin elemento semántico propio -->
<header>
  <span class="logo">MiSitio</span>
  <nav>...</nav>
</header>

<!-- Gancho para JavaScript: marcar una palabra que se reemplazará -->
<p>Bienvenido, <span id="nombre-usuario">usuario</span>.</p>

<!-- Estilo de texto sin importancia semántica -->
<p>El evento es el <span style="color: #e11d48;">15 de julio</span>.</p>

Atributos

<span> no tiene atributos propios. Acepta todos los atributos globales de HTML. Los más usados:

• class — para aplicar estilos CSS. Es el uso más frecuente de <span>.
• id — para referenciar el elemento desde JavaScript o CSS.
• data-* — para datos personalizados que JavaScript puede leer.
• style — para estilos inline (útil en ejemplos, pero en producción se prefiere class).

Rol de landmark y accesibilidad

<span> no tiene rol ARIA implícito. Es completamente neutral semánticamente. A diferencia de elementos como <strong> (importancia), <em> (énfasis) o <mark> (resaltado relevante), <span> no comunica ningún significado al árbol de accesibilidad.

Si se aplica un estilo visual a un <span> que comunica información importante (por ejemplo, colorear en rojo el texto de un error), esa información puede no llegar a usuarios que no perciben el color. En esos casos, hay que asegurarse de que el significado también esté comunicado por texto o por un atributo ARIA:

<!-- Mal: solo color comunica el error (inaccesible para usuarios de lectores de pantalla) -->
<p>Tu contraseña es <span style="color: red;">demasiado corta</span>.</p>

<!-- Mejor: el texto ya comunica el error, el color lo refuerza visualmente -->
<p>Tu contraseña es demasiado corta (mínimo 8 caracteres).</p>

<!-- Con role para contextos dinámicos -->
<span role="alert">Tu contraseña es demasiado corta.</span>

Cuándo usar <span> / cuándo usar el elemento semántico

Antes de usar <span>, preguntarse:

<div> vs <span>: el resumen

Ambos son contenedores sin semántica. La diferencia es el modelo de display:

La regla práctica: si estás dentro de un párrafo o de cualquier contenido de texto, usá <span>. Si estás agrupando elementos de bloque o creando contenedores de layout, usá <div>.

Notas, gotchas e interacción

• No poner <div> dentro de <span>. Un <div> (bloque) dentro de un <span> (en línea) es markup inválido. El navegador lo parsea, pero el comportamiento es impredecible.
• <span> sin clase ni id no sirve para nada. Un <span> sin ningún atributo es un contenedor vacío de significado y sin ningún efecto visual. Si no hay razón para marcarlo, no marcarlo.
• No usar <span> cuando existe el elemento semántico. Usar <span style="font-weight: bold"> en lugar de <strong>, o <span style="font-style: italic"> en lugar de <em>, es un antipatrón que aplica estilos visuales sin comunicar la semántica correspondiente.
• El color como única señal de error es inaccesible. Si un <span> colorea texto de rojo para indicar un error, los usuarios daltónicos o de lectores de pantalla no reciben esa información. Siempre acompañar con texto.

Vigente / legacy

<span> está completamente vigente. Nunca fue legacy. El patrón legacy es el uso de <font> (elemento de presentación eliminado en HTML5) para cambiar el estilo de fragmentos de texto — hoy se hace con <span> y CSS. El atributo style inline que solía estar en <font> (para color, size, face) se puede aplicar a <span>, aunque en producción se prefiere una class con estilos en una hoja de estilos separada.