<body>間で扱える要素には大きく分けて2種類あり、定義する領域がそれぞれ違う。
それぞれの領域をしっかりとマスターすれば充実し充実したHTML生活が認可されることは間違いない。(某B語)
なお、HTML 5においては、「インライン要素」「ブロック要素」「リスト要素」に代わる、
「カテゴリ」と「コンテンツモデル」 という概念によって、「インライン要素」「ブロック要素」「リスト要素」的なものを分類しています。
概念こそ異なりますが、
HTMLを記述するうえでは「インライン要素」「ブロック要素」「リスト要素」として意識しておいても大差ないため、
このページでも「インライン要素」「ブロック要素」「リスト要素」という文言を使用して説明しています。
早い話、文字です。文字だけを定義する要素で、ピンポイントで扱うようなものとなっています。
代表的な要素に<span>、Transitionalなら<font>などもあります。
それ以外に<strong>・<em>・<b>・<i>・<del>・<ins>・<s>・<a>など、
文字修飾やハイパーリンクなどが大体これです。
以下にインライン要素の領域を示します。
扱う領域がよくわかるように、スタイルシートを使って背景色を挿入しています。
インライン要素はこのような扱いのため、センタリングや右寄せなど、文字位置の扱いまでを変更することはできない。
開始と終了までを1つの区画として扱います。って、よくわかりませんね。
まあ、とりあえず、例を見てくださいという話で。
<p>前後にスペースが開くことで有名なこのタグもブロック要素。 スタイルで定義すればスペース幅も自在になる。それはもちろん、ほかのブロック要素もしかり。</p>
| <table><tr><td>もちろん、この要素も。ただし、幅は文字長に左右される。</td></tr></table> |
(通常の文字を含めた)インライン要素は、
すべてブロック要素でくくらなければならないという決まりがあるため、必須の要素となっている。
ブロック要素には代表的な要素に<div>・<p>・<table>(<tr>・<td>)などがあります。
そして、ご覧のように、インライン要素はインライン要素に、ブロック要素はブロック要素に入れ子にすることができます。
インライン要素はすべてブロック要素でくくらなければならないという決まりがあるという以上、
ブロック要素はインライン要素を入れ子にすることができますが、その逆はできません。たとえば……
さらにややこしいことに、<p>要素はブロック要素ですが、
入れ子にできるのはインライン要素だけという決まりがあります。
<p>おｋ</p>
</div><p> <span>インラインはおｋなのでこれもおｋ</span> </p>
まあ、<p>は「段落」、
つまり、開始から終了までを1つの文章(つまりインライン)のまとまりを定義するための要素なのでわからなくもないですが、
なんだか面倒くさいですね。
ブロック要素の親戚で、開始と終了までを1つの区画として扱いますが、要素自体がリストを定義するものです。
リスト要素なので、そのとおり、<dl>(<dt>・<dd>)・<ul>(<li>)・<ol>(<li>)がそうです。
以下にリスト要素の領域をそれぞれ示します。
例によって扱う領域がよくわかるように、スタイルシートを使って背景色を挿入しています。
ご覧のとおり、リストの開始と終了までを定義する<dl>・<ul>・<ol>はリスト全体を領域としている(当たり前だけど)。
その振る舞いはやっぱりブロック要素に似ているとも取れなくもない。
<dt>・<dd>も基本的にはタグの効果どおりの領域だけれども、
これもブロック要素<div>と同じで、ウィンドウの右端まで領域を持つので、必要なら横幅を定義する必要が出てくると思う。
<li>は実は、定義するのは内容の部分だけなので、頭のマーク部分までは定義されないという謎が。
ただし、テキスト色など、一部の影響だけは受けるという更なる謎が。
余白をつける場合などは左余白の扱いが<dd>と同じくつめられている(インデントされている、どのブラウザでもだいたい似たような動作のハズ)ので、くれぐれも注意が必要。