¿Qué es span en HTML y qué hace?

De los muchos elementos HTML que encontrarás en tu viaje hacia el dominio del front-end, el span HTML es uno que verás con mucha frecuencia. Pero, a diferencia de otros elementos, la etiqueta <span> no crea un tipo específico de elemento de página por sí solo. Al principio, esto puede ser confuso: ¿para qué se usa realmente un elemento como <span>?

En realidad se usa para muchas cosas. Los elementos span brindan a quienes se dedican al diseño y al desarrollo web un control estricto sobre el estilo y el formato de sus páginas web y contenido. Si deseas saber cómo se construyen las páginas web, debes familiarizarte con las etiquetas <span> y su propósito.

En esta guía, te presentaremos el elemento span en HTML. Mostraremos cómo son, para qué sirven y algunos ejemplos en acción. Finalmente, aclararemos la diferencia entre span y un elemento similar, el div. Empecemos.

Una etiqueta span se escribe con una etiqueta de apertura y otra de cierre, así:

 
<span>El contenido va aquí</span>

El elemento span se llama «genérico» porque el nombre de la etiqueta en sí no nos dice nada sobre el contenido del elemento. En otras palabras, «span» no significa nada para nosotros. Lo opuesto a un elemento HTML genérico es un elemento HTML semántico, cuyo nombre describe su propósito (por ejemplo, <p> para párrafo, <botón> y <formulario>).

Las etiquetas de extensión también son elementos «en línea», lo que significa que el elemento permanece en la línea actual y no crea un salto de línea. Un div, el otro elemento HTML genérico, es un elemento de bloque que crea una nueva línea en la página. Exploraremos las diferencias entre span y div más adelante.

¿Qué hace el span en HTML?

Por sí sola, una etiqueta <span> no afecta la forma en que se muestra la página.

See the Pen Span Tag With No Attributes by Christina Perricone (@hubspot) on CodePen.

Aun así, las etiquetas <span> son poderosas porque nos permiten asignar cualquier atributo HTML global a una sección de texto u otro contenido de página en línea. Los atributos más comunes son los selectores id y class, que se usan para aplicar estilo a palabras específicas. Consulta el siguiente ejemplo para ver sus variaciones:

Accede al código Dar estilo al texto con span por Christina Perricone (@hubspot) en CodePen.

También es posible aplicar CSS a elementos HTML dentro de las etiquetas <span> utilizando los atributos de estilo (también conocidos como «CSS en línea»). Se debe evitar el CSS en línea, ya que hace que sea más difícil realizar cambios de estilo en toda la página.

El span también puede acomodar otros atributos. Por ejemplo, si hay un texto en un idioma diferente al del documento, envuelve este texto en una etiqueta <span> y agrega el atributo lang a la etiqueta para indicar el cambio de idioma temporal. Esto ayuda a la indexación del motor de búsqueda e instruye a los programas de texto a voz para que pronuncien estas palabras de manera diferente.

Accede al código Etiqueta span con cambio de idioma por Christina Perricone (@hubspot) en CodePen.

El elemento span también es excelente para apuntar a una sección de texto con funciones de JavaScript. En el siguiente ejemplo, el texto dentro de la etiqueta <span> está oculto. El código JavaScript revela este texto cuando haces clic en un botón.

Accede al código Usar span con JavaScript por Christina Perricone (@hubspot) en CodePen.

Por último, podemos usar <span> para poner texto en negrita y cursiva con CSS. Sin embargo, es una mejor práctica usar la etiqueta <strong> para el texto en negrita y la etiqueta <em> (énfasis) para el texto en cursiva. Esto se debe a que <strong> y <em> son elementos HTML semánticos (mientras que <span>) no lo es, lo que hace que su código sea más accesible para los lectores de pantalla. Visiblemente, estas técnicas son idénticas.

Accede al código Strong y em vs. span por Christina Perricone (@hubspot) en CodePen.

Siempre que sea posible, siempre debes ver si hay una alternativa más semántica a <span> antes de usarla, para una mejor accesibilidad.

Span HTML y div: diferencias

Al igual que span, div es un elemento HTML genérico que verás en todas las páginas web. Pero, estos dos elementos sirven para propósitos diferentes. Span es un elemento genérico en línea, mientras que div es un elemento genérico de bloque.

En resumen, estas son las principales diferencias entre los elementos span y div:

• <div> agrega un salto de línea después de la etiqueta de cierre, mientras que <span> no lo hace. Esta es la razón por la que los div forman «bloques», mientras que los span están en línea.
• Un elemento <div> ocupa todo el ancho del contenedor, mientras que <span> solo ocupa el ancho del contenido interno. El ancho y el alto de un elemento <div> se pueden cambiar en CSS, pero no puedes cambiar el ancho y el alto de un elemento <span> con CSS.
• En general, los elementos <div> se utilizan para separar fragmentos de contenido y las etiquetas <span> se utilizan para orientar un fragmento de texto dentro de un fragmento de contenido más grande.

El siguiente código ilustra dos div y dos span. Observa las diferencias visuales entre estos elementos:

Accede al código Diferencias entre span y div por Christina Perricone (@hubspot) en CodePen.

Como hemos visto, hay muchas cosas que puedes hacer con las etiquetas <span>, siempre que las apliques correctamente. Sin las etiquetas span y div, el internet se vería bastante diferente (y bastante soso) en comparación con la forma en que se ve hoy en día. Estos elementos genéricos nos permiten diseñar el contenido de la página hasta el párrafo o palabra individual.

Entonces, ya sea que desees llamar la atención sobre una línea de texto, agregar contenido dinámico con JavaScript o simplemente mejorar la estética de tu sitio, usa el span HTML.