Etiqueta HTML <span>
La etiqueta HTML <span> se utiliza para definir un pequeño fragmento de contenido o texto dentro de un documento más grande que necesita ser estilizado de manera diferente al texto circundante. Es un elemento en línea que se puede usar para aplicar estilos, como color o fuente, a una sección específica de texto.
La etiqueta <span> no tiene ningún significado semántico por sí misma, pero se puede usar junto con otras etiquetas, como <div> o <p>, para aplicar estilos o funcionalidad adicionales a partes específicas del contenido. Es una herramienta útil para diseñadores y desarrolladores web que necesitan realizar pequeños ajustes al texto sin afectar la estructura general de la página.
Por ejemplo, puedes usar la etiqueta <span> para resaltar una palabra específica dentro de un párrafo o para aplicar un tamaño de fuente diferente a un solo carácter. La etiqueta <span> también se puede usar con CSS para crear efectos al pasar el cursor, animaciones y otras características dinámicas en una página web.
La etiqueta <span> es similar a la etiqueta <div>, pero existen algunas diferencias. Mientras que la etiqueta HTML <span> se utiliza para definir un pequeño fragmento de contenido o texto dentro de un documento más grande que necesita ser estilizado de manera diferente al texto circundante, la etiqueta <div> se utiliza para definir una sección o bloque de contenido más grande que puede contener otros elementos HTML. La etiqueta <div> es un elemento contenedor que a menudo se usa para agrupar contenido relacionado y aplicar estilos a todo el bloque. Es un elemento de nivel de bloque, lo que significa que ocupa todo el ancho de su contenedor padre y fuerza un salto de línea antes y después del elemento.
Sintaxis
La etiqueta <span> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<span>) y cierre (</span>).
En el siguiente ejemplo, aplicamos un estilo directamente dentro de la etiqueta.
Ejemplo de la etiqueta HTML <span>:
Un ejemplo de una etiqueta HTML <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Veamos otro ejemplo donde agregamos un atributo de clase a la etiqueta y aplicamos estilos a su contenido por separado.
Ejemplo de la etiqueta HTML <span> con el atributo de clase:
Un ejemplo de una etiqueta HTML <span> con el atributo de clase
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Font size in percents */
position: relative; /* Relative positioning */
top: 7px; /* Move from above */
}
</style>
</head>
<body>
<p>
<span class="letter">О</span>
She brought in disgusting, disturbing yellow flowers in her hands.
And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Atributos
La etiqueta <span> admite los Atributos globales y los Atributos de eventos.
Los atributos globales se refieren a atributos que se utilizan en cualquier elemento HTML. Estos atributos son comunes para todos los elementos en HTML.
Un evento ocurre cuando un navegador reacciona a una acción específica del usuario. El usuario genera un evento al hacer clic con el mouse, reproducir un video, cargar un documento o una imagen, o realizar cualquier otra acción en el sitio web.
Practice
¿Cuál es el uso correcto de la etiqueta span de HTML?