La etiqueta <span> (del inglés span – abarcar) se utiliza para seleccionar caracteres u otros elementos en línea para su posterior asignación de estilos.
Por ejemplo, dentro de un párrafo (<p>) se puede cambiar el color y el tamaño de la primera palabra seleccionándola con el elemento y fijándole el estilo deseado.
Qué es la Etiqueta <span>
El elemento span HTML es un contenedor en línea genérico para elementos y contenido en línea. Se utiliza para agrupar elementos con fines de estilo (mediante el uso de los atributos class o id). Una mejor manera de utilizarlo cuando no hay otro elemento semántico disponible.
La etiqueta span es una etiqueta emparejada, lo que significa que tiene etiquetas de apertura (<) y cierre (>), y es obligatorio cerrar la etiqueta. La etiqueta span se utiliza para la agrupación de elementos en línea y esta etiqueta no hace ningún cambio visual por sí misma. span es muy similar a la etiqueta div, pero div es una etiqueta a nivel de bloque y span es una etiqueta en línea.
Sintaxis:
<span>...</span>La etiqueta de cierre es obligatoria.
- Atributos: Este elemento dispone de atributos globales.
Nota
Notas:
- El elemento HTML
<span>se encuentra dentro de la etiqueta <body>. - La etiqueta
<span>se utiliza generalmente para fines de estilo cuando no hay otro elemento que utilizar. - La etiqueta
<span>no representa intrínsecamente nada.
Ejemplos de Etiqueta SPAN
Este ejemplo utiliza el elemento span para crear un contenedor de texto en línea que cambia el color de una palabra a azul.
<p>Este párrafo contiene una sola palabra <span style="color: blue">blue</span>.Este ejemplo utiliza el elemento span para añadir una sencilla h-card Microformats2 al nombre de una persona.
<span class="h-card vcard">Juan Manuel</span>Veamos más ejemplos:
Ejemplo 1: Etiqueta <span> con estilos
En este ejemplo, simplemente utilizamos la etiqueta span con estilo en HTML.
<!DOCTYPE html>
<html>
<body>
<h2>Bienvenido a HTMLDESDECERO</h2>
<p>HTML desde Cero es un
<span style="color:blue;font-weight:bolder">
portal de información </span> para
<span style="background-color: orange;">HTML</span>.
</p>
</body>
</html>
Ejemplo 2: Reducir código y atributos con <span>
En este ejemplo, supongamos que queremos escribir HTMLDESDECERO.ES tres veces en tres líneas con negrita, cursiva, subrayado, en color naranja con fuente tamaño 6, por lo que necesitamos usar muchas etiquetas HTML como <b>, <i>, <u>, <font> para cada vez en cada línea.
El problema es que si queremos hacer cambios, vamos a necesitar modificar cada etiqueta.
<!DOCTYPE html>
<html>
<body>
<h2>Bienvenido a HTMLDESDECERO</h2>
<span>La etiqueta span no crea un salto de línea</span>
<span>permite al usuario separar las cosas de otros elementos</span>
<span>alrededor de ellos en una página dentro de la misma línea</span>
<br>
<!-- Primera Linea -->
<font color="#f16529" size="6">
<b>
<u>
<i>HTMLDESDECERO.ES</i>
</u>
</b>
</font>
<br>
<!-- Segunda Linea -->
<font color="#f16529" size="6">
<b>
<u>
<i>HTMLDESDECERO.ES</i>
</u>
</b>
</font>
<br>
<!-- Tercer Linea -->
<font color="#f16529" size="6">
<b>
<u>
<i>HTMLDESDECERO.ES</i>
</u>
</b>
</font>
</body>
</html>
Ahora, mediante el uso de la etiqueta <span>, podemos reducir el código y atributos HTML.
Ver el siguiente ejemplo que mostrará la misma salida que el ejemplo anterior usando la etiqueta <span> mediante la aplicación de CSS en una etiqueta <span>.
<!DOCTYPE html>
<html>
<head>
<title>Etiqueta SPAN HTML</title>
<!-- style for span tag -->
<style type=text/css>
span {
color: #f16529;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Bienvenido a HTMLDESDECERO</h2>
<span>HTMLDESDECERO.ES</span></br>
<span>HTMLDESDECERO.ES</span></br>
<span>HTMLDESDECERO.ES</span></br>
</body>
</html>
Ejemplo 3: Elementos en la misma línea con <span>
Como sabemos, span es una etiqueta en línea que ocupa el espacio necesario y deja espacio para otros elementos. Los cuatro elementos span se mostrarán en la misma línea porque cada etiqueta ocupa sólo el espacio necesario y el resto del espacio queda libre para otros elementos.
<!DOCTYPE html>
<html>
<head>
<title>Etiqueta SPAN HTML </title>
</head>
<body>
<h2>Bienvenido a HTMLDESDECERO</h2>
<!-- etiquetas span con inline style/css -->
<span style="background-color:powderblue;">
HTML</span>
<span style="background-color: lightgray;">
-desde-</span>
<span style="background-color: yellow;">
CERO</span>
<span style="background-color: lightgreen;">
.ES</span>
</body>
</html>
Ejemplo 4: Diferentes estilos en un párrafo
Una etiqueta span se puede utilizar para establecer el color/color de fondo como parte de un texto. En el siguiente ejemplo se aplica dentro de un párrafo, tres veces la etiqueta span con un estilo diferente.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Etiqueta span HTML</title>
</head>
<body>
<h2>Bienvenido a HTMLDESDECERO</h2>
<!-- Dentro de párrafo aplicando
etiqueta span con estilo diferente -->
<p>
<span style="background-color:lightgreen">
HTMLDESDECERO
</span> es un portal de aprendizaje de
<span style="color:blue;">HTML
</span> donde puedes
<span style="background-color:lightblue;">encontrar artículos
</span> muy útiles para mejorar tu código.
</p>
</body>
</html>
Ejemplo 5: Manipular JavaScript con la etiqueta <span>
En el siguiente ejemplo, añadimos una etiqueta span dentro de un párrafo. Con un id = "demo" podemos cambiar su texto mediante la aplicación de JavaScript. En este ejemplo HDC se cambiará “HtmlDesdeCero” después de hacer clic en el botón.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Etiqueta span HTML</title>
</head>
<body>
<h2>Bienvenido a HDC</h2>
<p>
<span id="demo"
style="background-color:orange;">HDC
</span>
es un portal de aprendizaje para HTML
</p>
<!-- Creando un botón en JS -->
<button type="button"
onclick="document.getElementById('demo').innerHTML =
'¡¡¡HTMLDESDECERO!!!'">¡Cambiar texto!
</button>
</body>
</html>
