Quando deve usar as tags <div> e <span> na marcação HTML?

As etiquetas div e span são contenedores universais utilizados para agrupar elementos e aplicar estilos.

• div (divisão): Elemento de bloco. Cria uma nova linha antes e depois do seu conteúdo. Usado para agrupar grandes secções de conteúdo, como cabeçalhos, conteúdo principal, rodapés, barras laterais. Empregado para criar o layout da página com CSS.

• span: Elemento em linha. Não cria uma nova linha. Usado para agrupar pequenas partes do conteúdo dentro de uma linha, como palavras ou frases individuais. Empregado para aplicar estilos a um fragmento de texto sem afetar os elementos circundantes.

Exemplo de uso de div:

<!-- Agrupamento da secção de cabeçalho do site -->
<div class="header">
  <h1>Logotipo</h1>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
    </ul>
  </nav>
</div>

<!-- Agrupamento do conteúdo principal -->
<div class="main-content">
  <article>
    <h2>Título do artigo</h2>
    <p>Conteúdo do artigo...</p>
  </article>
</div>

Exemplo de uso de span:

<p>Isto é um texto normal com <span class="highlight">palavra destacada</span>.</p>

<style>
  .highlight {
    color: blue; /* Aplicação do estilo apenas à palavra "destacada" */
    font-weight: bold;
  }
</style>

Deve-se usar estas tags com classes ou identificadores semanticamente apropriados para melhor legibilidade e manutenção do código, bem como para fins de estilização e manipulação do DOM. É importante evitar o uso excessivo de div e span onde tags HTML5 mais semânticas (como header, footer, article, nav, section) sejam mais adequadas.