ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素インライン要素に分類されます。

ブロックレベル要素
文書の骨組みとなる要素です(例えば見出しや段落など)。このタイプの要素は、body要素の直接の子要素として配置することができます。
インライン要素
文章中の一部として扱われる要素です(例えばリンクや文字の強調など)。このタイプの要素は、通常はブロックレベル要素内で使用します。

また、インライン要素の中には置換要素というタイプの要素が存在します。

置換要素
テキスト以外のものに置き換えられる要素です(例えば画像や入力欄など)。一般的なインライン要素とは異なり、このタイプの要素は横幅と高さを持ちます。(置換要素以外のインライン要素は、非置換インライン要素といいます)

ブロックレベル要素とインライン要素の表示例

以下は、ブロックレベル要素とインライン要素に境界線を付けて表示した例です。

ブロックレベル要素の前後には
【ブロックレベル要素】
改行が入ります。
インライン要素の前後には【インライン要素】改行は入りません。
  • ブロックレベル要素赤い境界線) … このタイプの要素は横幅いっぱいの領域を持つので、要素の前後には自動的に改行が入ることになります。
  • インライン要素青い境界線) … このタイプの要素は行の一部として扱われるので、要素の前後には改行は入りません。

ブロックレベル要素の一覧

次の要素がブロックレベル要素になります。

インライン要素の一覧

置換要素の一覧

次の要素が置換要素になります。

特殊な要素

次の要素は、使用する場所によりブロックレベル要素になる場合とインライン要素になる場合があります。