Next: 4.2 メタ情報
Up: 4. HTMLの骨格
Previous: 4. HTMLの骨格
4.1 基本構造
もし文書型定義に沿う場合には、2.4 で説明したdoctypeタグを最初に入れます。
続いて、最初のタグ環境を開始しますが、これは必ずhtmlタグから始まります。このタグ環境の中に、ドキュメント情報を主に記述するheadタグ環境と、コンテンツ(本文)を記述するbodyタグ環境が入ります。
つまり、次のような書式が基本となるでしょう。ここでは文書型定義をHTML 4.0としています。
<!doctype html public "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>〜</head>
<body>〜</body>
</html>
これら3つのタグの役割とそのアトリビュートを次にまとめます。
- html[Strict][Transitional]
- <html attributes ...>〜</html>タグ環境は、その範囲のドキュメントがHTML形式で記述されていることを宣言します。attributesには次のようなものが入ります。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- lang
- [Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
- version
- [Transitional][省略可]version="text"は、文書型定義の識別子を表します(2.4 参照)。
- head
- <head attributes ...>〜</head>タグ環境は、その範囲のドキュメントがドキュメントの情報部であることを宣言します。この環境内で記述したものは通常、ブラウザ上に表示されることはありませんが、ドキュメントのタイトルやキーワードなどを記載することで、検索エンジンやデータベースなどで有効に利用することができます。attributesには次のようなアトリビュートを記述します。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- lang
- [Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
- profile
- [Strict][Transitional][省略可]profile="URI"は、そのドキュメントのプロフィールを記述したURIを指定します。プロフィールはheadタグ環境内にmetaタグ(4.2 参照)を使って記述します。
- body
- <body attributes ...>〜</body>タグ環境は、その範囲のドキュメントがコンテキストであることを宣言します。この中に記述したテキストがブラウザ上に表示されます。また、このタグ環境内では多くの修飾タグを使うことができます。attributesの部分には次のようなものが入ります。
- alink
- [Transitional][省略可]alink="#rrggbb"またはalink="Color"は、クリックした瞬間にリンク部分が変色する際の色を指定します。 前者の場合、色は、光の3原色の赤、緑、青の3要素をそれぞれ16進数で00〜ff(10進数の0〜255)で表し、#の後に並べます。後者の場合、色の名前を指定します。色の指定の詳細については、7 を参照してください。
- background
- [Transitional][省略可]background="URI"は、ブラウザの背景に画像を表示します。ファイル形式については、8 を参照してください。
- bgcolor
- [Transitional][省略可]bgcolor="#rrggbb"またはbgcolor="Color"は、背景の色を指定した色にします。指定方法はalinkと同様です。
- class
- [Strict][Transitional][省略可]class="cdata"は、タグ環境内のコンテキストへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- id
- [Strict][Transitional][省略可]id="name"は、ドキュメントに固有のIDを振ります。
- lang
- [Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
- link
- [Transitional][省略可]link="#rrggbb"またはlink="Color"は、リンク部分の文字の色を指定します。指定方法はalinkと同様です。
- onclick
- [Strict][Transitional][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- ondblclick
- [Strict][Transitional][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeydown
- [Strict][Transitional][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeypress
- [Strict][Transitional][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeyup
- [Strict][Transitional][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onload
- [Strict][Transitional][省略可]onload="script"はドキュメントを読み込んだときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousedown
- [Strict][Transitional][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousemove
- [Strict][Transitional][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseout
- [Strict][Transitional][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseover
- [Strict][Transitional][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseup
- [Strict][Transitional][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onunload
- [Strict][Transitional][省略可]onunload="script"は現在開いているドキュメントから別のページに移動したりブラウザを閉じようとしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- style
- [Strict][Transitional][省略可]style="cdata"は、タグ環境のスタイルを設定します。詳細は5 を参照してください。
- text
- [Transitional][省略可]text="#rrggbb"またはtext="Color"は、テキスト文字の色を指定します。指定方法はalinkと同様です。
- vlink
- [Transitional][省略可]vlink="#rrggbb"またはvlink="Color"は、すでに行ったことのあるリンク部分の文字の色を指定します。指定方法はalinkと同様です。
headタグ環境内に記述することができるタグとして次のようなものがあります。
- isindex [Transitional]
- <isindex attributes ...>で使用します。EMPTYタグなので、終了タグ</isindex>は必要ありません。これを記述すると、キーワード検索用の入力フォームをページ内に開きます(図)。使い方については、16.3 を参照してください。attributesには次のようなものが入ります。
- class
- [Transitional][省略可]class="cdata"は、このタグへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
- dir
- [Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- id
- [Transitional][省略可]id="name"は、このタグに固有のIDを振ります。
- lang
- [Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
- prompt
- [Transitional][省略可]prompt="description"で、入力ボックスの前に表示される説明を変更することができます。デフォルトで何が表示されるかはブラウザに依存します。
- style
- [Transitional][省略可]style="cdata"は、このタグのスタイルを設定します。詳細は5 を参照してください。
- title
- [Transitional][省略可]title="titlename"は補助用タイトルを指定します。
- link [Strict][Transitional]
- <link attributes ...>の形で、ドキュメントのリンク関係を明示します。このタグに対応したブラウザであれば、たとえばブラウザの「戻る」ボタンの飛び先を前に参照していたページではないものに変更できたりすることが可能となります。attributesには次のようなものが入ります。
- charset
- [Strict][Transitional][省略可]charset="charset"は、リンク先の文字エンコーディングセットを指定します。通常はISO-8859-1(Latin-1のこと)、日本語ならばISO-2022-JP、EUC-JP、SHIFT_JISといったものになります。英字アルファベットの大文字、小文字は問いません。
- class
- [Strict][Transitional][省略可]class="cdata"は、このタグへセットする情報をクラスの形で指定します。詳細は5 を参照してください。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- href
- [Strict][Transitional][省略可]href="URI"は、relアトリビュートあるいはrevアトリビュートで指定される先へのURIを指定します。たとえば、rel="Index"でそのURIがindex.htmlのときには、<link rel="Index" href="index.html">のように記述します。
- hreflang
- [Strict][Transitional][省略可]hreflang="language"は、hrefアトリビュートで指定した先のドキュメントの言語を指定します。
- id
- [Strict][Transitional][省略可]id="name"は、このタグに固有のIDを振ります。
- lang
- [Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
- media
- [Strict][Transitional][省略可]media="cdata-list"は効果対象を指定します。値には次のようなものがあります。複数指定する場合、,(コンマ)で区切ります。
- all
- すべてのデバイスが対象となります。
- aural
- 音声出力装置(シンセサイザー)が対象となります。
- braille
- 点字デバイスが対象となります。
- handheld
- 携帯端末が対象となります。
- print
- ページ化された出力(通常は紙)が対象となります。
- projection
- プロジェクタが対象となります。
- screen
- コンピュータ画面が対象となります。
- tty
- コンピュータ画面(文字端末)が対象となります。
- tv
- テレビ装置が対象となります。
- onclick
- [Strict][Transitional][省略可]onclick="script"はクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- ondblclick
- [Strict][Transitional][省略可]ondblclick="script"はダブルクリックされたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeydown
- [Strict][Transitional][省略可]onkeydown="script"はキーを押して離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeypress
- [Strict][Transitional][省略可]onkeypress="script"はキーを押したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onkeyup
- [Strict][Transitional][省略可]onkeyup="script"はキーを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousedown
- [Strict][Transitional][省略可]onmousedown="script"はマウスのボタンをクリックしたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmousemove
- [Strict][Transitional][省略可]onmousemove="script"はマウスを移動したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseout
- [Strict][Transitional][省略可]onmouseout="script"はマウスを対象から離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseover
- [Strict][Transitional][省略可]onmouseover="script"はマウスを対象に当てたときに実行するスクリプトを指定します。詳細は15 を参照してください。
- onmouseup
- [Strict][Transitional][省略可]onmouseup="script"はマウスのボタンを離したときに実行するスクリプトを指定します。詳細は15 を参照してください。
- rel
- [Strict][Transitional][省略可]rel="type"は、hrefアトリビュートで指定したリンク先のタイプを示します。タイプの詳細は6.2 を参照してください。
- rev
- [Strict][Transitional][省略可]rev="type"は、現在のドキュメントに到達する直前のドキュメントのタイプを示します。タイプはrelアトリビュートと同じです。
- style
- [Strict][Transitional][省略可]style="cdata"は、このタグのスタイルを設定します。詳細は5 を参照してください。
- target
- [Strict][Transitional][省略可]target="name"は、hrefで指定したときのリンク先ターゲットを示します。詳細については6.2 を参照してください。
- title
- [Strict][Transitional][省略可]title="titlename"は補助用タイトルを指定します。
- type
- [Strict][Transitional][省略可]type="mimetype"は、リンク先リソースのMIMEタイプを指定します。たとえばHTMLならばtext/htmlになります。
- title [Strict][Transitional]
- <title attributes...>〜</title>の形で、ドキュメントのタイトルを記述します。attributesには次のような記述が入ります。
- dir
- [Strict][Transitional][省略可]dir="direction"は、テキストの方向を指定します。詳細は4.3 を参照してください。
- lang
- [Strict][Transitional][省略可]lang="language"は、ドキュメントの言語を指定します。詳細は4.3 を参照してください。
このほか、baseタグ(10 参照)、metaタグ(4.2 参照)、objectタグ(13 参照)、scriptタグ(15 参照)、styleタグをheadタグ環境内に入れることができます。
Next: 4.2 メタ情報
Up: 4. HTMLの骨格
Previous: 4. HTMLの骨格
Kenshi Muto
平成11年9月19日