DIV - <div>

La etiqueta <div> significa division y no representa ningún contenido específico dentro del sitio.

Su función es contener elementos en una sola unidad. Esta funcionalidad es de gran utilidad para posicionar a través de CSS componentes dentro de la página.

Los elementos <div> se utilizan en conjunto con los atributos "id" y "class" para definir su estilo y el de sus elementos descendientes

Para definir un <div> sólo creamos su etiqueta de apertura y de cierre. Todos los elementos que contenga serán sus descendientes y podrán moverse como una sola unidad

Ejemplo

<div> <p>Este es un párrafo</p> <p>Y estoy contenido dentro de un <div></p> </div>

Recuerda que:

Los elementos <div> son elementos en bloque. Por lo tanto siempre se crearán en una linea nueva.

Span - <span>

Los elementos <span> no tienen un significado especial, solo nos sirven como contenedores de texto u otros elementos simples. No son recomendados para agrupar muchos elementos.

Podemos utilizarlo en conjunto con los atributos "id" y "class" para referenciarlo desde CSS.

Ejemplo

En una lista queremos que el segundo elemento sea de color rojo

<ul> <li>Andrea</li> <li><span class="rojo">Camila</span></li> <li>Cindy</li> <li>Natalia</li> </ul>

Este código se transformará en:

  • Andrea
  • Camila
  • Cindy
  • Natalia

Recuerda que:

Los elementos <span> son elementos en linea.