ヘッダ内要素は、head要素の内容として記述するものです。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | HEAD | #PCDATA | 省略不能。 |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| 国際化用属性 | --- | --- | --- |
全てのHTML文書にはかならずHEAD要素内に一つのTITLE要素があらねばなりません。また、複数存在することは許されません。この要素を省略することは不可能です。
<head>
<title>HTML 4.01 Transitional について</title>
</head>
閲覧者は必ずしも作成者の思惑通りに見るとは限らないので、タイトルは文脈を踏まえたタイトルが好ましいです。例えば「研究」と言ったタイトルよりも、「~に関する研究」のようにタイトルを見て理解できるタイトル指定を心がけましょう。
内容に、文字参照を記述してもよいですが、コメントも含めて他のマークアップが現れてはいけません。従って、タイトルに <,> などを記述する場合は文字参照を用いましょう。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | HEAD | 空要素 | --- |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| 国際化用属性 | --- | --- | --- |
| http-equiv | NAME | HTTPレスポンスヘッダとなる情報名。 | HTTP Equivalent |
| name | NAME | 情報名。 | Name |
| content | CDATA | 情報内容。 (必須属性) | Content |
| scheme | CDATA | スキーム名。 | Scheme |
meta情報(HTML文書の情報)を記述する要素です。ヘッダ内にいくつでも書くことができます。
name属性値の動作は定義されていません。汎用的な情報記述に用いるようで指定した属性値をエージェントなどが独自に解釈してよいことになっています。メジャーなところでは、ロボット検索エンジンの制御に使うname="ROBOTS"があります。
ただし、このname属性は独自に解釈するものなので、いわば紳士協定です。これはロボット検索エンジンの制御でも同じで、全てのロボットがこの要素を解釈する保証はありません。
http-equiv属性は、属性値をHTTPレスポンスヘッダの生成に用いるようにということになっていますが、それを行っているサーバは皆無で、実際にはウェブブラウザがmeta情報を読み込みそのようなレスポンスヘッダを受け取ったかのような動作をしています。
name、http-equiv、contentの各属性は、全て大文字小文字を区別しますので、オリジナルと同じ書式が好ましいですが、実際はウェブブラウザは大文字小文字を無視して解釈してくれるでしょう。
以下は、http-equiv属性の例です。
<meta http-equiv="Content-Type" content="text/html; charset=Charset"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache">以下は、ロボット制御の例です。
ただし、これは紳士協定であるため必ずしも有効ではないし、そのロボット検索エンジン特有の構文である可能性もあります。これらを記述する前に、目的検索エンジンのヘルプを参照してみましょう。
例えば、WebArchiveのロボットでインデックスされるのを防ぐには、content属性に"NOARCHIVE"という独自の属性を取ります。
ちなみに、ロボット検索エンジン制御の方法については、今のところ標準規格のようなものは存在しません。一応W3C内に文書がありますが、最終更新が1996年とかなり太古の文書です。
robots.txtの事実上の標準としてはrobotstxt.orgの文書がそれであると言えます。
<meta name="ROBOTS" content="対象">
対象に与えることの出来る値は以下で、カンマで区切って複数指定可能。
相反する属性を同時に指定した場合の動作は不明。
大抵のロボットは、この要素を無指定の状態でcontent="ALL"と等価です、が、何度も言うとおり紳士協定なので全てが使えるかどうかはわかりません。もしかすると、「content="NOINDEX,NOFOLLOW"は解釈するが、content="NONE"は解釈しない」というロボットもあるかもしれません。
前述の通り、ロボットが独自の方法を実装している場合もあります。これらの要素を使用する場合は、これらに加えて検索エンジンのヘルプを参照しましょう。
また、これらnameとcontentの属性は大文字小文字を区別しますが、文書内では大文字が使用されているため、大文字の方がよいかもしれません。どちらにせよ、このように仕様が確定していないものは、おそらくウェブブラウザが大文字小文字を無視して解釈してくれます。……まともであれば。
<meta name="KEYWORD" content="キーワード1,キーワード2,...">
キーワードはカンマで区切って複数指定可能です。
これの出元は不明。一体どこから出てきたんだろう。でも昔から使われてるからきっと大丈夫です。きっと。
Googleでは使用されていないらしい。
<meta name="DESCRIPTION" content="...説明文...">
検索結果で表示されるサイトの説明文を指定します。Yahoo!やGoogleでもこの要素は使用されているようです。
これは一応、W3C内の文書でも記述されてます。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | HEAD | 空要素 | --- |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| href | 完全URI | 基底URIを指定します。 | Hyper Reference |
| target | FrameTarget | 基底フレームターゲット名を指定します。(非推奨) | Target |
HTML文書内の基準とするURIとフレームターゲット名を指定します。明示的に指定しない場合は、HTML文書自体のURIを基準のURIとします。複数書くことはできません。
<head>
<base href="http://www.may.sakura.ne.jp/yuu13/html/head.html">
</head>
この要素はいかなるURI指定よりも優先して出現しなければなりません。BASE要素の前に、LINK要素やスクリプトの外部参照に相対URIを指定すると、相対URIとなり得ません。当然、BASE要素に相対URIを使用することはできません。
普通、ウェブページは基準となるURIの指定を必須としていないので特に指定する必要はありません。これを使用するのは、ほとんどのリンクが別のサーバのファイルを指定している場合や、文書自体のURIが存在しない (E-mailでHTML文書を送るなど) 場合に使用されます。
ウェブ上で、必要に迫られて使う状況と言えば、環境変数PATH_INFO対応のCGIを使用するときくらいでしょう。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | HEAD | 空要素 | --- |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| 共通属性 | --- | --- | --- |
| charset | Charset | リンク先の文字コード。 | Character Set |
| href | URI | リンク先のURI。 | Hyper Reference |
| hreflang | LanguageCode | リンク先の言語コード。 | Hyper Reference Language Code |
| type | MIMETYPE | リンク先のMIMEタイプ。 | Type |
| rel | LinkTypes | この文書から見たリンク先のリンクタイプ。 | Relation |
| rev | LinkTypes | リンク先から見たこの文書のリンクタイプ。 | Reverse |
| media | MediaDesc | 表示するメディアタイプ。 | Media |
| target | FrameTarget | 表示するフレームターゲット。(非推奨) | Target |
rel属性 や rev属性 は、この定義がなされた文書から見て、次の文書、前の文書というように定義することも可能です。これを指定することによって、それら定義された文書をウェブブラウザが先読みしたり、ウェブブラウザのナビゲーションバーから移動できたりします。しかしながら、多くのウェブブラウザはこの要素をサポートしていません。サポートしているところで、OperaやMozilla、テキストウェブブラウザのLynxなどが対応しているようですが、いかんせんIEが非対応な為広まらないようです。
この要素は閲覧者にとって便利(になるはず)な反面、サイトの構造によっては一度記述してしまうとサイトの構造を変えた時に全ての文書を書き換えねばならず、面倒なのも事実です。スタイルシートの指定などはまだいいとしても、次の文書・前の文書などは間に一つ新しい文書を挿入しただけで他の文書を全て書き換える必要がでてしまいます。
一つ前のHTML文書を指定。<link rel="prev" href="previous_document.html" type="text/html">次のテキスト文書を指定。<link rel="next" href="next_document.txt" type="text/plain">
外部スタイルシートを指定する場合も、このlink要素を使用します。また、共通属性のtitle属性が付くと別の解釈がなされるので注意して下さい。
固定スタイルシートを指定。<link rel="stylesheet" href="fixed.css" type="text/css">優先スタイルシートを指定。<link rel="stylesheet" href="default.css" title="Default Style" type="text/css">代替スタイルシートを指定。<link rel="alternate stylesheet" href="sub.css" title="Simple Style" type="text/css">
固定スタイルシートとは、ユーザがスタイルシートを無効にしない限り常に有効なスタイルのことです。代替スタイルシートをいくつ指定していても、またそれらのどれに変更されても常に有効になるスタイルです。
優先スタイルシートとは、代替スタイルシートのうち優先的に有効になる、いわばデフォルトのスタイルのことです。別の代替スタイルシートに変更されればこのスタイルは無効になります。
代替スタイルシートとは、名前の通りユーザが変更できるスタイルを指定します。
ちなみに、スタイル切り替え機能は、Internet Explorer は対応していません。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | HEAD | StyleSheet | --- |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| 国際化用属性 | --- | --- | --- |
| type | MIMETYPE | スタイル言語を指定。 (必須属性) | Type |
| media | MediaDesc | 表示するメディアタイプ。 | Media |
| title | Text | 代替スタイルの名称。 | Title |
文書内に直接スタイルシートを組み込みます。この要素はいくつでも指定することができます。
この要素には、type属性は必須です。type属性では使用するスタイル言語を指定します。カスケーディング・スタイルシートの場合は text/css としなければなりません。
title属性をつけると、そのスタイル定義は代替スタイルシートとなります。
<head>
<meta...>
<title>...</title>
<style type="text/css">
<!--
スタイル定義
-->
</style>
</head>
スタイル要素の内容が注釈宣言 (<!-- -->) で囲まれているのは、スタイル要素をサポートしていないウェブブラウザが、この部分をテキストとして表示してしまうのを防ぐ為です。しかし、このようなことをするくらいなら LINK要素 を用いて、外部スタイルシートを用意した方が良いでしょう。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | BODYの子要素 | [INLINE] | HEAD, BODY, [BLOCK] | Script | --- |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| charset | Charset | スクリプトの文字コード。 | Character Set |
| type | MIMETYPE | スクリプト言語を指定。 (必須属性) | Type |
| src | URI | 外部スクリプトファイルのURI。 | Source |
| defer | (defer) 論理型属性 | スクリプトの遅延実行。 | Defer |
| event | CDATA | (将来のために予約) | Event |
| for | URI | (将来のために予約) | For |
| language | CDATA | スクリプト言語識別子。(非推奨) | Script Language Name |
文書内にクライアント側スクリプトを組み込みます。この「クライアント側スクリプト」の事を、Microsoft社では、しばしば「アクティブスクリプト」と呼びます。
この要素は、Strict/Transitional/Framesetのいずれであっても、BODY要素に直接含むこともできます。
language属性は非推奨です。これは、それぞれの言語名の標準化がされていない為です。type属性でMIMETYPEを指定しましょう。
文書内に書けるスクリプトは以下の二つがあります。
要素中のスクリプトは一度だけ実行され、スクリプトを使用できないウェブブラウザのために noscript要素 を指定することができる。
<script type="text/javascript">
<!--
...関数...
//-->
</script>
<noscript>...</noscript>
特定のイベントが発生するたびに実行されるスクリプト。読み込んだ関数を実行するには、多くの要素に使用可能なイベント属性を使用する。
組み込みイベントスクリプトを使用する場合は、meta要素を用いて、デフォルトのスクリプト言語を指定する必要がある。指定せずに、イベント属性を使用することは不正であるし、不可能。
組み込みイベントスクリプト
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>...</title>
<script type="text/javascript">
<!--
function foo(){
...関数...
}
//-->
</script>
</head>
<body>
<input type="button" value="実行!" onclick="foo()">
この要素にサポートするウェブブラウザは、MIMEタイプに対応したパーサ(解析機、この場合JavaScriptを実行するプログラム)に、スクリプト要素の内容をそのまま渡します。
そうにも関わらず、内容が注釈宣言(<!-- -->)で囲まれているのは、スクリプト要素をサポートしないウェブブラウザがこの部分をテキストとして表示してしまうことを防ぐ為です。
この要素サポートしないウェブブラウザは、<script>を不明なHTML要素として無視し、内容をスクリプトと判断せずにHTML文書の一部であると誤認して表示を試みます。これをさせないための注釈宣言です。
また、注釈終了を示す「-->」が、JavaScriptの1行コメントである「//」内に来るのは、パーサが「--」をJavaScriptのデクリメント演算子と誤認するのを防ぐ為にコメントとします。
しかし、この理論でいくと、注釈の開始である「<!--」も「//<!--」とするのが道理だと思うのですが、それが行われている例は見たことがありませんし、この状態でサポートしないウェブブラウザが表示を行うと、「//」のみがテキストとして表示されてしまうでしょう。
更に、最初に述べたように、SCRIPT要素の内容は何の解釈もされずに、そのままパーサに渡されます。JavaScriptなどプログラムのパーサは、HTMLパーサとは違い、厳格に構文をチェックし、未知の命令が出現した場合は、HTMLのように無視するのではなく、エラーとして返してきます。となると、この場合、内容にJavaScriptの命令文以外の文字列を含むことはできませんし、含んだところでエラーになるはずです。
そうなると、先頭の「<!--」は一体どうなっておるのか。JavaScriptにこのような構文が存在するとは思えません。しかし、JavaScriptパーサは何もエラーを返してきていません。このあたりはよくわかりませんが、いくつかのウェブブラウザの挙動を見たところ、単に「<!--」を「//」と同じように扱っているようです。つまり、各ウェブブラウザがエラーにならないよう調整しているのかもしれません。
このような事を行うくらいならば、いっそのことJavaScriptを外部ファイルで用意したほうが確実でしょう。XHTMLでは、スクリプト要素の内容に注釈宣言を含むと、本当に注釈として扱われてしまうようなので、それを考慮しても外部ファイルにした方が安全でしょう。
読み込み時にただ一度だけ読み込まれる場合 (外部スクリプト指定)
<script type="text/javascript" src="event.js"></script>
<noscript>...</noscript>
組み込みイベントスクリプト (外部スクリプト指定)
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>...</title>
<script type="text/javascript" src="event.js"></script>
</head>
<body>
<input type="button" value="実行!" onclick="foo()">
defer属性はスクリプトの遅延実行を示します。この属性を指定すると、定義されたスクリプトの実行を後回しにしてまずHTML文書を解析します。そしてHTML文書の表示が終了すると、スクリプトの実行を開始します。これは、定義された関数がとてつもなく巨大だったり長い処理だった場合に使用すると効果的です。
ただし、この属性を使用する場合、document.write のような文書そのものを書き換える関数を使用することはできません。スクリプトの実行が後回しになるのですから当然と言えば当然ですが。
インライン要素のOBJECT要素をご覧下さい。
| 型 | 親要素 | 内容 | 備考 |
|---|---|---|---|
| HEADの子要素 | [BLOCK] | HEAD, BODY, [BLOCK] | 空要素 | 非推奨要素 |
| 属性 | 属性値 | 説明 | 語源 |
|---|---|---|---|
| コア属性 | --- | --- | --- |
| 国際化用属性 | --- | --- | --- |
| prompt | Text | プロンプトメッセージ。 | Prompt |
この要素は、FORM要素 + INPUT要素 に取って代わられました。非推奨です。
一行テキスト入力を定義します。入力欄のラベルは、prompt属性で指定します。
この要素はtypeがtext、methodがgetで、 actionはISINDEX要素のある文書のURIを指している、単一INPUT要素のあるフォームと等価です。以下の例をご覧下さい。
<base href="http://example.com/~user/bbs.cgi">
...
<isindex prompt="文字列を入力">
<form method="get" action"http://example.com/~user/bbs.cgi">
<p>文字列を入力 <input type="text"></p>
</form>
この二つの例は等価です。