HTML <div>と<span>と<p> #初心者

サイト模写中は「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＞タグで囲んだところは、改行されないからこんな感じで文字の色を変えられる。