¿Qué es ‘Span’ en HTML?

De los muchos elementos HTML que encontrará en su viaje hacia el dominio de front-end, el espacio es uno que verá muy a menudo. Pero, a diferencia de otros elementos, el La etiqueta no crea un tipo específico de elemento de página por sí solo. Al principio, esto puede resultar confuso: ¿cómo es un elemento? en realidad se utiliza para?

Resulta que mucho. Los elementos Span brindan a los diseñadores y desarrolladores un control estricto sobre el estilo y el formato de sus páginas web y contenido. Si desea saber cómo se construyen las páginas web, debe familiarizarse con etiquetas y su propósito.

En esta guía, le presentaremos el elemento span en HTML. Le mostraremos cómo están escritos, para qué sirven (y para qué no) y le daremos algunos ejemplos de tramos en acción. Finalmente, aclararemos la diferencia entre span y un elemento similar, el div. Empecemos.

Una etiqueta span se escribe con una etiqueta de apertura y otra de cierre, así:

 
<span>Content goes here</span>

El elemento span se llama «genérico» porque el nombre de la etiqueta en sí no nos dice nada sobre el contenido del elemento. En otras palabras, «lapso» no significa nada para nosotros. Lo opuesto a un elemento HTML genérico es un elemento HTML semántico, cuyo nombre describe su propósito (p. ej.,

por párrafo, y ).

Las etiquetas de extensión también son elementos «en línea», lo que significa que el elemento permanece en la línea actual y no crea un salto de línea. Un div, el otro elemento HTML genérico, está a nivel de bloque y crea una nueva línea en la página. Exploraremos las diferencias entre span y div más adelante.

¿Qué hace ‘span’ en HTML?

Por sí solo, un La etiqueta no afecta cómo se representa la página.

ver la pluma Etiqueta de tramo sin atributos de Christina Perricone (@hubspot) sobre CódigoPen.

Sin embargo, Las etiquetas son poderosas porque nos permiten asignar cualquier atributo HTML global a una sección de texto u otro contenido de página en línea. Los atributos más comunes que verá que se usan con span son los selectores id y class, que se usan para aplicar estilos a palabras específicas. Consulte el siguiente ejemplo para ver varios ejemplos.

ver la pluma Estilo de texto con lapso de Christina Perricone (@hubspot) sobre CódigoPen.

También es posible aplicar CSS a elementos HTML dentro etiquetas usando el estilo atributos (también conocido como «CSS en línea»). Se debe evitar el CSS en línea, ya que hace que sea más difícil realizar cambios de estilo en toda la página.

Span también puede acomodar otros atributos. Por ejemplo, si tiene un texto en un idioma diferente al del documento, ajuste este texto en un etiquetar y agregar el idioma atribuya la etiqueta para indicar el cambio de idioma temporal. Esto ayuda a la indexación del motor de búsqueda e instruye a los programas de texto a voz para que pronuncien estas palabras de manera diferente.

ver la pluma Etiqueta de intervalo con idioma de Christina Perricone (@hubspot) sobre CódigoPen.

El elemento span también es excelente para apuntar a una sección de texto con funciones de JavaScript. En el siguiente ejemplo, el texto dentro de la la etiqueta está oculta. El código JavaScript revela este texto cuando haces clic en un botón.

ver la pluma Usando Span con JavaScript de Christina Perricone (@hubspot) sobre CódigoPen.

Por último, podemos usar para poner en negrita y cursiva el texto con CSS. Sin embargo, es una mejor práctica usar el etiqueta para el texto en negrita y la (énfasis) etiqueta para texto en cursiva. Esto es porque y son elementos HTML semánticos (mientras que ) no lo es, lo que hace que su código sea más accesible para los lectores de pantalla. Visiblemente, estas técnicas son idénticas; ver más abajo.

ver la pluma fuerte y em vs span de Christina Perricone (@hubspot) sobre CódigoPen.

Siempre que sea posible, siempre debe ver si hay una alternativa más semántica a antes de usarlo para una mejor accesibilidad.

Amplitud de HTML frente a división

Al igual que span, div es un elemento HTML genérico que verá en todas las páginas web. Pero, estos dos elementos sirven para propósitos diferentes. Span es un elemento en línea genérico, mientras que div es un elemento genérico nivel de bloque elemento.

Para obtener una explicación más detallada de lo que esto significa en la práctica, consulte nuestra explicación completa de span versus div en HTML. Pero, en resumen, estas son las principales diferencias entre los elementos span y div:

• agrega un salto de línea después de su etiqueta de cierre, mientras que no. Esta es la razón por la que los divs son «bloques» mientras que los tramos están en línea.
• A
  elemento ocupa todo el ancho de su contenedor, mientras que sólo ocupa el ancho de su contenido interior. El ancho y la altura de un

  elemento se puede cambiar en CSS, pero no se puede cambiar el ancho y la altura de un elemento con CSS.
• En general,
  los elementos se utilizan para separar fragmentos de contenido, y Las etiquetas se utilizan para apuntar a un fragmento de texto dentro de una porción más grande de contenido.

El siguiente ejemplo ilustra dos divs y dos spans. Observe las diferencias visuales entre estos elementos:

ver la pluma lapso vs div 1 de Christina Perricone (@hubspot) sobre CódigoPen.

Dale estilo a tu texto con etiquetas Span

Como hemos visto, hay muchas cosas que puede hacer con etiquetas, siempre que las esté aplicando correctamente. Sin las etiquetas span y div, Internet se vería bastante diferente (y bastante soso) en comparación con la forma en que se ve hoy en día. Estos elementos genéricos nos permiten diseñar el contenido de la página hasta el párrafo o la palabra individual.

Entonces, ya sea que desee llamar la atención sobre una línea de texto, agregar contenido dinámico con JavaScript o simplemente mejorar la estética de su sitio, siga en su cinturón de herramientas, lo usará bastante.