HTML5より前の時代、すべての要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分類されていました。これは、ブラウザが画面上にどのように配置するかを決定する重要なルールでした。
見出し、段落、リストなど、文書の骨組みとなる要素です。
<div>, <h1>~<h6>, <p>, <ul>, <table> など文章の一部として扱われる要素です。
<span>, <a>, <img>, <strong>, <em> など| 項目 | ブロックレベル | インライン |
|---|---|---|
| 配置 | 縦に並ぶ(改行される) | 横に並ぶ(改行されない) |
| 幅・高さ | 指定可能(width / height) | 中身に依存(指定不可) |
| 余白 | 上下左右すべて指定可能 | 上下の余白(margin)が効かない |
| 主な用途 | レイアウト、構造化 | 文章の装飾、リンク |
当時のルールでは、「インライン要素の中にブロックレベル要素を入れてはいけない」という決まりがありました。
<p><a href="#">リンク</a></p><a href="#"><p>リンク</p></a>※HTML5ではこのルールが緩和され、<a>タグの中に <div> や <p> を入れることが可能になっています。
CSSで display: block; や display: inline; を使って表示形式を切り替えるとき、この基礎知識があると思い通りのレイアウトが作れるようになります。現代のWeb制作でも、この「振る舞い」の違いを理解することは非常に重要です。