HTML/ヘッダ
HTML > ヘッダ
記述例[編集]
- HTML5
<!DOCTYPE html"> <html> <head> <meta charset="UTF-8"> <title>HTML/ヘッダ</title> </head> <body> <!-- 本文 --> </body> </html>- HTML5では、スタイルシートは text/css、スクリプトは text/javascript が既定となり明示的な指定は不要になりました。
- HTML4 Strict
<!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要素など文書に関する情報を記述します。ここで書いた情報が直接表示されることはませんが、的確な表示を行うためにブラウザ側に必要な情報を引き渡す役目があります。
- title
- ページのタイトルを表す要素。一般的なウェブブラウザでは、タイトルバーに表示されます。
- <head>～</head>中に一組入力し、～の部分にタイトルを入力することで指定します。タイトルはその文書が何であるかを示すもので、検索結果に表示される際やお気に入り（ブックマーク）登録を行ったときでもおおよその内容が何であるか分かるようにすることが好ましい。
- 例えば「卯園工業株式会社」の会社概要であればタイトルは「会社概要」ではなく「会社概要：卯園工業株式会社」とすべきです。
- body
- <body>～</body>を<html>～</html>中に一組入力します。ここには直接ブラウザに表示させたい文章を入力します。
!DOCTYPE[編集]
HTML5では
<!DOCTYPE html>
これだけです。DTDがないので、もはやHTML5はSGMLではなくなりました[1]。
以下、HTML4.01 以前についての記述
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属性[編集]
HTML5では、HTML4.01 以前に http-equiv属性 を使いアドホックに指定していたメタデータは、より直感的な固有の属性によって置換わり、http-equiv属性の使用機会は殆どなくなりました。
以下、HTML4.01 以前についての記述
本来ならばHTTPで交換される情報をあらかじめファイルに記載しておくことができます。この属性に対応しているWWWサーバやウェブブラウザがこの情報を読み込んで、ページの作成者が望むHTTP上の動作を実現させることができます。
ただし、本来ならばHTTPレスポンスヘッダで指定すべきものであるため、記述することで不具合が起こる場合もあります。
文字符号化方式の指定[編集]
HTML５での文字符号化形式は、
<meta charset="UTF-8">
となります。シンプルですね。
以下、HTML4.01 以前についての記述
<meta http-equiv="Content-Type" content="text/html;charset=文字符号化方式">
文書がtext/html形式で書かれていることを示すと同時に文書中で使われている文字符号化方式を指定します。文書中で使われている文字符号化方式と同じ符号化方式を設定する必要があります。文書中で使われている文字コードと異なるものを指定した場合、文字化けの原因になるので注意が必要です。
スタイルシート・スクリプトのタイプ指定[編集]
HTML5では、スタイルシートは CSS，スクリプトの言語は Javascript がそれぞれ既定値 となりました。
以下、HTML4.01 以前についての記述
<meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript">
ページ内でスタイルシート、スクリプトを使用している場合に使用しているスタイルシート・スクリプトの種類をそれぞれ指定します。省略してもウェブブラウザがtext/css、text/javascriptと自動的に認識するが、指定することが望ましい。
自動的にページを読込む[編集]
HTML5で、自動的にページを読込む場合
<meta http-equiv="Refresh" content="秒数"> <meta http-equiv="Refresh" content="秒数 URL">
HTTPのRefreshヘッダを指定することにより、ページが読み込まれてから自動的に再読み込みをすることをクライアントに指定します。URLを指定した場合は、指定したURLの再読み込みが行われます。ただし、アクセシビリティの面からは利用が推奨されないです。サーバー側でリダイレクトの処理を行う、通常のリンクで移動させるなどの方法で代用することが望ましい。
以下、HTML4.01 以前についての記述
<meta http-equiv="Refresh" content="秒数"> <meta http-equiv="Refresh" content="秒数; url=URL">
秒数 と URL の間に、; url= が必要でした。
セルフレイテリング[編集]
HTML5では、PICS を規定していません。 PICS自体が、HTMLの規格策定から手を引いた W3C が策定した規格で、既に廃止ないし失効しています。 https://www.w3.org/PICS/labels.html
以下、HTML4.01 以前についての記述
<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 | ||||
その他の情報を記載する[編集]
HTML5では、
<meta name="application-name" content="Gmail">
の様な新しいメタデータも規定されました。
以下、HTML4.01 以前についての記述
<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要素[編集]
HTML5 § 4.2.4 The link element https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
以下、HTML4.01 以前についての記述
文書に関連する別のリソースを記述する要素。外部スタイルシートの指定やサイト内リンクに関する情報指定等に用いられます。サイト内リンクに関する一部の情報は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要素[編集]
HTML5 4.2.3 The base element https://html.spec.whatwg.org/multipage/semantics.html#the-base-element
以下、HTML4.01 以前についての記述
<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 にリンクされます。