div

div é a caixa genérica do HTML. Ela não diz o que tem dentro, não muda como o conteúdo é lido, só existe pra você agrupar coisas e pendurar estilo.

<div class="cartao">
  <h2>Título</h2>
  <p>Texto do cartão.</p>
</div>

É o frame do Figma que você criou só pra aplicar auto layout. Legítimo, útil, e sem sentido próprio.

Quando div é a escolha certa

Quando o agrupamento é mesmo só visual. Um wrapper pra centralizar, uma caixa pra aplicar padding, uma grade que envolve cards.

Quando não é

Sempre que existir uma tag que descreve aquilo. Se é navegação, <nav>. Se é clicável, <button>. Se é um item independente de conteúdo, <article>. Trocar div por tag com significado é a melhoria mais barata que existe em acessibilidade.

E o span

span é a mesma coisa, só que pra pedaço de texto no meio de uma linha. div empurra o que vem depois pra linha de baixo, span não.