HTML/ヘッダ
出典: フリー教科書『ウィキブックス（Wikibooks）』
HTML > ヘッダ
目次 |
[編集] 記述例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>HTML/ヘッダ</title> </head> <body> </body> </html>
[編集] 必須要素
- html
- HTML文書であることを表す要素。HTML文書の最初（DTDの次）に<html>、最後に</html>を一組入力する。
- 開始要素にはlang属性を用いて使用言語が何であるかを指定することが望ましい。lang属性を指定することで適切なフォントが指定され文字化けなどを防ぐことが出来る。日本語環境に対するlang="ja"など言語環境と使用言語が同じ場合は属性指定でそれほど目立った効果を得らないかもしれないが、言語環境と使用言語が異なる場合は属性指定で適切な効果を得られることが多い。
- head
- <head>〜</head>を<html>〜</html>中に一組入力する。ここにはtitle要素やmeta要素など文書に関する情報を記述する。ここで書いた情報が直接表示されることはないが、的確な表示を行うためにブラウザ側に必要な情報を引き渡す役目がある。
- body
- <body>〜</body>を<html>〜</html>中に一組入力する。ここには直接ブラウザに表示させたい文章を入力する。
- title
- ページのタイトルを表す要素。一般的なウェブブラウザでは、タイトルバーに表示される。
- <head>〜</head>中に一組入力し、〜の部分にタイトルを入力することで指定する。タイトルはその文書が何であるかを示すもので、検索結果に表示される際やお気に入り（ブックマーク）登録を行ったときでもおおよその内容が何であるか分かるようにすることが好ましい。
- 例えば「卯園工業株式会社」の会社概要であればタイトルは「会社概要」ではなく「卯園工業株式会社概要」とすべきである。
[編集] DTD
HTMLは、DTD（Document Type Definition = 文書型定義）というスキーマ言語を採用している。HTMLのDTDには、HTMLで用いることができる要素や属性などが定義されている。例えばHTML 4.01には次の3種類のDTDが存在する。
- Strict
- 最も厳密なDTDで論理的なマークアップの目的を中心に構成されており、HTML 3.2と比較すると視覚的とされる要素の多くが削除された。
- Transitional
- HTML 3.2から4.01への過渡期に用いるDTDである。Strictへの移行によって削除された要素を以前のバージョンとの互換性のために含む。ただしインラインフレーム以外のフレームは使用できない。
- Frameset
- フレーム定義用のDTDである。フレーム定義以外の目的で使用することが出来ず、また<html>〜</html>に直接<body>要素を含めることが出来ない。（<noframes>〜</noframes>中に記述する必要がある。）
DTDは文書の先頭にひとつだけ記述する。しばし省略されるが正式なHTMLの文書には必要なものであり、一字一句間違えずに入力する必要がある。
HTML 4.01 Strictの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitionalの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Framesetの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
なお、一部のウェブブラウザでは上記のまま記述すれば規格に従った標準準拠モードとなるが、末尾にあるURLの部分を省略するとその文書は後方互換モードとなり、ウェブブラウザの独自拡張が使用できるようになる。ただしStrictでは後方互換モードでも独自拡張が利用できない実装系が多い。
[編集] meta要素
meta要素は、文書自体のさまざまな情報（メタデータ）を記述する。
[編集] http-equiv属性
本来ならばHTTPで交換される情報をあらかじめファイルに記載しておくことができる。この属性に対応しているWWWサーバやウェブブラウザがこの情報を読み込んで、ページの作成者が望むHTTP上の動作を実現させることができる。
ただし、本来ならばHTTPレスポンスヘッダで指定すべきものであるため、記述することで不具合が起こる場合もある。
[編集] 文字符号化方式の指定
<meta http-equiv="Content-Type" content="text/html;charset=文字符号化方式">
文書がtext/html形式で書かれていることを示すと同時に文書中で使われている文字符号化方式を指定する。文書中で使われている文字符号化方式と同じ符号化方式を設定する必要がある。文書中で使われている文字コードと異なるものを指定した場合、文字化けの原因になるので注意が必要である。
[編集] スタイルシート・スクリプトのタイプ指定
<meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript">
ページ内でスタイルシート、スクリプトを使用している場合に使用しているスタイルシート・スクリプトの種類をそれぞれ指定する。省略してもウェブブラウザがtext/css、text/javascriptと自動的に認識するが、指定することが望ましい。
[編集] 自動的にページを読み込む
<meta http-equiv="Refresh" content="秒数"> <meta http-equiv="Refresh" content="秒数;url=URL">
HTTPのRefreshヘッダを指定することにより、ページが読み込まれてから自動的に再読み込みをすることをクライアントに指定する。URLを指定した場合は、指定したURLの再読み込みが行われる。ただし、アクセシビリティの面からは利用が推奨されない。サーバー側でリダイレクトの処理を行う、通常のリンクで移動させるなどの方法で代用することが望ましい。
[編集] セルフレイテリング
<meta http-equiv="Pics-Label" content='(pics-1.1 "URL" l r (v 0 s 0 n 0 l 0))'>
コンテンツに年齢制限に関する情報を記述する。 pics-1.1 "URL"の部分でPics-Labelの仕様が書かれているページのURLを指定し、l r ()の部分（LとRの小文字の間に半角スペース）で仕様に従った年齢制限レベルの記述を4段階評価で行う。仕様は複数定められているため、自分の従う形式の記述法に従って項目を指定する。
例えば英国非営利団体ICRA（Internet Content Rating Association）の定める形式に従った場合は以下のような形式となる。
| 年齢制限となる要素 | 規制Lv0 | 規制Lv1 | 規制Lv2 | 規制Lv3 | 規制Lv4 |
|---|---|---|---|---|---|
| v=violence（暴力） | 問題なし | 喧嘩、障害 | 殺人行為などの描写 | 流血を伴う殺人や死体 | 過激な暴力・殺人 |
| s=sex（セックス） | 普通のキスなど | ペッティング | 性行為を連想させる表現や描写 | 性行為を鮮明に描写 | |
| n=nude（ヌード） | 露出度の高い服装 | 水着や下着など比較的露出度の高い服装の描写 | 全裸などの描写 | 性器などの強調された裸体の描写など | |
| l=language（言葉） | 比較的穏やかだが品のない言葉や悪口 | 冒涜などの悪口 | 性的な表現。 | 誹謗中傷や過激なエロ。 | |
| URLの指定 | http://www.rsac.org/ratingsv01.html | ||||
[編集] その他の情報を記載する
<meta name="情報の種類" content="情報">
その他の具体的にHTMLで規定されていないメタ情報については、name属性とcontent属性（とscheme属性）を用いて記述する。
| 情報の種類 | 情報 | |
|---|---|---|
| 作成者 | author | 作成者の名前（実名でもハンドルでも） |
| generator | 作成ソフト | |
| reply-to | 連絡先（メールアドレスを書くのが一般的） | |
| tel | 電話番号 | |
| fax | FAX番号 | |
| copyright | 著作権 | |
| 日時 | creation date | 作成日 |
| date | 作成日または更新日 | |
| expires | 有効期限 | |
| 対象 | distribution | 他のmetaタグの対象範囲 global:外部 local:内部 |
| language | 使用言語 | |
| coverage | 商品やサービスの提供範囲 worldwide:全世界 |
|
| targeted geographic area | ウェブページの対象範囲 | |
| rating | 対象年齢 general:一般的 safe for kids:子供が見ても安心 adult:大人向け child:子供向け |
|
| classification | ページのジャンル business:仕事用 computers:コンピュータ関連 entertainment:エンターテイメント internet:インターネット関連 miscellaneous:ごちゃごちゃ personal:個人的なページ |
|
| 検索ロボット | keywords | キーワード（「,」で区切る） |
| description | ページ内容の要約 | |
| robots | 検索させるかさせないか（「,」で区切る） index:そのページを検索させる noindex:そのページを検索させない follow:リンク先を検索させる nofollow:リンク先を検索させない |
|
| revisit_after | X days:X日後に再検索 | |
[編集] link要素
文書に関連する別のリソースを記述する要素。外部スタイルシートの指定やサイト内リンクに関する情報指定等に用いられる。サイト内リンクに関する一部の情報はSeaMonkeyやOperaなど一部のブラウザがナビゲーション情報として取得内容をブラウザのツールバーに表示する。
<link rel="ページとの関係" href="アドレス" type="ファイルタイプ"> <link rev="ページとの関係" href="アドレス" type="ファイルタイプ">
rel属性はURLで示したページの側から見たこのページとの関係を、rev属性はこのページの側から見たURLで示したページの関係を示す。外部ファイルをページ内に埋め込む場合はtype属性も記述する。
| 値 | 概要 |
|---|---|
| stylesheet | 外部ファイルのスタイルシート |
| alternate stylesheet | 外部ファイルの代替スタイルシート |
| alternate | ドキュメントの別バージョン。RSSやAtomを指定するのに利用され、ここで指定された内容はRSS対応のブラウザが自動的に情報を取得してツールバーなどで通知される。複数指定する場合、ブラウザが内容を識別できるようにtitle属性をつけるのが望ましい。 |
| shortcut icon | Favicon。iconとともに指定するのが望ましい。 |
| icon | Favicon。shortcut iconと合わせて指定するのが望ましい。 |
| made | 作成者の連絡先。 |
| start | トップページ |
| next | 次のページ（指定先に内容の続きがあることを示す） |
| prev | 前のページ（このページからの内容が続いていることを示す） |
| search | 検索に関する情報の場所。ウィキメディアプロジェクトのようにOpenSearch形式のxmlファイルを指定してFirefoxなどの検索プラグインを読み込ませる場合もある。 |
| contents | 目次 |
| index | 索引 |
| glossary | 用語集 |
| copyright | 著作権についてのページ |
| made | 作成者の連絡先をrev属性で指定。mailto:でメールアドレスを記述するのが一般的だが、作成者と連絡が取れるのであればメールフォームなどのページを指定してもよい。 |
| chapter | 章 |
| section | 節 |
| subjection | 項 |
| appendix | 付録 |
| help | ヘルプページ |
| bookmark | 文書内のジャンプ先 |
[編集] base要素
<base href="URL">で、ページ内のすべてのリンクが、指定されたURLを基準にする。<base href="URL" target="ターゲット">のようにしてtarget属性も指定することが可能。たとえば下のウェブページがhttp://ja.wikipedia.org/ だとして、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>ウィキブックスへのリンク</title> <base href="http://ja.wikibooks.org/"> </head> <body> <p><a href="./wiki/HTML">HTMLの教科書</a></p> </body> </html>
と入力すると、http://ja.wikipedia.org/wiki/HTML ではなく、http://ja.wikibooks.org/wiki/HTML にリンクされる。
