Etiqueta span en HTML
¿Qué es la etiqueta <span> en HTML?
La etiqueta HTML <span> es una etiqueta de formato de texto que se utiliza para aplicar estilos personalizados a un fragmento de texto dentro de una línea de texto o un bloque de texto.
Cuando se usa la etiqueta <span>, el texto dentro de ella no se muestra de manera diferente en sí mismo, pero puede ser estilizado a través de CSS.
La etiqueta <span> es útil para aplicar estilos personalizados, como cambiar el color o el tamaño de fuente, a un fragmento de texto dentro de un párrafo o una sección de una página web.
También se puede utilizar para etiquetar un fragmento de texto con un identificador único para que pueda ser referenciado por otros elementos en la página.
La etiqueta <span> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <span> en HTML5:
<p>Este es un <span class="resaltado">texto resaltado</span> en una oración.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <span> para resaltar la palabra “texto resaltado” en una oración. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de fondo amarillo y un borde negro alrededor de la palabra resaltada para que sea más visible.
Atributos
La etiqueta <span> en HTML no tiene atributos específicos, sin embargo, se pueden utilizar los atributos globales en cualquier elemento HTML.
Los atributos más comunes utilizados con <span> son:
- class: Este atributo permite asignar una o varias clases al elemento <span>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<span class="resaltado">Texto resaltado</span>
<span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: HTML, XML (xml)- id: Este atributo permite asignar un identificador único al elemento <span>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<span id="nota">Texto con nota</span>
Lenguaje del código: HTML, XML (xml)- style: Este atributo permite aplicar estilos CSS directamente al elemento <span>. Aunque esta es una forma rápida de aplicar estilos, se recomienda utilizar clases o identificadores en su lugar para un mejor control y mantenimiento del código.
Ejemplo:
<span style="color: red;">Texto resaltado</span>
Lenguaje del código: HTML, XML (xml)- title: Este atributo permite añadir un texto de ayuda o título al elemento <span>. Este texto se mostrará como una herramienta de ayuda cuando el usuario posiciona el cursor sobre el elemento.
Ejemplo:
<span title="Este es un texto de ayuda">Texto con ayuda</span>
Lenguaje del código: HTML, XML (xml)Los atributos más importantes de la etiqueta <span> son los atributos globales, como class, id, style y title, ya que permiten aplicar estilos y proporcionar información adicional sobre el texto dentro del elemento <span>.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <span> de HTML5:
Ejemplo 1: Utilizando la etiqueta <span> para resaltar el texto de un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta span</title>
<style>
.resaltado {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>Este es un <span class="resaltado">texto resaltado</span> en un párrafo.</p>
<p>Este es otro <span class="resaltado">texto resaltado</span> en otro párrafo.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <span> para resaltar el texto de dos párrafos. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de fondo amarillo y un peso de fuente en negrita alrededor del texto para que sea más visible.
Ejemplo 2: Utilizando la etiqueta <span> para aplicar un estilo específico a un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta span en un enlace</title>
<style>
.enlace-resaltado {
color: red;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Visite nuestro sitio web para obtener más información <a href="https://www.ejemplo.com"><span class="enlace-resaltado">sobre los requisitos de admisión</span></a>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <span> dentro de un enlace <a> para aplicar un estilo específico al texto del enlace. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de texto rojo, un peso de fuente en negrita y una decoración de texto de subrayado alrededor del texto del enlace para que sea más visible.
Ejemplo 3: Utilizando la etiqueta <span> para resaltar el texto en un formulario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta span en un formulario</title>
<style>
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
border: 1px solid #ccc;
padding: 5px;
width: 100%;
}
.obligatorio {
color: red;
}
</style>
</head>
<body>
<form>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre">
<label for="email">Correo electrónico:</label>
<input type="email" name="email" id="email">
<label for="mensaje">Mensaje <span class="obligatorio">*</span>:</label>
<textarea name="mensaje" id="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <span> para resaltar la etiqueta “Mensaje” como obligatorio en un formulario. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de texto rojo alrededor del texto para indicar que el campo es obligatorio. Además, hemos utilizado el atributo “for” en la etiqueta <label> para asociarla con su campo de entrada correspondiente.