¿Cuándo se deben usar las etiquetas <div> y <span> en el marcado HTML?

Las etiquetas div y span son contenedores universales utilizados para agrupar elementos y aplicar estilos.

• div (división): Elemento de bloque. Crea una nueva línea antes y después de su contenido. Se usa para agrupar grandes secciones de contenido, como encabezados, contenido principal, pies de página, barras laterales. Se emplea para crear el diseño de la página con CSS.

• span: Elemento en línea. No crea una nueva línea. Se usa para agrupar pequeñas partes del contenido dentro de una línea, como palabras o frases individuales. Se emplea para aplicar estilos a un fragmento de texto sin afectar los elementos circundantes.

Ejemplo de uso de div:

<!-- Agrupación de la sección de encabezado del sitio -->
<div class="header">
  <h1>Logotipo</h1>
  <nav>
    <ul>
      <li>Enlace 1</li>
      <li>Enlace 2</li>
    </ul>
  </nav>
</div>

<!-- Agrupación del contenido principal -->
<div class="main-content">
  <article>
    <h2>Título del artículo</h2>
    <p>Contenido del artículo...</p>
  </article>
</div>

Ejemplo de uso de span:

<p>Este es un texto normal con <span class="highlight">palabra resaltada</span>.</p>

<style>
  .highlight {
    color: blue; /* Aplicación del estilo solo a la palabra "resaltada" */
    font-weight: bold;
  }
</style>

Se deben usar estas etiquetas con clases o identificadores semánticamente apropiados para mejorar la legibilidad y el mantenimiento del código, así como para fines de estilización y manipulación del DOM. Es importante evitar el uso excesivo de div y span donde etiquetas HTML5 más semánticas (como header, footer, article, nav, section) sean más adecuadas.