HTML span

La etiqueta <span> en HTML es un elemento de contenido de flujo que se utiliza para aplicar estilos a un fragmento específico de texto dentro de un elemento contenedor. A diferencia de la etiqueta <div>, <span> no tiene ningún significado semántico y no cambia el comportamiento del documento.

Ejemplo:

<p>Este es un <span style="color: red">texto</span> de ejemplo.</p>
Lenguaje del código: HTML, XML (xml)

La etiqueta <span> se puede utilizar en cualquier lugar dentro de un elemento contenedor, como un párrafo, una lista, una tabla, entre otros. Se puede aplicar estilos CSS utilizando la propiedad “style” o utilizando una clase para darle un estilo específico al texto dentro de la etiqueta <span>.

Ejemplo de estilos con CSS:

<style> .resaltado { color: red; font-weight: bold; } </style> <p>Este es un <span class="resaltado">texto</span> de ejemplo.</p>
Lenguaje del código: HTML, XML (xml)

En este caso se utiliza una clase para darle estilo al texto resaltado.

La etiqueta <span> es muy útil para aplicar estilos a fragmentos específicos de texto dentro de un elemento contenedor. Sin embargo, en lugar de utilizar <span> para aplicar estilos, se recomienda utilizar clases o identificadores en CSS para un mejor control y mantenimiento del código.

Atributos

La etiqueta <span> en HTML no tiene atributos específicos, sin embargo, se pueden utilizar los atributos globales en cualquier elemento HTML.

Los atributos más comunes utilizados con <span> son:

  • class: Este atributo permite asignar una o varias clases al elemento <span>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).

Ejemplo:

<span class="resaltado">Texto resaltado</span><span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: HTML, XML (xml)
  • id: Este atributo permite asignar un identificador único al elemento <span>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).

Ejemplo:

<span id="nota">Texto con nota</span>
Lenguaje del código: HTML, XML (xml)
  • style: Este atributo permite aplicar estilos CSS directamente al elemento <span>. Aunque esta es una forma rápida de aplicar estilos, se recomienda utilizar clases o identificadores en su lugar para un mejor control y mantenimiento del código.

Ejemplo:

<span style="color: red;">Texto resaltado</span>
Lenguaje del código: HTML, XML (xml)
  • title: Este atributo permite añadir un texto de ayuda o título al elemento <span>. Este texto se mostrará como una herramienta de ayuda cuando el usuario posiciona el cursor sobre el elemento.

Ejemplo:

<span title="Este es un texto de ayuda">Texto con ayuda</span>
Lenguaje del código: HTML, XML (xml)

En resumen, los atributos más importantes de la etiqueta <span> son los atributos globales, como class, id, style y title, ya que permiten aplicar estilos y proporcionar información adicional sobre el texto dentro del elemento <span>.