【HTML・CSS】ブロックレベル要素とインライン要素のタグまとめ

プログラミング系列サムネイル画像1

HTMLの<body>~</body>内に記述する要素は、

  • ブロックレベル要素
  • インライン要素

の2種類に分類されます。

大きく分けて独立した箇所か行内の一部かという違いがあります。

HTML・CSSでレイアウトを考えていく上で避けては通れないところです。

今回は、「ブロックレベル要素」と「インライン要素」の主なタグを列挙したいと思います。

ブロックレベル要素とインライン要素の考え方・性質はこちらのサイトにイラスト付きで解説されていますので、興味のある方はご参照頂ければと思います。

ブロックレベル要素

ブロックレベル要素とは、Webページにおいて「独立した部分」です。

主なタグは以下の通りです。

  • 見出し:<h1>~<h6>
  • 段落:<p>
  • リスト:<ul>,<ol>, <dl>
  • フォーム:<form>
  • アドレス:<address>
  • <div>
ブロックレベル要素例

インライン要素

インライン要素を持つタグで囲まれた箇所は、行内の一部として表示されます。

  • アンカー:<a>
  • 画像:<img>
  • 引用:<cite>
  • 強調:<em>,<strong>
  • <span>