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.
Tabla de contenidos
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.
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.