Si estás dando tus primeros pasos en el desarrollo web, seguramente has estado aprendiendo acerca de distintos lenguajes. Por supuesto, HTML sigue estando en los rankings de los lenguajes de marcado más demandados y resulta imprescindible para cualquier Full Stack Web Developer . Es por eso que en este post hablaremos sobre algunas etiquetas en HTML que deberías conocer: las etiquetas div y span.
¿Qué son las etiquetas div y span en HTML?
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.
¿Para qué se usa la etiqueta div ?
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.
¿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
La etiqueta span hace parte de los elementos en HTML que se conocen por ser “en línea”. Al contrario de los elementos en bloque, estos sólo hacen uso del espacio que ocupan.
¿Para qué se usan las etiquetas span en HTML?
a etiqueta <span> nos permitirá hacer básicamente lo mismo que <div>, pero al ser un elemento en línea, estos cambios serán aplicados al interior de un bloque de texto. Usando identificadores o nombres junto a hojas de estilos puedes también cambiar el color o añadir más propiedades.
¿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 linea, pero podemos especificar alguna característica </p>
¿Por dónde continuar?
Ahora que sabes cómo añadir las etiquetas div y span en HTML, puedes seguir aprendiendo con nuestro Bootcamp en Desarrollo Web. Podrás dominar esta y otras herramientas y tecnologías como JavaScript, React y hasta despliegue de servidores en menos de 7 meses. ¡Apúntate ahora!
