La etiqueta invisible <span> en HTML5

La etiqueta <span> nos sirve para encerrar un contenido (normalmente texto corto) y poder asignarle algún atributo HTML como un identificador id, una clase class, un atributo lang, etc.

Esta etiqueta <span> no tiene ningún significado semántico y los navegadores, por defecto, no le asignan ningún estilo.

¡OJO! debes usar la etiqueta <span> como último recurso, cuando no hay una etiqueta que se adapte al contenido que vas a encerrar. El contenido no suele tener ningún valor semántico y lo usaremos para aplicarle un estilo visual o cuando queremos que tenga un comportamiento especial. Solo y exclusivamente en estos casos y como último recurso deberemos usar <span>.
Sus etiquetas son <span> y </span> y en este caso ambas son obligatorias. Está definido como un elemento especial, y por lo tanto en línea y puede contener texto y/o elementos en línea.

Atributos genericos para la etiqueta <span>

La etiqueta <span> puede contener seis atributos genéricos que podemos usar.

• title : Es un texto informativo o título del elemento. Suele mostrarse a modo de "tool tip". Es legible por los usuarios y diferencia entre mayúsculas y minúsculas, por defecto lo fija el navegador.


• id : Le da un nombre al elemento que lo diferencia de todos los demás del documento. Un nombre único y diferencia entre mayúsculas y minúsculas, por defecto lo fija el navegador.


• class : Asigna nombres de clases al elemento para posteriormente aplicarle estilos CSS cómodamente. Admite lista de clases separadas por espacio en blanco y diferencia entre mayúsculas y minúsculas, por defecto lo fija el navegador.


• style : Permite definir estilos CSS directamente en el elemento <span>. Por defecto, las declaraciones de estilos las fija el navegador.


• lang : Información sobre el idioma del contenido del elemento y del valor de sus atributos. Es un código de idioma que, por defecto, es desconocido y lo fija el navegador.


• dir : Indica la dirección de texto y tablas. Este atributo puede usar dos valores 'ltr' (left-to-rigth) o 'rtl' (rigth-to-left). En mi caso el idioma del navegador está en castellano así que por defecto está fijado en 'ltr'.

Atributos especificos para la etiqueta <span>

La etiqueta <span> también puede contener tres atributos específicos que podemos usar.

• datasrc : Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros como definir una dirección url.


• datafld El nombre de una propiedad o columna de datasrc. Reservado para posibles usos futuros. Por defecto lo fija el navegador.


• dataformatas : Indica cómo deben ser tratados los datos obtenidos de datasrc. Reservado para posibles usos futuros. Puede usar los atributos 'paintext' o 'html'. Por defecto el navegador fija 'paintext'.

Veamos un breve ejemplo para finalizar la clase de hoy con la etiqueta <span>

<p>
Mi madre tiene <span class="rojo" id="ojosazules" style="color: red; font-size: 20px;">ojos azules</span>.
</p>

Conclusiones

Creo que no hay más que decir sobre esta etiqueta. Recuerda que normalmente la etiqueta <span> normalmente encierra un texto corto, que no tiene ningun significado semántico y que solo debes usarla como ultimo recurso.

Nada más por ahora y os recuerdo que justo debajo, teneis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece unete a la comunidad de Facebook.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018