SPAN

Si solo quisieras aplicar un estilo a un elemento <span> específico, podrías agregar un atributo
"class" a ese elemento en tu HTML y luego seleccionarlo por su clase en tu CSS. Por ejemplo, si
agregaras la clase "destacado" a tu elemento <span>, podrías aplicar un estilo de fondo amarillo a
ese elemento usando el siguiente código CSS:

HTML:

css

Copy code

<p>Este es un ejemplo de un <span class="destacado">texto destacado</span> en un

párrafo.</p>

CSS:

css

Copy code

.destacado {

background-color: yellow;

¿Qué hace el span en HTML?

Por sí sola, una etiqueta <span> no afecta la forma en que se muestra la página.

Aun así, las etiquetas <span> 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 son los selectores id y class, que se usan para aplicar estilo a palabras específicas.
Consulta el siguiente ejemplo para ver sus variaciones:

También es posible aplicar CSS a elementos HTML dentro de las etiquetas <span>
utilizando los atributos de estilo (también conocidos 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.

El span también puede acomodar otros atributos. Por ejemplo, si hay un texto en un idioma
diferente al del documento, envuelve este texto en una etiqueta <span> y agrega el atributo
lang a 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.

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 etiqueta <span> está oculto. El
código JavaScript revela este texto cuando haces clic en un botón.

<< Guía básica sobre HTML y CSS para marketers [Descargar gratis] >> 

Por último, podemos usar <span> para poner texto en negrita y cursiva con CSS. Sin
embargo, es una mejor práctica usar la etiqueta <strong> para el texto en negrita y la
etiqueta <em> (énfasis) para el texto en cursiva. Esto se debe a que <strong> y <em> son
elementos HTML semánticos (mientras que <span>) 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.

Siempre que sea posible, siempre debes ver si hay una alternativa más semántica a <span>
antes de usarla, para una mejor accesibilidad.

Span HTML y div: diferencias

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

En resumen, estas son las principales diferencias entre los elementos span y div:

 <div> agrega un salto de línea después de la etiqueta de cierre, mientras que <span>
no lo hace. Esta es la razón por la que los div forman «bloques», mientras que los
span están en línea.
 Un elemento <div> ocupa todo el ancho del contenedor, mientras que <span> solo
ocupa el ancho del contenido interno. El ancho y el alto de un elemento <div> se
pueden cambiar en CSS, pero no puedes cambiar el ancho y el alto de un elemento
<span> con CSS.
 En general, los elementos <div> se utilizan para separar fragmentos de contenido y
las etiquetas <span> se utilizan para orientar un fragmento de texto dentro de un
fragmento de contenido más grande.

El siguiente código ilustra dos div y dos span. Observa las diferencias visuales entre estos
elementos:

Como hemos visto, hay muchas cosas que puedes hacer con las etiquetas <span>, siempre
que las apliques correctamente. Sin las etiquetas span y div, el 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
palabra individual.

Entonces, ya sea que desees llamar la atención sobre una línea de texto, agregar contenido
dinámico con JavaScript o simplemente mejorar la estética de tu sitio, usa el span HTML.