Cómo funcionan las etiquetas div y span en HTML

Autor: | Última modificación: 7 de junio de 2022 | 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.

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.

Los div son tan flexibles 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.

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 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 esto 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 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]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!