Elemento span

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento span es un contenedor genérico sin un significado semántico en particular. Es comúnmente usado en la creación de páginas con propósitos estilísticos, en conjunto con los atributos style y class. También puede ser útil para proveer atributos, como lang o title, a porciones aisladas de texto.

El elemento span está diseñado para contener líneas simples de texto únicamente. Para bloques más grandes de contenido usa el elemento div en su lugar.

Ejemplos

El siguiente ejemplo muestra un documento diseñado para enseñar a los niños cómo pintar un arcoíris. Para que sea más atractivo para audiencias jóvenes, sus nombres son presentados en colores mediante el elemento span.

<h1>Pintando el arcoíris</h1>
<p>Chicos, esta vez usaremos los siguientes colores: <span style="color: #ed1b24">rojo</span>, <span style="color: #d9cc00">amarillo</span>, <span style="color: #00a3e8">azul</span>, <span style="color: #a349a3">violeta</span>, <span style="color: #ff7f26">naranja</span>, <span style="color: #a1cc1b">verde</span> e <span style="color: #5701ae">índigo</span>.</p>

Pintando el arcoíris

Chicos, esta vez usaremos los siguientes colores: rojo, amarillo, azul, violeta, naranja, verde e índigo.

Ahora, una oración contiene una palabra en otro lenguaje que está siendo encerrada con el elemento span, a fines de establecer el atributo lang para la misma.

<p>La palabra en ingles '<span lang="en">free</span>' (libre) refleja la filosofía de la fundación...</p>

La palabra en ingles 'free' (libre) refleja la filosofía de la fundación...

Atributos

Atributos específicos

align

La alineación horizontal del texto dentro de este elemento y de todos sus hijos. Existen cuatro valores posibles (insensibles a mayúsculas/minúsculas):

  • left: el texto se alinea a la margen izquierda.
  • center: el texto es centrado.
  • right: el texto se alinea a la margen derecha.
  • justify: el texto es justificado o se alinea a ambas márgenes.

Este atributo se ha vuelto obsoleto en HTML5 y, por lo tanto, su uso ya no es válido. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<span align="center">La única fuente de conocimiento es la experiencia</span>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.