Div y span en HTML

Las etiquetas <div> y <span> son elementos de contenedor en HTML que se utilizan para agrupar otros elementos y aplicar estilos o scripts a ellos. Aunque ambos son elementos genéricos y no tienen un significado semántico específico, son fundamentales para la estructuración y el diseño de páginas web.

<div>

• Descripción: La etiqueta <div> se utiliza para agrupar bloques de contenido. Es un contenedor de nivel de bloque, lo que significa que ocupa todo el ancho disponible y comienza en una nueva línea.
• Uso Común: Agrupar secciones completas de una página, como secciones de un artículo, columnas en un diseño de página, o elementos de un diseño de cuadrícula.

Sintaxis Básica:

<div>
    <!-- Contenido del div -->
</div>

Ejemplo:

<div style="background-color: lightgray; padding: 10px;">
    <h2>Título de la Sección</h2>
    <p>Este es un párrafo dentro de un div.</p>
</div>

Notas:

• style: Se pueden aplicar estilos CSS en línea a través del atributo style.
• class y id: Se pueden usar para aplicar estilos específicos y para seleccionar el <div> con CSS o JavaScript.

<span>

• Descripción: La etiqueta <span> se utiliza para agrupar contenido en línea. Es un contenedor de nivel de bloque en línea, lo que significa que no comienza en una nueva línea y solo ocupa el espacio necesario para su contenido.
• Uso Común: Aplicar estilos o scripts a una parte específica del texto o de otros elementos en línea, como resaltar una palabra dentro de un párrafo o cambiar el color de un texto específico.

Sintaxis Básica:

<span>
    <!-- Contenido del span -->
</span>

Ejemplo:

<p>Este es un párrafo con una <span style="color: red;">palabra resaltada</span> en rojo.</p>

Notas:

• style: Se pueden aplicar estilos CSS en línea a través del atributo style.
• class y id: Se pueden usar para aplicar estilos específicos y para seleccionar el <span> con CSS o JavaScript.

Comparación

• <div>:
  • Nivel de Bloque: Ocupa todo el ancho disponible y comienza en una nueva línea.
  • Uso: Agrupar secciones completas de una página.
• <span>:
  • Nivel en Línea: Solo ocupa el espacio necesario y no comienza en una nueva línea.
  • Uso: Agrupar partes específicas del contenido en línea.

Ejemplo Combinado

<div class="container">
    <h1>Encabezado Principal</h1>
    <p>Este es un párrafo que contiene una <span style="font-weight: bold;">palabra en negrita</span> y otra <span style="color: blue;">palabra en color azul</span>.</p>
    <div class="footer">
        <p>Contenido del pie de página.</p>
    </div>
</div