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). Es una mejor manera de usarlo cuando no hay ningún otro elemento semántico disponible.
La etiqueta span es una etiqueta emparejada, lo que significa que tiene etiquetas tanto de apertura (<) como de cierre (>), y es obligatorio cerrar la etiqueta. La etiqueta span se usa para agrupar elementos en línea y esta etiqueta no realiza 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 class="">Some Text</span>
Atributo: esta etiqueta acepta todos los atributos globales y atributos de eventos
Ejemplo 1: En este ejemplo, simplemente usamos la etiqueta span con estilo en HTML.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GeeksforGeeks</h2> <p>GeeksforGeeks is a <span style="color:red;font-weight:bolder"> computer science</span> portal for <span style="background-color: lightgreen;">geeks</span>. </p> </body> </html>
Producción:
Etiqueta HTML <span>
Ejemplo 2: En este ejemplo, supongamos que queremos escribir GeeksforGeeks tres veces en tres líneas con negrita, cursiva, subrayado, en color verde con font-family = courier new, por lo que necesitamos usar muchas etiquetas HTML como <b> , <i> , <u> , <font> para cada vez en cada línea, y queremos hacer cambios para modificar cada etiqueta.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GfG</h2> <span>The span tag does not create a line break</span> <span>it allows the user to separate things from other elements</span> <span>around them on a page within the same line</span> <br> <!-- First Line --> <font color="009900" size="6"> <b> <u> <i>GeeksforGeeks</i> </u> </b> </font> <br> <!-- Second Line --> <font color="009900" size="6"> <b> <u> <i>GeeksforGeeks</i> </u> </b> </font> <br> <!-- Third Line --> <font color="009900" size="6"> <b> <u> <i>GeeksforGeeks</i> </u> </b> </font> </body> </html>
Producción:
Ejemplo 3: en este ejemplo, al usar la etiqueta <span>, podemos reducir el código y los atributos HTML, vea el siguiente ejemplo que mostrará el mismo resultado que el ejemplo anterior con el uso de la etiqueta <span> aplicando CSS en una etiqueta span.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks span tag</title>
<!-- style for span tag -->
<style type=text/css>
span {
color: green;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<span>GeeksforGeeks</span></br>
<span>GeeksforGeeks</span></br>
<span>GeeksforGeeks</span></br>
</body>
</html>
Producción:
Dar estilo a la etiqueta <span> usando las propiedades CSS
Ejemplo 4: como sabemos, span es una etiqueta en línea y ocupa tanto espacio como sea necesario y deja espacio para otros elementos. Todos los elementos de cuatro tramos se mostrarán en la misma línea porque cada etiqueta ocupa solo el espacio necesario y el resto del espacio libre para otros elementos.
HTML
<!DOCTYPE html> <html> <head> <title>GeeksforGeeks span tag</title> </head> <body> <h2>Welcome To GfG</h2> <!-- span tags with inline style/css --> <span style="background-color:powderblue;"> GfG</span> <span style="background-color: lightgray;"> -Contribute-</span> <span style="background-color: yellow;"> Article</span> <span style="background-color: lightgreen;"> GCET</span> </body> </html>
Producción:
la etiqueta span ilustra el elemento en línea para adquirir el espacio requerido para el elemento
Ejemplo 5: se puede usar una etiqueta de intervalo para establecer el color/color de fondo como parte de un texto. En el siguiente ejemplo, dentro del párrafo que se aplica, se aplica una etiqueta de intervalo de tres veces con un estilo diferente.
HTML
<!DOCTYPE html> <html> <head> <title>GeeksforGeeks span tag</title> </head> <body> <h2>Welcome To GfG</h2> <!-- Inside paragraph applying span tag with different style --> <p> <span style="background-color:lightgreen"> GeeksforGeeks </span> is A Computer Science Portal where you can <span style="color:blue;">Publish </span> your own <span style="background-color:lightblue;">articles </span> and share your knowledge with the world!! </p> </body> </html>
Producción:
Establecer el color usando la etiqueta <span>
Ejemplo 6: manipular JavaScript con la etiqueta span, en el siguiente ejemplo, agregamos una etiqueta span dentro de un párrafo con id=”demo” podemos cambiar su texto aplicando javascript en este ejemplo GFG se cambiará “GeeksforGeeks” después de hacer clic en el botón .
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Welcome to GfG</h2>
<p>
<span id="demo"
style="background-color:lightgreen;">GfG
</span>
A computer Science portal for Geeks
</p>
<!-- Creating button in java script -->
<button type="button"
onclick="document.getElementById('demo').innerHTML =
'GeeksforGeeks!!!'">Change Text!
</button>
</body>
</html>
Producción:
Manipulación de la etiqueta <script> usando Javascript
Diferencia entre la etiqueta Div y la etiqueta span : la etiqueta div y span son dos etiquetas comunes cuando se crean páginas usando HTML y funcionan con diferentes funcionalidades en ellas, mientras que la etiqueta div es un elemento a nivel de bloque y span es un elemento en línea La etiqueta div crea un salto de línea y por defecto crea una división entre el texto que viene después de la etiqueta como comenzó y hasta que la etiqueta termina con </div>. La etiqueta div crea cajas o contenedores separados para todos los elementos dentro de esta etiqueta, como texto, imágenes, párrafos.
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Borde 12 y superior
- Firefox 1 y superior
- Ópera
- Safari
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .