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

progateのHTML&CSS中級編で奮闘中。

「p」とか「a」とかタグの使い分けは?

いろんなサイトで解説があるので自分なりにまとめてみて頭に入れよう。

 

「p」

[サイト①]ーーーーーーーーーーーーーーーーーーー

ひとつの段落であることを表す際に使用する要素です。特徴としては改行された後に1行空白が入ります。補足:p要素同士の間隔を調整するにはCSSのmarginプロパティを使用

[サイト②]ーーーーーーーーーーーーーーーーーーー

段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>~</p>で囲まれたテキストは1つの段落であることを示します。HTMLにおける段落は、通常の文章と同じく文章のひとかたまりを表します。

[サイト③]ーーーーーーーーーーーーーーーーーーー

<p>は「paragraph(段落)」の「p」なのでページ内で段落を作る際に使用。divタグと同じようにspanはpタグの懐に入り込めるけど、pタグはspanタグの中に入り込めません。

 

「div」

[サイト①]ーーーーーーーーーーーーーーーーーーー

p要素と同じブロック要素で、特徴としては前後に改行が入ります。違いは空白行が入るかどうかという点です。(自分メモ:divは空白行が入るがpは入らない)

[サイト②]ーーーーーーーーーーーーーーーーーーー

ブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。

[サイト③]ーーーーーーーーーーーーーーーーーーー

「division(段とか仕切りの意味)」のdivです。pブロックタグは「一つのかたまりとして認識される要素」です。対して、インライン要素は「文章の一部として扱われる要素」です。divタグは「division(仕切り)」の「div」なので、ページ内にブロックを作りたい時に使用。

 

「span」

[サイト①]ーーーーーーーーーーーーーーーーーーー

インライン要素です。div要素とは似た役割を持っていますが、違いとしては改行が入らないことです。改行はさせたくないけど、文書の途中で一部だけスタイルを変更したい場合とかに使えます。div要素やp要素の中にspan要素を使ったりする事が多い。

[サイト②]ーーーーーーーーーーーーーーーーーーー

単体では特に意味を持たないタグですが、<span>~</span>で囲った部分をインライン要素としてグループ化することができるタグです。グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。インライン要素で文章の一部として利用されますので前後に改行は入りません。

[サイト③]ーーーーーーーーーーーーーーーーーーー

文字を装飾したい時によく使われるタグです。spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めない。<span>は、「しばらくの間」の意味の「span」なのでしばらくの間文章あるいは何か要素を装飾したい時に使用。

 

「a」

[サイト①]ーーーーーーーーーーーーーーーーーーー

記述なし

[サイト②]ーーーーーーーーーーーーーーーーーーー

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

[サイト③]ーーーーーーーーーーーーーーーーーーー

記述なし

 

<参考サイト>

[サイト①]TASK NOTESさん

[サイト②]クロノドライブさんの「コーディングノウハウ・コラム」

[サイト③]CREIVEさん

 

<まとめ・整理>

 まず言えるのは、「a」タグはごっちゃにするまでもないって感じですね。

「p」「div」「span」いずれも塊を作るもの。

「p」は文章の塊。塊同士の距離をとる

「div」は文章やら画像も有り。塊同士の距離は調節可能。汎用性が高い。

「span」は文章の中に入り込み、一部を囲む。

自分なりの理解としてはこんな感じでしょうか。

 

色々模写して使い所を覚えよう!