Etiqueta HTML Span | Tutoriales de Desarrollo Web

Introducción

La etiqueta HTML  se utiliza para agrupar elementos con fines de formato. Puede considerarse como un contenedor genérico para el contenido fraseológico. La etiqueta  es muy similar a la etiqueta <div>, pero es un elemento en línea a diferencia de <div> que es un elemento de nivel de bloque. La etiqueta  no representa inherentemente nada. En este laboratorio, aprenderá a usar la etiqueta  para agrupar elementos con fines de formato.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Agregando el código HTML

En el archivo index.html, agregue el siguiente código dentro de la etiqueta <body>:

<p>This is a <span>simple</span> example of using the span tag.</p>

Aquí hemos creado un párrafo con la palabra "simple" envuelta dentro de la etiqueta . Esto nos ayudará a entender la utilización de esta etiqueta en la práctica.

Estilando el elemento Span

Ahora veamos cómo estilar el contenido que está envuelto dentro de la etiqueta . Por ejemplo, si queremos agregar color a la palabra "simple", podemos usar la propiedad color en CSS.

Agregue el siguiente código CSS dentro de la etiqueta <head>:

<style>
  span {
    color: red;
  }
</style>

Este código CSS cambia el color de todo el contenido envuelto dentro de la etiqueta  a rojo. Como hemos envuelto la palabra "simple" dentro de la etiqueta , se imprimirá en color rojo.

Usando Span con otras etiquetas HTML

La etiqueta  también se puede utilizar con otros elementos HTML. Veamos cómo se puede utilizar con la etiqueta <a>.

Agregue el siguiente código HTML dentro de la etiqueta <body>:

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

Esto crea un párrafo con la palabra "link" envuelta dentro de la etiqueta  y vinculada a la URL #.

Estilando el texto enlazado

Ahora veamos cómo podemos estilar el texto vinculado. Agregue el siguiente código CSS dentro de la etiqueta <head>:

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

Este código CSS establece el color del texto dentro de la etiqueta <a> en verde sin subrayado.

Agregando atributos de eventos

La etiqueta  admite atributos globales y de eventos. Veamos cómo podemos usar el atributo global class para aplicar estilos.

Agregue el atributo class a la etiqueta  que envuelve la palabra "simple" como se muestra a continuación:

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

Agregue el siguiente código CSS dentro de la etiqueta <head>:

<style>
  .example {
    font-size: 20px;
  }
</style>

Este código CSS aumenta el tamaño de fuente del contenido dentro de la etiqueta  que tiene la clase example.

Usando etiquetas Span para la semántica

Aunque la etiqueta  no tiene ningún significado inherente, se puede utilizar para transmitir la semántica del texto que envuelve. Por ejemplo, se podría utilizar para envolver una fecha o un porcentaje para indicar que el texto dentro tiene un significado especial.

Por ejemplo, agregue el siguiente código al archivo index.html:

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

En este ejemplo, 90 está envuelto dentro de la etiqueta  y se le da un nombre de clase score. Al hacerlo, hemos transmitido que el texto dentro de la etiqueta  tiene un significado especial. Además, hemos agregado el atributo aria-label para proporcionar información de accesibilidad a un lector de pantalla.

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta HTML  para agrupar elementos con fines de estilo. También aprendiste cómo estilar el contenido envuelto dentro de la etiqueta , cómo usarlo con otras etiquetas HTML, cómo usar atributos globales y de eventos y cómo usar la etiqueta  para transmitir semántica.

Estilando elementos con HTML Span