Aunque el HTML semántico nos enseña a otorgarle significado a todos nuestros elementos, hay veces que el diseño requiere de bloques sin sentido. Por ello, en este post, te explicamos cómo funcionan las etiquetas div y span en HTML y cómo usarlas para estilizar tu página web.
Diferencia entre div y span
En este artículo te contaremos la diferencia entre div y span, profundizando en cómo actúa la etiqueta div y la etiqueta span en HTML.
Etiqueta div
Para hablar de las etiquetas div y span en HTML, vamos a comenzar por la primera.
Hay momentos en los que necesitamos bloques sin sentido en nuestra página web. Esto puede suceder cuando queremos darle un estilo distinto a varios bloques que son esencialmente el mismo elemento.
En el caso de un periódico, por ejemplo, podemos tener varias columnas con artículos dentro de ellas. No tenemos una manera de diferenciar estas columnas semánticamente porque todas contienen el mismo tipo de elemento: artículo.
Sin embargo, querremos darles estilos diferentes, pues una será la columna principal y las demás serán las secundarias.
Como no hay una etiqueta semántica que defina que un elemento es principal frente a otro del mismo tipo, necesitamos bloques sin sentido semántico.
La etiqueta div nos permite crear bloques para unir o separar elementos HTML sin una categoría específica. En el caso del periódico, podríamos crear una etiqueta artículo y luego insertar un div para cada columna o artículo. También lo podemos usar en el pie de página, creando tres div para la sección de redes, logo y contacto.
Estas tres secciones no tienen una diferencia semántica, pero sí necesitan ser bloques aparte dentro del elemento, por eso usamos la etiqueta div.
La etiqueta div es tan flexible que podríamos crear toda nuestra página web con ellos y atributos de clase e ID. Sin embargo, es mejor mantener las etiquetas div y span en HTML para los casos en los que no haya una etiqueta semántica que lo reemplace. Te recomendamos leer este post si quieres saber más acerca de qué es el HTML semántico, para que sigas aprendiendo sobre la diferencia entre div y span.
¿Cómo usar la etiqueta div?
Su uso para divisiones es bastante sencillo y va a manejar la siguiente estructura:
<div>Contenido del bloque, Otras etiquetas, etc. </div>Cambiará un poco cuando estés definiendo propiedades más específicas como el resaltado de un texto. Mira algunos ejemplos:
<div>
<p>Ejemplo de cómo funcionaría; la etiqueta div para divisiones.</p>
<p>Puedes insertar el contenido que necesites.</p>
<p>Esta sería la última línea de nuestro texto.</p>
</div>De forma más compleja se vería algo así:
div {
background-color: lightblue;
margin: 12px;
}Etiqueta span
Las etiquetas div y span en HTML son similares, ya que son etiquetas sin sentido semántico que sirven para separar elementos e insertar distintos estilos bajo una misma categoría. La diferencia entre estas dos etiquetas es que <span> se utiliza para elementos en línea, no en bloque. Esta etiqueta, etiqueta span en html, puede usarse cuando queremos que una parte del texto tenga un estilo diferente, pero no queremos usar énfasis o strong.
Un ejemplo clásico de etiqueta span son los logotipos que se conforman por dos estilos de texto. Si vemos el texto en el logo de Dunkin Donuts, notamos que está conformado por las dos palabras, cada una con un color distinto. Podríamos crear esta diferencia insertando un span en cada palabra y otorgándole un atributo de clase. Usando el selector de clase podemos posteriormente darle un color distinto a cada texto. Si quisiéramos que este logo estuviera en la barra de navegación, podríamos unir los dos span usando un div, ya que no hay ninguna etiqueta HTML para un logotipo. Puedes revisar la etiqueta span en html a profundidad en la MDN.
¿Cómo usar las etiquetas span en HTML?
Al igual que con <div>, esta etiqueta va a manejar la siguiente estructura:
<div>Contenido <span>del bloque</span> con elementos en línea</div>Aquí puedes ver un ejemplo:
<p> En este párrafo se inserta un elemento span para diferenciarlo <span style=»background: yellow; color: red;»>Texto especial dentro de etiqueta span con fondo amarillo y color rojo</span> ese texto especial sigue dentro del párrafo y en línea, pero podemos especificar alguna característica </p>Ahora que sabes cómo funcionan las etiquetas div y span en HTML, ¡es el momento de que las pongas en práctica en tu propia página web! Si, además de aprender sobre las etiquetas div y span en HTML, quieres seguir aprendiendo sobre HTML y CSS, no te puedes perder la oportunidad de formarte gracias a nuestro bootcamp intensivo Bootcamp Desarrollo Web. ¡Anímate a matricularte!
