<div>タグ

<div>タグはブロックレベルの要素なのですが、それらしい意味を持たないタグになっています。
よく使う使い方としては、<div>タグにクラスを付けて大まかな塊を作ったり、何かで囲いたいけど適切なタグが見つからないときに使います。

要約するとcssを当てやすくするために要素をグループにしてあげるタグです。
ですが、適切なタグが見つからなかったときに使うものなので、適切なタグがある場合は適切なタグを使いましょう。

使用イメージ

<span>タグ

<span>タグは<div>タグと同様に何も意味を持っていません。
唯一の違いはインラインの要素であることです。
<span>タグはインラインの要素なので、cssを使い見た目を変える目的で、テキストの一部分を囲うのが典型的な使い方です。

使用イメージ

まとめ

<div>と<span>は特別な意味を持たない特殊なタグです。主にCSSを使いやすくする目的で使われる場合が多いです。
使い方を見極めれば構造を保ったまま複雑な見た目の変更を行えますが、乱用すると迷子になりやすくなります。
他に適切なタグが存在しない場合、特別な理由で必要な場合にのみ使用することが必要です。