[HTML]タグの意味と使い分けについて

eh657883

はじめに

文章を記述する際に、どのタグで囲うのが適切なのだろうと思うことがあります。今回はその疑問を解決します。

  • div, p, spanの使い分け
  • ulとdlの使い分け

記載するcssは、そのタグにデフォルトで付与されているものです。

また以降の説明は、(こちらのサイト)を参考にしている。

div, p, spanの使い分け

div

ブロック要素の最小構成です。クラスで装飾されることを前提としている器のような立ち位置です。

div {
  display: block;
}

p

文章を段落単位で扱うことを目的としています。marginにより各段落の上下に空白ができ、関連するテキストが一塊になっているのが容易に判別できます。

つまるところ、文章にはpタグがベストです。

　display: block;
　margin-block-start: 1em;
　margin-block-end: 1em;
　margin-inline-start: 0px;
　margin-inline-end: 0px;
}

span

インライン要素の最小構成です。クラスで装飾されることを前提としている器のような立ち位置です。

span { }

ul, dlの使い分け

ul

見出しを持たない集合体に向いています。プログラミング的には「List」の立ち位置です。

「リンゴ、みかん、ぶどう」のようなものに向いています。

ul {
　display: block;
　list-style-type: disc;
　margin-block-start: 1em;
　margin-block-end: 1em;
　margin-inline-start: 0px;
　margin-inline-end: 0px;
　padding-inline-start: 40px;
}

dl

見出しを持つ集合体に向いています。プログラミング的にはキーと値をセットで持つ「Map」の立ち位置です。

「リンゴ：１００円、みかん：２００円、ぶどう：３００円」や、見出し付きの文章に向いています。

dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

使い分けによるメリット

サイト開発をする際、pを一切使わずdivのみで記述した場合、コードの可読性が落ちます。というのも、divタグが単に文章を入れるためのものなのか、レイアウトを修飾するためのものかの判断が必要になるからです。

pタグを用いていれば、このタグの内側は文章が記述されているということが一瞬で判断できるので、コードを把握する＝レうアウトの構造を理解するのが容易になります。

まとめ

  • 文章を書く場合には、「p」「dl」が推奨されている。
  • classの装飾をする場合には、「div」や「span」などはコンテナを使用する。

 

 

 

 

コメントを残す