Elementos div e span

Elemento div

A chegada das tags semânticas de elementos de seção de HTML5 diminuíram os casos de uso do elemento <div>. Ele agora é usado como uma espécie de fallback, quando nenhum dos elementos semânticos se adequa ao conteúdo que se quer marcar. Um caso de uso para esse elemento é um slider e seus slides:

<div class="slider">
  <div class="slide" id="slide-1">
    <h2>Slide 1</h2>
    <p>Descrição</p>
  </div>
  <div class="slide" id="slide-2">
    <h2>Slide 2</h2>
    <p>Descrição</p>
  </div>
  <div class="slide" id="slide-3">
    <h2>Slide 3</h2>
    <p>Descrição</p>
  </div>
</div>

Outro caso de uso são linhas e colunas de um layout baseado em uma grid:

<div class="row">
  <div class="col-md-6">
    <p>Conteúdo</p>
  </div>
  <div class="col-md-6">
    <p>Conteúdo</p>
  </div>
</div>

O elemento span

O elemento <span> é a versão do inline da <div>. Enquanto a <div> é um elemento de nível de bloco genérico, o <span> é um elemento inline genérico. Assim como a <div>, ele só deve ser usado quando nenhum outro elemento for adequado, pois ele não contém nenhum significado especial.

Um caso de uso é quando você quer estilizar palavras isoladas de um título ou letras de uma palavra, puramente por motivos estéticos:

<h1 class="titulo-engracado">Seu <span class="segunda-palavra-titulo-engracado">título</span></h1>