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

HTMLに使う要素名のクラス分け「ブロックレベル要素」と「インライン要素」について説明しましょう。
本来、もっと早く（BODYが出た時）説明した方がいいのでしょう・・・しかし、ある程度ＨＴＭＬをわかった時点の方が話しやすいこともあり今回になりました。

では何故、ブロックとインラインに分かれているのか。
簡単にいうと、<BODY>要素の中で、一塊にする領域（器）や要素に意味のある領域（器）を表す要素を「ブロックレベル要素」と、ブロックレベル要素の中に入り文書（行）や部分を構成したり、スタイル（見た目）の役割をする要素「インライン要素」と呼びます。

トレイ（お盆）にのせた数個のティーカップを思い浮かべてください、(表現は良くないかも知れませんが）
トレイ（お盆）が<BODY>
ティーソーサー（皿）カップが<ブロック要素>
ティースプーンが、INS要素・DEL要素
カップが、<インライン要素>
中身の紅茶がテキストみたいなものです。

◆　要素の使い分け

ブロック要素は、<BODY><ブロック要素>～～～</ブロック要素></BODY>に囲まれた<BODY>タグの直下（触れる）にタイプすることが許されています。

インライン要素は、
<ブロック要素><インライン要素>～～～</インライン要素></ブロック要素>のように<ブロック要素>に囲まれたタグの内にタイプしなければなりません。ですので<BODY>タグの直下（触れる）にタイプすることが許されないと言うことです。また、基本的にインライン要素に囲まれた中にブロック要素を使用することは出来ません。

悪い例：
<BODY><A HREF="URL">～～～</A></BODY>
<A HREF="URL"><H1>～～～</H1></A>

良い例：
<BODY><DIV><A HREF="URL">～～～</A></DIV></BODY>
<H1><A HREF="URL">～～～</A></H1>

余談：今後（ＸＨＴＭＬ）の為に、<BODY>直下のブロックレベル要素の外にインライン要素や行だけを構成したりすることはやめましょう。

下の図を見てください。
要素図

通常、このような構成が本来のＨＴＭＬとして「BODY 要素内の骨組み」の良い例に扱われます。
“ルールを守れば”ブロックレベルの中は多種多様、ブロックレベルの中にあればインライン要素と文字（テキスト）の構成は、あなたのセンスです。また、ブロックレベルの中にブロックレベルを置く場合もあります。

ブロックレベルの親要素直下でしか使えないファミリー（チーム）系の要素もあります。ファミリー要素は、必ずブロックの親要素で囲むことになっています。

何の要素にどの要素が、入れて良いのか悪いのかと言う「包括要素」という基準がシッカリ決まっているので、詳しくは「基本要素一覧＞要素一覧表」をご覧下さい。

◆　インラインの要素

インラインの要素の種類で一般的に使っているものだけ挙げましょう。
文章（テキスト）｜A ｜ABBR｜ACRONYM｜APPLET｜B｜BASEFONT｜BDO｜BIG｜BR｜BUTTON｜CITE｜CODE｜DNF｜EM｜FONT｜I｜IFRAME｜IMG｜OBJECT｜Q｜S｜SAMP｜SCRIPT｜SELECT｜SPAN｜STRIKE｜STRONG｜SUB｜SUP｜TEXTAREA｜TT｜SMALL｜U｜VAR
（余談：INS要素・DEL要素は、インライン側・ブロックレベル側、両方使えます。）

◆　ブロックレベルの要素

ブロックレベルの要素の種類で一般的に使っているものだけ挙げましょう。
ADDRESS｜BLOCKQUOTE｜CENTER｜DIR｜DIV｜DL｜FIELDSET｜FORM｜H1～H6｜HR｜ISINDEX｜MENU｜NOFRAMES｜NOSCRIPT｜OL｜P｜PRE｜TABLE｜UL
（余談：INS要素・DEL要素は、インライン側・ブロックレベル側、両方使えます。）

◆　ファミリー（チーム）系要素

この他に、親要素の下でしか機能しないファミリー要素もあります。
例えば、下記等が挙げられます。

リスト

親要素 OL｜UL　（ブロックレベル）

ファミリー要素
LI

親要素 DL　（ブロックレベル）

ファミリー要素
DT｜DD
テーブル（表）

親要素 TABLE　（ブロックレベル）

ファミリー要素
TR｜TH｜TD｜CAPTION｜COLGROUP｜COL｜TBODY｜THEAD｜TFOOT
フォーム

親要素 FORM　（ブロックレベル）

ファミリー要素
FIELDSET｜LEGEND｜LABEL｜INPUT｜SELECT｜OPTGROUP｜OPTION｜TEXTAREA｜BUTTON

引用文や文書の削除・挿入の要素

タグ解説

BLOCKQUOTE

引用（長い文章）：ブロックレベル

<BLOCKQUOTE>～</BLOCKQUOTE>で囲んだ範囲の内容が、ほかの文献やサイトから引用でした文書であることを定義します。使用法は、一章ごとに使うのが普通です。

例：
<BLOCKQUOTE>
<H1>夏目漱石</H1>
<H2><CITE>草枕</CITE></H2>
<P>
<Q>山路を登りながら、こう考えた。
 智に働けば角が立つ。
 情に棹させば流される。
 意地を通せば窮屈だ。
 兎角に人の世は住みにくい。
 住みにくさが高じると、安いところへ引き越したくなる。
 どこへ越しても住みにくいと悟った時、詩が生まれて、画ができる。 
</Q>
</P>
</BLOCKQUOTE>

表示時には左右に余白（インデント）を入れて表示されます、その表示効果（レイアウト）を得るために引用でもない場所に利用するという、間違った利用法をしているページ（サイト）も時々見受けられます。見栄えのためならスタイルシートを使いましょう。

Q

引用：（短い文章）インラインレベル

短いインライン用の範囲を指定します。文章中の短い行の一部に要素の「Q」を指定します。<Q>夏目漱石「草枕」</Q>で囲むと、「草枕」「”」が、付いたりするWebブラウザもあります。

実行例：
私が最近読み返した本で、
“夏目漱石－「草枕」より－
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。”と出て来るが、やはり学生の時の思いとは違い・・・人生を味わった結果なのか・・・

CITE

引用句：論理的形状
ソース：「<cite>草枕</cite>」
実行例：「草枕」

章句･判例･例証の引証，見出しの引用で、書籍、記事、雑誌、等の比較的短い文章やタイトル等に使われています。また、引用もとの書籍名、著者名などを示します。（斜体で表示されます。）

BLOCKQUOTE要素と組で使って引用を示したり、参考文献一覧などをマークアップするのに使います。

引用文そのものをマークアップするのには、CITE要素ではなく Q要素を使うべきです。

INS・DEL

文書が修正されたところを表す要素：

　INS は文章挿入された部分を表現し、強調表現されます。
DEL は文章削除された部分を表現し、打ち消し線を伴って表現されます。

これらは変わり種の要素です。BODY要素内のどこにでも書くことができ、その場所によってブロック要素としてもインライン要素としても振る舞うことが出来るのです。

P要素の中にはインライン要素しか入れられませんから、P の中の INS や DEL はインライン要素として振る舞います。

　【←BACK ┃NEXT→】