Zenn
🍎

HTMLの要素「p」「div」「span」「a」の使い分けについて

2022/02/05に公開
HTML
tech

「p」

<p>HTMLのP要素</p>
<p>HTMLのP要素</p>
<p>HTMLのP要素</p>

<表示画面>
HTMLのP要素

HTMLのP要素

HTMLのP要素

・p = paragraph
・特徴：pを使うと、改行 & 1行空白が入る。
・「p」は、一つの段落であることを表す際に使用する要素。
・<p>～</p>で囲まれたテキストは1つの段落であることを示します。
・p要素同士の間隔を調整するにはCSSのmarginプロパティを使用。
・divタグと同じようにspanはpタグの懐に入り込めるけど、pタグはspanタグの中に入り込めません。

「div」

<div>HTMLのP要素</div>
<div>HTMLのP要素</div>
<div>HTMLのP要素</div>

<表示画面>
HTMLのdiv要素
HTMLのdiv要素
HTMLのdiv要素

・div = division（段とか仕切りの意味）
・特徴：前後に改行が入ります。
・divは空白行が入るがpは入らない。
・ブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。
・pブロックタグは「一つのかたまりとして認識される要素」です。対して、インライン要素は「文章の一部として扱われる要素」です。
・divタグは「division（仕切り）」の「div」なので、ページ内にブロックを作りたい時に使用。

「span」

<span>HTMLのspan要素</span>
<span>HTMLのspan要素</span>
<span>HTMLのspan要素</span>

<表示画面>
HTMLのdiv要素HTMLのdiv要素HTMLのdiv要素

・<span>は、「しばらくの間」の意味の「span」なのでしばらくの間文章あるいは何か要素を装飾したい時に使用。
・インライン要素です。
・div要素とは似た役割を持っていますが、違いとしては改行が入らないことです。
・改行はさせたくないけど、文書の途中で一部だけスタイルを変更したい場合とかに使えます。
・div要素やp要素の中にspan要素を使ったりする事が多い。
・spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めない。
・単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。
・グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。
・インライン要素で文章の一部として利用されますので前後に改行は入りません。
・文字を装飾したい時によく使われるタグです。
・spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めない。

「a」

・「a」とは、「Anchor（アンカー）」の略で、リンクの出発点や到達点を指定するタグです。
・リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場所の名前（識別子）を指定します。

参考URL

・https://www.task-notes.com/entry/20140823/1408795219
・https://kimihirosan.hateblo.jp/entry/2020/03/28/182046

Discussion