HTMLの要素について

  1. 要素について
  2. ブロック要素とインライン要素
  3. 要素の包含関係とイメージ

要素について

文書をWebサイトとして公開するに当たってしなければならない事の一つに マークアップ があります。これは文章の持つ本来の意味をコンピュータが識別できるようにする物である事は既に 説明 した通りです。このマークアップに使用するものを HTMLタグ と言いますが、このHTMLタグには様々な種類が存在し、その使用できる種類は DTD によって決まっています。

HTMLタグって <html> <head> <title> <body> とかの事ですよね？

そうです。これまでは極少数の要素しか紹介してきませんでしたね。

ブロック要素とインライン要素

body要素 内で使用できる要素の殆どは大きくブロック(レベル)要素とインライン(レベル)要素の二つに分ける事が出来ます。その意味や使い分けは以下の通りです。

ブロック要素
既に登場した見出し要素 や p要素 などのように、文書を構成する上での基本的な構造の基となるもので、それ自体で一つの意味を成しています (タグ自体には意味はありません)。ブロック要素の内容には、他のブロック要素やインライン要素を含むことができます。しかしインライン要素の中にブロックレベル要素を置くことはできません。

主な視覚系ブラウザではウィンドウサイズの幅をいっぱいに使い、またその前後に改行が入ります。ただし、これは UA が勝手に解釈した挙動であり、要素自体にそのような表現をするという決まりや意味はありません。

主なブロック要素
インライン要素
主にブロック要素の内容として用いられます。それ自体が文書を構成するための構造の一部となる事はなく、ブロック要素内で、筆者が意図した何らかの意味を与える為の要素です。既に登場した a要素 や img要素 などが例です。そしてインライン要素の内容にはテキスト (文字データ) や、他のインライン要素を含むことができます。繰り返しますがブロックレベル要素を含むことはできません。

つまり 【 <p>これは<a href="link.html">リンク</a>である</p> 】 は正しいが、【 <a href="link.html"><p>これはリンクである</p></a> 】 は誤りであるという事です。

主なインライン要素
どちらにも成り得る要素
その他の要素

ブロック要素の中にはインライン要素を入れられるけど、インライン要素の中にはブロック要素は入らないっと。ん？だったらインライン要素の中には何が入るんですか？

インライン要素の中にはインライン要素、主にテキスト (文字データ) が入ります。

インライン要素の中にインライン要素が入るのなら、ブロック要素の中にブロック要素を入れてもいいのですか？

それは良い場合と駄目な場合があります。例えば <div><p>内容</p></div> は構いませんが、<p><div>内容</div></p> は不可です。 <p><address>内容</address></p> も不可です。

違いはどうやって見極めるのですか？

やっぱりそうきますよね。それにもやはり決まりがあるのですが…、次の項目へどうぞ。

えっ？逃げるのですか？

そ、そんな事はないのですが…

要素の包含関係とイメージ

先ずはブロック要素もインライン要素もすべて大きさの違う (一箇所だけ蓋の開いた) 箱だとイメージして下さい。ブロック要素は中にインライン要素を含むことができ、インライン要素は中にブロック要素を含むことができないので大きさは ブロック要素の方がインライン要素よりも大きい箱というようになります。例えば主要な要素の中で一番大きな箱は <html>〜</html> という事になります。ディスプレイ (画面) 全体を大きな箱と考えて、その中にそれよりも少しだけ小さい <html>〜</html> という箱が入っていると思って下さい。見ている方向は蓋の開いている側からです。(開いている部分を上にして箱を置いてあるのだとしたら、上から覗き込んでいる様なイメージです。)

このボックス (箱) のイメージは CSS を用いるのにとても重要な概念になりますので覚えて下さい。

次に <html> の箱の中にはどの要素が入っているか。それは <head要素> と <body要素> ですね。これが <html> の次に大きな箱という事になります。ただし <head要素> は特殊な箱なので、他の箱と大きさを比べたりしないで下さい。この <head要素> の箱には決まった <meta要素> や <title要素> <link要素> などしか入りません。

<body要素> の直下にはブロック要素しか置けないという決まりがあります。つまりインライン要素 (もちろんテキストも) が何のブロック要素にも含まれずに登場する事は有り得ません。

多くの場合で、ある大きさの箱の中に同じ大きさの箱は入れることが出来ません。つまり <html要素> の中に <html要素> は入ることはありませんし、<body要素> の中に <body要素> が登場する事もありません。主な要素で言えば <p>ここが<p>内容</p>です</p> などとなる事はありません。また、一つのHTML文書には一つの <html要素> から成り立っているので、<html要素> <head要素> <body要素> が一回ずつしか登場しないのも当然という訳です。

そして <body要素> 内におけるブロック要素の包含関係ですが、これには細かな決まりがあり、簡単に判断基準を説明する事は難しいのです。それぞれの場合について覚えていく必要があるのです。

インライン要素だけを含むことのできるブロック要素
以下のブロック要素は他のブロック要素を含むことが出来ません。

つまり <h1><p>見出し<p></h1> は不可で、 <h1>見出し</h1> は可ということです。

直下にはブロック要素を含むブロック要素
以下のブロック要素は直下にインライン要素を含む事は出来ず、必ず他のブロック要素を要します。

つまり <div>ここが内容</div> は不可（一概にはそうは言えないのですが）で、<div><p>ここが内容<p></div> は可ということです。

含むことの出来る要素が決まっているブロック要素
以下のブロック要素は直下に置ける要素が決まっています。

ul要素 や ol要素 は必ず li要素 を含み、dl要素は dt要素 と dd要素を含みます。

なんだかよくわかりませーん。

そうですね。使っているうちに少しずつ決まりがわかってくると思います。とりあえずは body要素の直下にはインライン要素を置けない事と、インライン要素の中にブロック要素を含めない事を覚えておいて、他の細かい説明は、一つ一つの要素について詳しく書いてあるページを参考にして下さい。

[ トップページ ] [ 目次 ] [ ページの先頭 ] [ 前項目 ] [ 次項目 ]

Google