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
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
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.
¿Qué es la etiqueta ‘span’ en HTML?
En HTML, la etiqueta span es un elemento contenedor genérico en línea. Las etiquetas de extensión generalmente envuelven secciones de texto con fines de estilo o para agregar atributos a una sección de texto sin crear una nueva línea de contenido.
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,
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
ver la pluma Etiqueta de tramo sin atributos de Christina Perricone (@hubspot) sobre CódigoPen.
Sin embargo,
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
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
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
ver la pluma Usando Span con JavaScript de Christina Perricone (@hubspot) sobre CódigoPen.
Por último, podemos usar
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
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 quesó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 unelemento con CSS. - En general,
los elementos se utilizan para separar fragmentos de contenido, yLas 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. - A