HTMLの基本構造

 
  
ホーム > HTML Note > HTMLの概要 > HTMLの基本構造

W3Cの仕様に従った正当なHTML文書の構造

1つのHTML文書は、以下の3つの部分から構成されます。
1. HTMLのバージョン
2. 文書ヘッダ
3. 文書本体
空白文字(space、new line、tab、及びコメント)は、上記3部分のどこに記述しても構いません。

W3Cの仕様に従った正当なHTMLの基本構造は、まず最初にHTMLのバージョンを示す<!DOCTYPE>を宣言し、ドキュメントルート要素である<html>-</html>の間に、<head>-</head>で囲まれた文書ヘッダと<body>-</body>で囲まれた文書本体が存在する形式になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>タイトル</title>
<!--文書ヘッダ-->
</head>

<body>
テキスト
<!--文書本体-->
</body>
</html>
文書ヘッダには、文書情報などのブラウザに表示されない要素を、文書本体には、インライン要素ブロック要素特殊な要素などのブラウザに表示される要素を配置します。

ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのもやむを得ないでしょう。
 

基本構造

基本構造は、ドキュメントルート要素である<html>-</html>の間に<head>-</head>で囲まれた文書ヘッダと<body>-</body>で囲まれた文書本体が存在する形式です。
<html>
<head>
<title>タイトル</title>
<!--文書ヘッダ-->
</head>

<body>
テキスト
<!--文書本体-->
</body>
</html>
文書ヘッダには、文書情報などのブラウザに表示されない要素を、文書本体には、インライン要素ブロック要素特殊な要素などのブラウザに表示される要素を配置します。
空白文字(space、new line、tab、及びコメント)は、上記3部分のどこに記述しても構いません。

仕様書において、HTMLのバージョンを示す<!DOCTYPE>の記述は必須ですが、ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのもやむを得ないでしょう。
 

フレームの構造

フレームでは、文書本体<body>-</body>の代わりに、ほかの文書へのリンクを持つフレーム<frameset>-</frameset>を配置します。
<html>
<head>
<title>タイトル</title>
<!--文書ヘッダ-->
</head>

<!--フレーム-->
<frameset cols="150,*">
  <frame src="source1.htm" name="menu">
  <frame src="source2.htm" name="content">
</frameset>
</html>
文書ヘッダには、文書情報などのブラウザに表示されない要素を配置します。
空白文字(space、new line、tab、及びコメント)は、上記3部分のどこに記述しても構いません。

仕様書において、HTMLのバージョンを示す<!DOCTYPE>の記述は必須ですが、ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのもやむを得ないでしょう。
 

HTML4.01のバージョン

W3Cの仕様に従った正当なHTML文書には、どのHTMLのバージョンなのかを示す宣言<!DOCTYPE>があります。この宣言(document type declaration)が、どの文書型定義(DTD: document type definition)を用いるのかを示します。

HTML4.01には、3つの文書型定義(DTD)が用意されています。文書作成者は文書に、下記のいづれかの文書型宣言<!DOCTYPE>を記述しなければなりません。文書型定義(DTD)は用途によって宣言が異なります。

HTML 4.01 Strict DTD (厳密型)


推奨しない要素や属性、またフレーム関連の要素や属性を含みません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD (移行型)


厳密型の要素や属性に加え、推奨しない要素や属性を含みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD (フレーム型)


移行型の要素に加え、フレーム型の要素を含みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

W3Cでは、文書作成者に対して「HTML 4.01 Strict DTD (厳密型)」に適合する文書の作成を推奨しています。

文書作成者は、文書型宣言<!DOCTYPE>を記述する際、どのバージョンを指定するかによってブラウザの表示モードが切り替わることに、細心の注意を払う必要があります。

ブラウザの独自属性を使用するためにHTMLの仕様書に従うことができない場合や、仕様書や表示モードなどがよくわからない場合、あるいは仕様書に従うつもりがない場合などは、<!DOCTYPE>の記述を避けるのが無難でしょう。
 

互換モード、ほぼ標準モードと標準モード

Windows版IE6、Netscape6(Mozilla, Firefoxを含む)、Opera7などや、Mac版IE5以降のブラウザには、文書型宣言<!DOCTYPE>によって「互換モード」「ほぼ標準モード」「標準モード」といった3つの表示モードに切り替わる、「Doctypeスイッチ」と呼ばれる機能が存在します。
1.「互換モード」(Quirks Mode)
互換モードは、Web標準(W3Cの仕様)が定まる以前からの表示方法なので、バグや独自解釈を含め、旧来のブラウザの表示方法と互換性のある表示を行い、文法的なミスもある程度カバーして表示する傾向があります。
2.「ほぼ標準モード」(Almost Standards Mode)
ほぼ標準モードと、標準モードとの違いは1点だけです。ほぼ標準モードにおけるテーブルセル内のvertical-alignプロパティの初期値は、互換モードと同じbottomになっています。標準モードにおけるテーブルセル内のvertical-alignプロパティの初期値はbaselineです。
3.「標準モード」(Standards Mode)
標準モードでは、Web標準(W3Cの仕様)に沿った表示を行い、文法的な誤りは基本的に無視されます。

「互換モード」でカバーされる文法的ミス


1. HTMLで色指定に#がない(bgcolor=99ccff)、2. CSSで色指定に#がない(color:99ccff)、3. CSSで数値に単位がない(margin:10)、4. CSSで数値と単位の間に空白文字がある(line-height:1.2 em)、5. CSSでキーワードが""で囲まれている(color:"blue")など。

表示モードによる違い


  1. IEとOperaの「互換モード」では、widthプロパティとheightプロパティの値がWeb標準仕様のボックスの内容領域の値を示さず、border、paddingプロパティを含む周辺領域の値を示します(*1)。「標準モード」ではボックスの内容領域の幅と高さを示します。

  2. IEとOperaの「互換モード」における文字の標準サイズは、font-size:smallであり、Web標準の文字の標準サイズfont-size:mediumと異なります。「標準モード」では、font-size:mediumになります。

  3. IEの「互換モード」では、margin:autoによるテーブルなどのブロック要素のセンタリングが行われません。また、img要素におけるpaddingプロパティはサポートされていません。

  4. IEでは常に、text-align:centerでCSSの適用対象でないブロック要素がセンタリングされます。

  5. 「ほぼ標準モード」では、テーブルセル内のvertical-alignプロパティの初期値が、互換モードと同じbottomなので、セル内に配置した画像が、隙間なく表示されます。一方、「標準モード」では、テーブルセル内のvertical-alignプロパティの初期値がbaselineなので、画像の下部にアルファベットのbaseline以下の領域分の隙間が生じます。

  6. 「標準モード」においては、テーブル内の記述にテーブル外部のスタイルが継承されます。また、「互換モード」でカバーされる文法的な誤りは、基本的に無視されます。

*1 現行のOpera9においては改善されています(2007/01/10)。
 
関連項目:
トップページ HTML Note ページトップ
 2006/06/22発行 2009/09/01更新