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