La etiqueta Span para agrupar elementos en línea
La etiqueta <span> se utiliza para asignar un nombre a un trocito de un elemento de nuestra página web. Como decía en la página anterior, cuando el navegador vea que ese trozo de elemento tiene asignado un nombre, irá a ver si existen definidos algunos estilos para él y en caso de encontrar alguno, los aplicará.
Pero veámoslo con un ejemplo, que parece que se entiende mejor, no? Imagina, ahora que sabes escribir textos en Html, que tenemos una página web con el siguiente párrafo:
Imagina que queremos que aparezcan las palabras "etiqueta span" en negrita y de color rojo. Tal y como hemos visto hasta ahora, debemos evitar aplicar ese tipo de detalles en el código Html, verdad? Lo que haremos será darle a esas dos palabras un identificador o nombre y, más tarde, en la hoja de estilo, definirle a ese nombre las propiedades negrita y color rojo.
El nombre que vamos a escoger va a ser "resaltado", y para aplicárselo a esas dos palabras usaremos el siguiente código:
De este modo, el navegador al leer el código Html verá que a esas dos palabras encerradas ha de aplicarles los estilos que tenga el identificador resaltado" en la hoja de estilos. No parece muy complicado, no? Es que no lo es! je je je.
Has de saber que se usa la etiqueta <span> cuando quieres encerrar trocitos o parte de un elemento. Un párrago entero es un elemento, pero esas dos palabras son "un trocito" de elemento y por lo tanto hay que seleccionarlas con un <span>. Para seleccionar no partes sino conjuntos de elementos (como por ejemplo varios párrafos) hay que usar la etiqueta que veremos en la página siguiente, la etiqueta <div>.
Normalmente, yo solo uso <span> para esto, para dar un estilo diferente a una parte de un párrafo, como por ejemplo una sola palabra o solo unas pocas del párrafo. No lo uso para ninguna otra cosa que ahora mismo recuerde, de modo que puedes limitarte a usarlo como yo, solo para eso. Quizás se te ocurran más aplicaciones con el tiempo.
Pensando pensando... quizás otra utilidad podria ser la de enfatizar la primera letra de un párrafo, tal y como hacen algunos periódicos, es decir, colocar la primera letra en negrita y de un tamaño bastante mayor que el resto del párrafo. Esto se podría lograr aplicando la la estiqueta <span> tan solo a la primera letra del párrafo, de este modo:
Debería aparecer más o menos así, si defino en la hoja de estilos que sea negrita, de color azul y de un tamaño mayor que el resto del párrafo:
La primera letra de este párrafo, la "ele", tendrá un estilo diferente, si es que lo defino en la hoja de estilos, claro.
Dentro de un par de páginas te explico con más detalle el uso de la propiedad class, no temas. Veamos ahora la etiqueta div.
Más lecciones de Html:
