<span> en HTML5La etiqueta <span> es un elemento en HTML5 que se utiliza para agrupar y aplicar estilos o manipulación de scripts a partes específicas de un texto sin que este agrupamiento afecte al flujo del documento. Al ser un elemento en línea (inline), no provoca un salto de línea después de su uso.
<span>Aunque <span> no tiene atributos específicos exclusivos, puede usar los atributos globales que son aplicables a casi todos los elementos HTML. Estos atributos permiten mejorar la accesibilidad, el estilo y la funcionalidad del elemento. A continuación, se detallan los atributos globales más comunes aplicables a <span>:
class: Define una o más clases CSS para un elemento. Puede ser usado para aplicar estilos específicos a través de CSS.
<span class="highlight">Texto destacado</span>.id: Asigna un identificador único al elemento. Ideal para manipulaciones específicas mediante Javascript o para estilos exclusivos.
<span id="unique">Texto único</span>.style: Permite aplicar estilos CSS directamente en la etiqueta.
<span style="color: red;">Texto rojo</span>.title: Proporciona información adicional que aparece como una tooltip cuando se pasa el cursor sobre el elemento.
<span title="Información adicional">Hover aquí</span>.*`data-`**: Atributos personalizados que se usan para almacenar datos privados en la página o aplicación de manera que no afectan al layout del contenido.
<span data-info="valor">Texto con datos</span>.lang: Especifica el código de idioma del contenido del elemento, para mejorar la accesibilidad y la indexación por motores de búsqueda.
<span lang="es">Hola</span>.dir: Indica la dirección del texto (ltr para izquierda a derecha, rtl para derecha a izquierda).
<span dir="rtl">مرحبا</span> (Texto en árabe).<span> en HTML5El uso de <span> es fundamentalmente para dos propósitos: aplicar estilos y permitir la manipulación mediante scripts. A continuación, se presentan algunos ejemplos sencillos de cómo se puede utilizar <span> en HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Estilo con span</title>
<style>
.highlight { color: blue; font-weight: bold; }
</style>
</head>
<body>
<p>Este es un texto normal con un <span class="highlight">segmento destacado</span>.</p>
</body>
</html>En este ejemplo, el <span> con la clase "highlight" aplica un color azul y un estilo de fuente en negrita solo a ese fragmento particular de texto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Tooltip con span</title>
</head>
<body>
<p>Pasa el cursor sobre la palabra <span title="Dato adicional importante">información</span> para ver más detalles.</p>
</body>
</html>Aquí, el uso del atributo title en el <span> muestra una tooltip con "Dato adicional importante" cuando se pasa el cursor sobre la palabra "información".
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de JavaScript con span</title>
</head>
<body>
<p id="demo">Haz click en este <span id="textSpan">texto</span> para cambiar el contenido.</p>
<script>
document.getElementById('textSpan').onclick = function() {
this.innerHTML = 'texto modificado';
};
</script>
</body>
</html>En este caso, el <span> con el id "textSpan" es manipulable mediante JavaScript de modo que al hacer clic en él, su contenido cambia a "texto modificado".
En resumen, <span> es una etiqueta poderosa y versátil en HTML5 que, aunque su uso no incluye ningún estilo o comportamiento predeterminado, permite una amplia gama de aplicaciones mediante CSS y JavaScript.