HTMLの基本構造

●親要素と子要素

HTML文書では、すでにタグがつけられた要素の中で別のタグを指定し、さらに情報を追加することもできます。入れ子にする場合、終了タグが互い違いにならないよう、より内側のタグから順番に閉じていきます。

例) 間違った記述 〈p〉タグと要素は〈em〉別のもの〈/p〉です。〈/em〉

正しい記述  〈p〉タグと要素は〈em〉別のもの〈/em〉です。〈/p〉

このような場合、外側にあって、別の要素を含む要素を「親要素」、内側で親要素に含まれている要素を「子要素」と言います。上の例では、p要素が親要素に、em要素が子要素になります。

●HTMLの木構造

HTMLの要素が親要素と子要素の関係を作ることからわかるように、HTML文書は、その全体がHTML要素を基点(ルート)とする階層構造担っています。このような構造を木構造(ツリー構造)とも言います。

木構造では、親要素と、子要素のほか、次のような表現も使われます。

  • ・祖先要素…ある応訴を含み、その要素よりも上位にある要素。このうち、一つ上の階層の要素が親要素になります。
  • ・子孫要素…ある要素が含む、その要素よりも下位にある要素。このうち、一つ下の階層の要素が子要素になります。
  • ・兄弟要素…木構造上、同じ親を持ち、同じ階層に位置する要素。

この考え方は、CSSの「包括ブロック」や「継承」という性質を考える際にも、とても重要になります。

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

要素の多くは、より詳しくはブロックレベル要素とインライン要素に大別され、ほかのどの要素を入れられるか(子要素にできるか)などの決まりがあります。

例えば、文章にリンクを設定したいとき、一般的なブラウザでは下の例のどちらで記述しても同じように表示され、リンクもきちんと機能します。しかし、HTML4.01では、インライン要素のa要素にブロックレベル要素のp要素を含めることはできないという決まりがあるため、一つ目の書き方は誤りということになります。正しくは、二つ目の書き方のようにp要素の中にa要素を入れて表します。

間違った記述 〈a〉〈p〉HTML4.01仕様書へのリンク〈/p〉〈/a〉

正しい記述  〈p〉〈a〉HTML4.01仕様書へのリンク〈/a〉〈/p〉

また、文書型宣言がstrict DTDの場合、body要素の中に直接記述できるのは、ブロックレベル要素、script要素、ins要素、del要素だけです。インライン要素は必ず何らかのブロックレベル要素に含まれている必要があります。

間違った記述

〈body〉

〈a〉HTML4.01仕様書へのリンク〈/a〉

〈/body〉

正しい記述

〈body〉

〈p〉〈a〉HTML4.01仕様書へのリンク〈/a〉〈/p〉

〈/body〉

こうした決まりを内容モデル(コンテンツモデル)と言い、文書型定義で詳細に定義されています。

 

・ブロックレベル要素

見出しや段落のように、文書の骨組みとなる一つのまとまりを表す要素です。

ほかのブロックレベル要素や、インライン要素を含むことができます。一般的なブラウザでは、前後が開業されて表示されます。

address、blockquote、dir、div、dl、fieldset、form、h1~h6、hr、noscript、noframes、ol、p、pre、table、ul

・インライン要素

文章のある一部にのみ、意味づけをするような要素です。文字列やほかのんライン要素を含むことができますが、ブロックレベル要素を含むことはできません。一般的なブラウザでは、前後に改行ははいりません。インライン要素の中には、置換要素と呼ばれる要素があります。

a、abbr、acronym、applet、b、bdo、big、br、button、cite、code、dfn、em、i、iframe、img、input、kbd、label、map、object、q、samp、script、select、small、span、strong、sub、sup、textarea、tt、u、var

・置換要素

報時される際にその要素の内容が指定された内容と置き換わるような種類の要素です。

button、iframe、img、input、object、select、txtareaなど