¿Cuál es la diferencia entre etiquetas div y span?

En HTML, tanto <div> como <span> son etiquetas utilizadas para agrupar o contener otros elementos. Sin embargo, existen diferencias importantes entre ambas que influyen en cómo se deben usar. A continuación, explico sus características principales:

1. Etiqueta <div>

La etiqueta <div> es un elemento de bloque. Esto significa que ocupa todo el ancho disponible de su contenedor y siempre comienza en una nueva línea, empujando el contenido siguiente hacia abajo. Su uso es común para organizar o dividir secciones en un documento HTML.

Características de <div>:

• Es un elemento de bloque (block-level), por lo que ocupa el ancho completo de su contenedor.
• Se utiliza principalmente para organizar grandes secciones de contenido o crear estructuras dentro de la página.
• Ideal para agrupar otros elementos como encabezados, párrafos, imágenes, etc.

Ejemplo de uso de <div>:

<div>
    <h2>Sección del sitio</h2>
    <p>Este es un párrafo dentro de un <div> que agrupa esta sección.</p>
</div>
    

2. Etiqueta <span>

La etiqueta <span> es un elemento en línea (inline-level), lo que significa que solo ocupa el espacio necesario para su contenido y no inicia una nueva línea. Se suele utilizar para aplicar estilos específicos o identificar pequeños fragmentos dentro de un texto.

Características de <span>:

• Es un elemento en línea (inline-level), por lo que solo ocupa el ancho necesario para el contenido que contiene.
• Se utiliza generalmente para aplicar estilos o efectos a una parte específica de un texto o frase sin romper el flujo del contenido.
• Ideal para pequeños fragmentos de contenido dentro de un bloque de texto.

Ejemplo de uso de <span>:

<p>Este es un texto normal, pero <span>este fragmento está resaltado</span> usando <span>etiquetas en línea</span>.</p>
    

3. Resumen

En resumen, utiliza <div> cuando necesitas organizar grandes secciones de contenido y <span> para destacar partes pequeñas de texto o aplicarles estilos específicos sin afectar el flujo del texto.