勝手にHTML4.0講座 - 構造 ヘッダ
1.HTML文書構造
HTML4.0文書は、次の3つの部分から構成されます。
- 文書型宣言(HTMLのバージョン宣言)
- ヘッド部(HEAD要素)
- 本体(BODY要素かFRAMESET要素)
各部の前後に空白文字(スペース タブ文字 新行文字 コメント)が入ります。
2.文書型宣言
正しいHTML文書を作る場合には、どのバージョンのHTML仕様に準拠するのかを明記する必要があります。
文書型宣言という表記によって、どんな文書型定義(DTD:Document Type Definition)に従った文書なのかを示します。
HTML4.0仕様には3種類のDTDが含まれ、どれに準拠するのかを記さねばなりません。各DTDで使える要素には以下の差があります。
- Strict DTD:フレームを使わず、推奨しない要素･属性を全く使わない
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
- Transitional DTD:フレームを使いません
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
- Frameset DTD:制限なし
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
各々の文書型宣言に付随する URI によって、HTML文書のDTDや実体セットがどうなっているかをダウンロードして確認することが可能です。
3.<HTML>要素
開始タグ: 省略可能
終了タグ: 省略可能
| 属性 = 属性値 | 説明 |
| version = 文字列 | HTML文書がHTMLのどのバージョンで記されているかを示します。ただし文書型宣言によって記すのが正当です。[非推奨] |
| その他 | lang , dir |
文書型宣言の後に続けて書きます。HTML文書の本体部分です。
4.<HEAD>要素
開始タグ: 省略可能
終了タグ: 省略可能
| 属性名 = 属性値 | 説明 |
| profile = URI | メタ情報を定義しているプロファイルの所在をしめすものです。複数の場合は空白文字で区切って列記します。 |
| その他 | lang , dir |
HEAD要素には、HTML文書についての情報が記されます。例えば、文書の表題、キーワード、その他文書に関することです。
基本的にHEAD要素内は表示されません。
5.<BODY>要素
開始タグ: 省略可能
終了タグ: 省略可能
| 属性名 = 属性値 | 説明 |
| background = URI | 背景画像データの所在を示します。背景画像は基本的に、文書の背景に敷き詰められます。[非推奨] |
| text = 色 | 前景色・文字色を指定します。[非推奨] |
| link = 色 | 未訪問のリンク色を指定します。[非推奨] |
| vlink = 色 | 既訪問のリンク色を指定します。[非推奨] |
| alink = 色 | 選択中のリンク色を指定します。[非推奨] |
| bgcolor = 色 | 文書全体の背景色を指定します。[非推奨] |
| 内在イベント | onload , onunload , onclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , title , style , lang , dir |
文書のボディー部が、文書の内容そのものです。ただし文書内容は様々な方法で再生されます。
視覚系ブラウザの場合、文字や画像等が表示されますが、音声出力環境では、同じ内容がただ話されるものとなります。
スタイルシートの登場により、BODY 要素における文書の見栄えをコントロールするための属性は 非推奨になりました。
フレーム機能を利用するHTML文書では、BODY要素がFRAMESET要素によって置き換えられます。
6.<TITLE>要素
開始タグ: 必要
終了タグ: 必要
| 属性名 = 属性値 | 説明 |
| その他 | lang , dir |
TITLE要素はHEAD要素内にあり、HTML文書のタイトルが入力されます。文書を利用しやすくするために、なるべくタイトルを書いてください。
6.<META>要素
開始タグ: 必要
終了タグ: なし
| 属性名 = 属性値 | 説明 |
| name = 文字列 | プロパティの名前を示します。 |
| content = 文字列 | プロパティの値を示します。 |
| scheme = 文字列 | プロパティの値を解釈する際のスキームを示します。 |
| http-equiv = 文字列 | name属性の代わりに使用されます。 |
| その他 | lang , dir |
META要素は、HTML文書についての情報を表すために利用できます（著者、失効する日時、キーワード、など）。
どのMETA要素も、「プロパティ・値」の組で指定されます。name属性がプロパティを設定し、content属性がその値を指定します。
ホームページの著者を指定
<META name="Author" content="風浪へぽぽ">
ホームページの著作権を指定。
<META name="copyright" content="(c) 1998 HEPOPO.">
ホームページの発行日を指定。
<META name="date" content="2000-01-01T00:00:00+00:00">
検索エンジンでのキーワード指定
<META name="keywords" lang="en-us" content="HomePage, HTML, Soft">
<META name="keywords" lang="jp" content="ホームページ, HTML, ソフト">
name属性の代わりにhttp-equiv属性を使うと、HTTPでの伝送の際に、HTTPヘッダ部に書き込まれます。
META要素のプロパティは特に定められていなく、たくさんあります。
ホームページの寿命(キャッシュから消される時刻)を示します。
<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">
３秒後に指定のURIへ移動します。
<META http-equiv="refresh" content="3,next.html">
HTML文書の符号化方法が[シフトJIS]であることを示しています。
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
ブラウザにキャッシュされなくなります。
<META http-equiv="Pragma" CONTENT="no-cache">
JavaScriptを使用することを宣言します。
<META http-equiv="Content-Script-Type" content="text/javascript">
CSS形式のスタイルシートを使用することを宣言します(規定値もtext/cssなのでこの場合省略可)。
<META http-equiv="Content-Style-Type" content="text/css">
scheme属性は、メタ情報についてのより詳しい情報を知らせるためのものです。
プロパティ「identifier」の値が ISBN コードを意味していることが示されています。
<META scheme="ISBN" name="identifier" content="0-8230-2355-9">
7.<LINK>要素
開始タグ: 必要
終了タグ: なし
| 属性名 = 属性値 | 説明 |
| target=目標フレーム名 | 文書を表示させるフレーム名を記します。[_blank _self _parent _top] |
| href=URI | リンクするWebリソース(HTML文書など)をURIで記します。 |
| hreflang=言語コード | リンク先文書の言語コードを指定します。(必要なときのみ) |
| type=MIMEタイプ | リンク先リソースのMIMEタイプを指定します。 |
| rel=リンクタイプ | リンク先との関係を、リンク元から見て記します。 |
| rev=リンクタイプ | リンク先との関係を、リンク先から見て記します。 |
| charset=文字コード | リンク先の文書の文字コードを記します。 |
| 内在イベント | onclick , ondbclick , onmousemove , onmousedown , onmouseup , onmouseover ,onmouseout , onkeypress , onkeydown , onkeyup |
| その他 | id , class , title , style , media , lang , dir |
この要素はHEAD要素内に書き込まれ、リンクを表します。いくつ並記してもかまいません。
次の例は、LINK要素の使用方法を示しています。文書は「Chapter2.html」という名前で、リンクされた文書との関係を rel属性が記述しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Chapter 2</TITLE>
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="Chapter3.html">
<LINK rel="Prev" href="Chapter1.html">
</HEAD>
...略...
rel属性とrev属性は、相互補完的な役割を果たします。rel属性は順方向リンク、rev属性は逆方向リンクです。
つまり、次の例の文書AとBは同じ意味になります。
文書A : <LINK href="文書B" rel="foo">
文書B : <LINK href="文書A" rev="foo">
LINK要素の活用によって、サーチエンジンに対する様々な情報提供が可能です。
- その文書の外国語版などの所在を示す
- 印刷用など、異なる出力メディア版の所在を示す
- 複数ページに渡る文書の１ページ目を示す。
(例)外国語版の所在が示されています。
<LINK title="The manual in Dutch" href="http://someplace.com/manual/dutch.html" type="text/html" rel="alternate" hreflang="nl">
<LINK title="The manual in Portuguese" href="http://someplace.com/manual/portuguese.html" type="text/html" rel="alternate" hreflang="pt">
<LINK title="The manual in Arabic" href="http://someplace.com/manual/arabic.html" type="text/html" rel="alternate" hreflang="ar" charset="ISO-8859-6" dir="rtl">
<LINK title="La documentation en Français" href="http://someplace.com/manual/french.html" type="text/html" rel="alternate" hreflang="fr" lang="fr">
(例)印刷版の所在が示されています。
<LINK title="The manual in postscript" href="http://someplace.com/manual/postscript.ps" type="application/postscript" rel="alternate" media="print">
(例)複数ページから構成される文書の先頭ページの所在が示されています。
<LINK title="The first page of the manual" href="http://someplace.com/manual/start.html" type="text/html" rel="Start">
8.<BASE>要素
開始タグ: 必要
終了タグ: なし
| 属性名 = 属性値 | 説明 |
| href=URI | 相対URIの基準となるURIを指定します。 |
| target=目標フレーム名 | 文書を表示させるフレーム名を記します。[_blank _self _parent _top] |
HTMLでは、リンク、画像、スタイルシートなどへはURIを使用して参照されます。
そのとき相対URIの場合は基準となるURIを使用して絶対URIに変換されます。
BASE要素は、その基準となるURIを明示的に指定できます。
BASE要素は、HEAD要素中のなるべく先頭に記す必要があります。また、BASE要素で指定される基準URIは、当該文書中でのみ有効です。
例えば、以下のようにBASE要素を設定するとA要素の指定する相対URI[../cages/birds.gif]は、[http://www.aviary.com/cages/birds.gif]となります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Our Products</TITLE>
<BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
</BODY>
</HTML>
相対URIを解釈するに際して[RFC1808]第3章に基づいて基準URIを判断せねばなりません。つまり、次の優先順で基準URIが解釈されます。
- BASE要素によって設定された基準URI
- 通信プロトコルの応答によって与えられるメタデータとしての基準URI (HTTPヘッダなど)
- 当該文書のURIとして基準URI。ただし基準URIのないものは誤りとなります。(E-Mailなど)
OBJECT要素とAPPLET要素はBASE要素の指定を上書きする属性を持つことがあります。
HTTPヘッダによって定義されるリンク要素は、文書中に出現するLINK要素と全く同等の扱いを受けます。
9.HTML文書例
非推奨例: 非推奨となった属性を使用した方法を示すものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>人口動態の研究</TITLE>
</HEAD>
<BODY bgcolor="white" text="black" link="red" alink="fuchsia" vlink="maroon">
... 本文...
</BODY>
</HTML>
推奨例: スタイルシートを使うと、色指定を次のように書くことができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>人口動態の研究</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... 本文 ...
</BODY>
</HTML>
別例: 外部スタイルシートを使うと、HTML文書に手を加えることなく色指定などを変更できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>人口動態の研究</TITLE>
<LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
... 本文 ...
</BODY>
</HTML>