サイト模写中は「divとspanはpは項目とかをまとめられる役割なんだなあー」とざっくりにしか理解していなかったので、少しずつきちんとわかった事をまとめていこうと思います。
＜div＞タグ
division（分割・段）の略で、＜div＞～＜/div＞で囲った部分をブロック要素としてグループ化する。前後に改行が入る。
＜div＞タグ自身は特に意味を持たない。
＜span＞タグ
短時間・全範囲の意味。＜span＞～＜/span＞で囲った部分をインライン要素としてグループ化する。前後に改行が入らない。
＜span＞タグ自身は特に意味を持たない。
＜p＞タグ
paragraph（段落）の頭文字で、＜p＞～＜/p＞でページ内で段落を作る
実際に書いてみる
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>divとspanとp</title><linkrel="stylesheet"href="css/styles.css"></head><body><divclass="container01"><p>最初の文です。</p><p>2番目の文です。</p></div><divclass="container02"><p>最初の文です。</p><p><span>2番目</span>の文です。</p></div></body></html>styles.css
body{margin:0;}div{margin:10px;width:400px;}.container01{background:lightcoral;}.container02{background:#80f0ab;}p{margin:0;padding:00010px;font-size:20px;line-height:35px;text-align:left;}span{color:#5797e0;}
＜div＞タグで囲むと1つのグループになって、こんな感じで背景とか変えられる。
＜p＞タグで囲んだところは、＜br＞タグを使っていないのに改行されている。
＜span＞タグで囲んだところは、改行されないからこんな感じで文字の色を変えられる。