HTML要素文書のメタデータ
head
ヘッダ情報
2009/8/26
構文
head要素は、文書のメタデータを表します。
head要素は、html要素の最初の要素として記述します。
head要素内には、title要素（文書のタイトル）が1回出現する必要があります。 それ以外は必要に応じて、meta要素（メタ情報）、link要素（関連リンク）、script要素（外部スクリプトファイルの読み込み）などを記述します。
属性
固有の属性はありません。
HTML4にあったprofile属性は廃止されました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
サンプル
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>PHP & JavaScript Room</title> <script type="text/javascript" src="common.js></script> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> </head> <body> ・・・ </body> </html>
title
文書のタイトル
2009/8/26
構文
title要素は、文書のタイトルまたは名前を表します。
title要素は、head要素内に記述します。
title要素は、文書内で1回だけ出現する必要があります。
title要素内に記述可能な値は、文字列（%CDATA）のみです。 ここで指定した文字列は、ブラウザのタイトルバーに表示されます。 「コンテンツタイトル | サイト名」のように文書の内容がわかるタイトルをつけるようにしましょう。
- タイトルバーの文字化け対策として、title要素はmeta要素の文字コード宣言のより後に記述してください。
- title要素内に他の要素を含むことはできません。
【DOM】document.titleで文書のタイトルにアクセスできます。
<input type='text' id='dm_title' />
<script type='text/javascript'>
document.getElementById('dm_title').value=document.title;
</script>
属性
固有の属性はありません。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
サンプル
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>PHPについて | PHP & JavaScript Room</title> </head> <body> <h1>PHPについて</h1> ・・・ </body> </html>
base
文書の基準URI
2009/8/26
構文
base要素は、文書の基準URIを表します。
base要素は、head要素内に記述します。
base要素は、文書内で1回だけ出現することができます。
base要素には、href属性またはtarget属性のいずれか、あるいは両方を指定する必要があります。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| href | URL | 文書内のリンクの基準となるURL（「http://～」から始まる絶対URL）を指定。ページ内の相対パスは、href属性に指定したURIを基準に記述します。※href属性があるbase要素が複数ある場合、最初のbase要素のみが適用され、それ以外は無視されます。 |
| target | フレームターゲット | 文書内の全てのリンクをどう開くか指定。リンクに直接target属性を指定している場合は、そちらの指定が優先されます。※target属性があるbase要素が複数ある場合、最初のtarget要素のみが適用され、それ以外は無視されます。 |
サンプル
<head> <base href="http://phpjavascriptroom.com/" target="_blank"> </head> <body> <h1> <a href="index.php" target="_self"> <img src="image/logo.png" alt="Logo"> </a> </h1> <p> <a href="http://www.google.co.jp" title="Google">Google</a> </p> </body>
link
関連リンク情報
2009/8/26
構文
link要素は、文書と関連のあるファイルを表します。
link要素は、head要素内に記述します。 link要素には、外部JS、外部CSS、RSSフィード、作成者、著作権など、文書と関連のあるいろいろな関連ファイル情報を指定可能です。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| href | URL | リソースの対象URL |
| rel | リンクタイプ | 現在の文書と対象文書の関係を指定。 |
| media | メディアタイプ | 文書がどのようなデバイスで表示されるかを指定。複数のメディアを指定する場合は、カンマ区切りで指定。 |
| hreflang | 言語コード | 対象URLの基準言語の指定。 |
| type | MIMEタイプ | 対象URLのMIMEタイプを指定。CSSなら「text/css」、JavaScriptなら「text/javascript」、GIF画像なら「image/gif」など。 |
| sizes | アイコンサイズ | ビジュアルメディアに対するアイコンの縦×横サイズをピクセル単位で指定（例、sizes="16x16"）。複数指定する場合は、半角スペース区切りで指定（例、sizes="32x32 48x48"）。 |
| title | テキスト | link要素のタイトルを指定。 |
サンプル
<head> <link rel="index" href="http://localhost/test/pj_roomer/?t=html5" /> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="alternate" media="print" title="The Print version" href="print.php?t=html5&p=tag_document_metadata" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0 (XML)" href="http://phpjavascriptroom.com/index.xml" /> <link rel="alternate" type="application/rss+xml" title="RSS 1.0 (RDF)" href="http://phpjavascriptroom.com/index.rdf" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" sizes="16x16" /> </head>
style
スタイルシートの埋め込み
2009/8/26
構文
style要素は、スタイルシートの埋め込みを表します。
文書内に直接スタイルシートを記述するのに使用します。
style要素のtype属性は、必須属性です。
スタイルシートの場合には、必ず「text/css」を指定してください。
style要素は、head要素内またはbody要素内に記述することができますが、スタイルシートは全て外部ファイル化してlink要素で関連付けるようにしましょう。
属性
HTML5から新たにscoped属性が加わり、文書全体ではなく、特定のセクションに対してスタイルを定義することをができるようになりました。
| 属性 | 値 | 説明 |
|---|---|---|
| グローバル属性 | - | 全要素共通の属性。 |
| type | 「text/css」固定 | コンテンツの種類を指定。 |
| media | メディアタイプ | スタイルシートの対応メディアを指定。複数のメディアを指定する場合は、「media="scree,tv"」のようにカンマ区切りで指定。全メディアに対応する場合は「all」を指定。 |
| scoped | true false | TRUEを指定すると、スタイル要素の親要素とその子要素にのみスタイルが適用されます。 |
サンプル
<head>
<style type="text/css">
body { background:#fff; margin:20px; padding:0; }
h1 { font-size:1.5em; }
h2 { font-size:1.3em; }
</style>
</head>