HTML4.01の基本:要素の分類

HTML5より前の時代、すべての要素は大きく分けて「ブロックレベル要素」「インライン要素」の2つに分類されていました。これは、ブラウザが画面上にどのように配置するかを決定する重要なルールでした。

1. ブロックレベル要素 (Block-level Elements)

見出し、段落、リストなど、文書の骨組みとなる要素です。

これはブロックレベル要素です。横幅いっぱいに広がります。
次の要素は自動的に改行されます。

2. インライン要素 (Inline Elements)

文章の一部として扱われる要素です。

文章の中に インライン要素 を入れると、改行されず に横に並びます。

比較まとめ

項目ブロックレベルインライン
配置縦に並ぶ(改行される)横に並ぶ(改行されない)
幅・高さ指定可能(width / height)中身に依存(指定不可)
余白上下左右すべて指定可能上下の余白(margin)が効かない
主な用途レイアウト、構造化文章の装飾、リンク
?? 重要な入れ子ルール(HTML4.01当時)

当時のルールでは、「インライン要素の中にブロックレベル要素を入れてはいけない」という決まりがありました。

※HTML5ではこのルールが緩和され、<a>タグの中に <div><p> を入れることが可能になっています。

なぜ今これを学ぶのか?

CSSで display: block;display: inline; を使って表示形式を切り替えるとき、この基礎知識があると思い通りのレイアウトが作れるようになります。現代のWeb制作でも、この「振る舞い」の違いを理解することは非常に重要です。