Cómo funcionan las etiquetas div y span en HTML

Autor: | Última modificación: 3 de enero de 2023 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

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.

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.

¿Te animas a seguir aprendiendo?

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 Desarrollo Web Full Stack Bootcamp. ¡Anímate a matricularte!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.