¿Cómo funcionan las etiquetas div y span en HTML?

Si estás dando tus primeros pasos en el desarrollo web. Puede que ya te hayas hecho la siguiente pregunta: ¿Cuál es la diferencia entre div y span? Muy bien, en este post aprenderemos a utilizar correctamente la etiqueta div y la etiqueta span, veremos cómo se utiliza y sus diferencias, además, veremos ejemplos concretos sobre los usos correctos de estos elementos HTML.

Primero vamos a hablar de cada uno por separado para entender más sobre este tema:

Etiqueta div

La etiqueta div hace parte de los elementos HTML de bloque, es decir, va a ocupar todo el ancho del documento disponible. Si no la usas con hojas de estilos, el navegador no mostrará nada especial al crear la división.

La etiqueta div define una “división”. Como ya puedes imaginarte, permitirá agrupar varios elementos en bloque: encabezados, listas, párrafos, tablas… También puede ser usada mediante hojas de estilo para establecer opciones de formato o definir un bloque específico de contenido sobre el cual quieres aplicar diferentes estilos.

Ejemplo:

Su uso para divisiones es bastante sencillo y va a manejar la siguiente estructura:

              <div>
 <p>Ejemplo de cómo funcionaria; la etiqueta div para divisiones.</p>
 <p>Puedes insertar el contenido que necesites.</p>
 <p>Esta seria la última línea de nuestro texto.</p>
</div>

            

Cambiará un poco cuando estés definiendo propiedades más específicas como el resaltado de un texto.

Etiqueta span

La etiqueta span también funciona como un contenedor, pero en este caso será un contenedor en línea. Por ejemplo, para destacar una palabra o expresión dentro de un párrafo utilizaremos la etiqueta span para encerrar esa palabra o expresión y luego ponerle un estilo mediante un atributo. O también podemos ponerle un identificador, ya sea id o class, para luego apuntarlo y maquetarlo con CSS.

Ejemplo:

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>
            

En resumen, la diferencia entre el div y span es que div se emplea para agrupar elementos HTML en un bloque, en cambio, span sirve para agrupar dentro de una línea.

Ahora que sabes cómo añadir las etiquetas div y span en HTML, puedes seguir aprendiendo con nuestro Curso de programación desde cero de MGPanel, ahí Podrás dominar este y otros temas en programación web. Además de pertenecer a la gran comunidad de MGPanel.