La Etiqueta SPAN

Es un contenedor en línea que se utiliza para aplicar estilos, scripts o agrupar elementos de texto sin alterar la estructura semántica del documento.

La etiqueta <span> en HTML es un contenedor en línea que se utiliza para aplicar estilos, scripts o agrupar elementos de texto sin alterar la estructura semántica del documento. A diferencia de <div> (que es un contenedor de bloque), <span> no añade saltos de línea y es ideal para trabajar con fragmentos específicos de texto o elementos en línea. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<span>Contenido en línea aquí</span>

Ejemplo:

<p>
   Este es un texto <span>resaltado</span> con la etiqueta span.
</p>

Resultado:

Este es un texto resaltado con la etiqueta span.

Por defecto, <span> no modifica la apariencia del texto, pero sirve como "gancho" para CSS o JavaScript. 

Casos de uso comunes

a) Aplicar estilos CSS

Resultado:

La palabra roja está estilizada.

b) Agrupar elementos para JavaScript

<p>
   Haz clic <span id="contador">0</span> veces.
</p>
<button onclick="document.getElementById('contador').textContent++">Clic aquí</button>

Resultado:

Haz clic 0 veces.

c) Resaltar texto con clases

<style>
  .resaltar {
    background: yellow;
    padding: 2px 5px;
  }
</style>
<p>
   Este es un <span class="resaltar">texto importante</span>.
</p>

Resultado:

Este es un texto importante.

Diferencias entre <span> y <div>

<span> <div>
Contenedor en línea (no causa saltos de línea). Contenedor de bloque (ocupa todo el ancho disponible).
Ideal para fragmentos de texto. Ideal para agrupar secciones completas.
Ejemplo: <span>Palabra</span>. Ejemplo: <div><p>Párrafo</p></div>.

Combinación con atributos

  • class: Para aplicar estilos reutilizables.

  • id: Para manipular elementos únicos con JavaScript.

  • data-*: Para almacenar información personalizada.

Ejemplo con data-*:

<span data-usuario="123" data-rol="admin">Juan Pérez</span>

Buenas prácticas

  1. No abuses: Usa <span> solo cuando necesites aplicar estilos o scripts a fragmentos específicos.

  2. Prioriza etiquetas semánticas: Si el texto es importante, usa <strong>, <em>, o <mark> en lugar de <span>.

  3. Nombra clases claramente: Ejemplo: <span class="error">, no <span class="rojo">.

Accesibilidad

  • Evita ocultar contenido importante: No uses <span> para texto que deba ser accesible (mejor usa <div> con role ARIA si es necesario).

  • Combina con ARIA: Si usas <span> para controles interactivos, añade roles como role="button".

Ejemplo avanzado

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    .tooltip {
      position: relative;
      border-bottom: 1px dotted #333;
      cursor: help;
    }
    .tooltip-text {
      display: none;
      position: absolute;
      background: #333;
      color: white;
      padding: 5px;
      border-radius: 4px;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    .tooltip:hover .tooltip-text {
      display: block;
    }
  </style>
</head>
<body>
  <p>
   Pasa el cursor sobre <span class="tooltip">esta palabra
     <span class="tooltip-text">¡Esto es un tooltip!</span>
   </span> para ver el mensaje.
  </p>
</body>
</html>

Resultado:

Pasa el cursor sobre esta palabra para ver el mensaje.

Errores comunes

Usar <span> como bloque:

<span style="display: block;">Texto</span> <!-- Mejor usa <div> -->

Ignorar la semántica:

<span><h3>Título</h3></span> <!-- Las etiquetas de bloque no deben ir dentro de <span> -->

Conclusión

La etiqueta <span> es una herramienta versátil para trabajar con contenido en línea en HTML. Al usarla correctamente:

  • Aplicas estilos y scripts de manera precisa.

  • Mantienes la semántica del documento.

  • Mejoras la mantenibilidad del código.

Recuerda:

  • Úsala para fragmentos pequeños de texto o elementos en línea.

  • Combínala con clases y atributos para mayor control.

  • Evita sustituir etiquetas semánticas como <strong> o <em>.

¡Ahora puedes aprovechar <span> para personalizar y dinamizar tus proyectos web!