正しいHTMLの作法

戻る

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

HTML3.2のDTD(仕様書)ではいまひとつあいまいだったエレメントの相互関係が、HTML4.0では「ブロックレベルエレメント」と「インラインエレメント」という2個の概念を取り入れることでより明快になりました。平たく言えば、タグをネスティングするときの規則が分かりやすくなりはっきりした、ということです。

インラインエレメントとは段落内で文字や文字列を修飾するもので、次のものがあります。

テキスト
文字実体参照を含む、文字や文字列。

フォントスタイルエレメント(1個1個の文字と、その集合体を修飾するもの)
TT,I,B,U,S,STRIKE,BIG,SMALL

フレーズエレメント(単語と単語列に意味付けをするもの、意味付けとは、その単語の論理的意味の概要を表すこと)
EM,STRONG,DFN,CODE,SAMP,KBD,VAR,CITE,ABBR

スペシャルエレメント
A,IMG,APPLET,OBJECT,FONT,BASEFONT,BR,SCRIPT,MAP,Q,SUB,SUP,SPAN,BDO,IFRAME

フォームコントロールエレメント
INPUT,SELECT,TEXTAREA,LABEL,BUTTON


ブロックレベルエレメントは、大雑把に言えば段落を作ったり、終了タグで自動的に改行されてしまうものです。次のものがあります。

段落
P

見出し
H1,H2,H3,H4,H5,H6

リスト
UL,OL,DIR,MENU

プリフォーマット
PRE

その他
DL,DIV,CENTER,NOSCRIPT,NOFRAMES,BLOCKQUOTE,FORM,ISINDEX,HR,TABLE,FIELDSET,ADDRESS

インラインエレメントにもブロックレベルエレメントにも属さないものもいくつかあります。
LI,DT,DD,TR,TD
など、固有のエレメント内でのみ作用するエレメント

エレメントのコンテントとして、ブロックレベルエレメントしか許されていない、というエレメントは、今のところありません。将来的にはBODYエレメントや、TBODYエレメントがそうなる予定です。
これはどういう意味かといえば、BODYタグの次にいきなりテキストを書いてはいけない、ということです。必ず、ブロックレベルエレメント(たとえばPエレメント)が必要になるということです。

ブロックレベルエレメントの説明をします。
ブロックレベルエレメントの中で、Pエレメントは特殊なものです。
コンテントがインラインエレメントに限定されているからです。さらに、終了タグ</P>が省略できます。この両者はは関連した特徴ですが、その関連性については後述します。
たとえば、次の例を見てもらいます。

表示したいイメージ

パラグラフの始まり始まり
水平線
水平線で区切った後のパラグラフはどうなるか

<BODY>
<P align="center">パラグラフの始まり始まり
<HR>
水平線で区切った後のパラグラフはどうなるか
</P>
</BODY>

<HR>はブロックレベルエレメントです。
Pエレメントはコンテントにブロックレベルエレメントをいれることはできません。
Pエレメントは終了タグを省略することができます。

それゆえ、上記のソースは次のように書きかえられるはずですね。

<BODY>
<P align="center">パラグラフの始まり始まり</P>
<HR>
水平線で区切った後のパラグラフはどうなるか
</P>
</BODY>

すると、水平線後のパラグラフに、開始タグが欠落していることが分かります。
HTMLでは意味のないタグは無視されるので、最後の終了タグ</P>は無視されます。よって、次のように表示されてしまいます。

パラグラフの始まり始まり
水平線
水平線で区切った後のパラグラフはどうなるか

正しくは次のように書きましょう

<BODY>
<P align="center">パラグラフの始まり始まり</P>
<HR>
<P align="center">水平線で区切った後のパラグラフはどうなるか
</P>
</BODY>

もちろん、終了タグは省略してよいです。

Pエレメントがブロックレベルエレメントを含むことができないことは、とても重要なことです。
どこが重要なのでしょうか。

これについては、西欧言語文化と日本語文化の差から説明しなければなりません。
パラグラフ(paragraph)は日本語訳すると、段落と訳されるのが普通です。
昔国語の時間に、形式段落と意味段落を学んだのを覚えていますか。形式段落とは、改行することなのに対し、意味段落は改行して意味も変わることです。ところが、現在の日本語では、形式段落と意味段落は混ざって使われています。
さて、これに対し、西欧言語の段落ですが、これは、行間を空けて段落を表します。改行は段落にはなりません。日本語では空行を挟むと、大段落(とでもいいましょうか)を作ることになり、大きく意味が変わります。

Pエレメントは、パラグラフの頭文字なので、西欧言語の段落を意味します。それゆえ、空行を挟むことになります。残念ながら日本語の段落を表すエレメントはHTMLでは定義されていません。
とりあえず、われわれ日本人は、Pエレメントを使って段落を表していきましょう。意味段落毎に、Pエレメントを使うとよいでしょう。

一つのページを構成する要素として次のようなものが考えられます。ブロックレベルエレメントの観点から要素を抽出してみましょう。つまり、自動的に改行されるエレメントで考えてみる、ということです。
以下の9種類が考えられます。HR,Pエレメント以外はすべて終了タグが必須です。

ADDRESS 筆者の名前やプロフィール、メールアドレスなど
Hn ページタイトルや見出し
UL,OL リスト
TABLE 表
P 段落
HR 水平線
BLOCKQUOTE 引用文
FORM フォームオブジェクト
DL 定義語と定義内容(辞書などを想像してください)
その他

この中で、インラインエレメントしか含むことのできないものを挙げます。
ADDRESS
Hn
P
(BLOCKQUOTE)将来的に、インラインエレメントのみがコンテントとなる。

固有のエレメントしか含むことのできないエレメント
UL,OL
TABLE
FORM
DL

特殊なエレメント
HR

これら、ブロックレベルエレメントを、センタリングしたり、右寄せするにはどうするのでしょうか。
それには、ブロックレベルエレメントのDIVエレメントのalign属性を使います。
DIVエレメントには特に意味はありません。いろいろなものを格納するコンテナの役目をするのみです。
ところが、DynamicHTMLのスタイルコンテナに使ったり、右寄せやセンタリングに使えるなど、かなり重要なエレメントとなっています。
なお、CENTERエレメントは、<DIV align="center">と同じ意味です。ネットスケープが勝手に作ったエレメントだったのですが、HTML3.2から、しぶしぶW3Cが採用したものです。

インラインエレメントは、基本的に好きなように書いてよいです。ただし、ネスティングには注意しましょう。
次のようなネスティングをするのはあまりよくありません。
<BIG>いろいろな<B>文字列</BIG>に修飾</B>をつける
互い違いにネスティングするとブラウザによってはご認識をしてしまいます。手間がかかるかもしれませんが次のように書きましょう。
<BIG>いろいろな<B>文字列</B></BIG><B>に修飾</B>をつける
挟みこむようにネスティングをすれば安全です。
また、<BR>を間に挟んだネスティングも避けたほうが無難です。

戻る