divとspanの違いはなんですか？

divは前後で行が変わり、上から下へ積まれるブロックの箱。spanは行を変えず、文章の流れの中におさまるインラインの箱です。かたまりで囲むならdiv、文中の一部分ならspanと使い分けます。

divの中にdivを入れてもいいですか？

大丈夫です。箱の中に小さな箱を入れるように、divは何段でも入れ子にできます。ただし閉じタグの対応がずれやすいので、字下げをそろえて書くのがコツです。

見出しには見出しタグ、段落には段落タグのように、意味のあるタグで書けるならそちらが優先です。divとspanは、ぴったりの意味を持つタグが無いときのための箱と考えましょう。

これまでのタグは、見出し・段落・画像……と、それぞれ「意味」を持っていました。今回のふたつ、<div>と<span>は、ちょっと変わり者。それ自体に特別な意味はなく、「まとめる」ためだけのタグです。

<div>は、複数のタグをまるっと囲んで、ひとつのグループにします。

<div>
  <h2>お店について</h2>
  <p>朝10時から夜8時まで営業しています。</p>
</div>

divで囲んでも見た目は変わりませんが、見出しと段落が1つのまとまりになっています

この<div>は、見た目には何も変えません。でも「見出しと段落を、ひとつの“お店紹介ブロック”としてまとめた」というかたまりができます。あとで「このブロックだけ背景を灰色に」といった飾りつけが、まとめてできるようになるのです。

<span>は、文章の一部分だけをつまむための箱。行を変えずに、その場でひとつまみします。

<p>今日の空は<span>とても青い</span>です。</p>

spanで囲んでも行は変わらず、見た目もそのまま。文中の一部をつまんでいるだけ

これも見た目は変わりません。でも「“とても青い”の部分だけ、あとで色を変えたい」というとき、<span>で囲んでおけば狙い撃ちできます。

似ているようで、囲んだあとのふるまいがちがいます。ならべてみましょう。

「囲みたいものが、かたまりか、ひとつまみか」で選べば迷いません。

<div>は、中にさらに<div>を入れられます。大きな箱の中に、小さな箱をしまうイメージです。

<div>
  <h2>お店について</h2>
  <div>
    <p>朝10時から夜8時まで営業しています。</p>
    <p>水曜日はおやすみです。</p>
  </div>
</div>

箱を入れ子にしても見た目は変わりません。中身が上から下へ順に並んでいるだけです

入れ子が深くなるほど、開きタグと閉じタグの対応がずれやすくなります。中身を一段ずつ字下げして書くと、どの</div>がどの<div>の閉じなのか、見た目でわかるようになります。