文書のメタデータを表すには？
headタグの書式
headタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
headタグの属性一覧
headタグの解説
<head>は、文書に関する情報（メタデータ）を格納するための要素です。
<head>～</head>の中には、文書のタイトル、基準となるURL、外部スタイルシート、外部スクリプトなどを記述します。
- タイトルを指定するには、<title>要素を使います。
<head>～</head>の中には、基本的に<title>要素を入れなければなりません。
- 基準となるURLを指定するには、<base>要素を使います。
href属性にURLを指定します。
- 文書内で有効なスタイルシートを指定するには、<style>要素を使います。
type属性にはCSSのMIMEタイプを指定します。
type属性を省略すると"text/css"になります。
media属性でリンク先のメディアタイプを指定することができます。
media属性には、「screen」（PC等の高解像度画面）、「handheld」（携帯電話等の低解像度画面）、「all」（全デバイス）などを指定します。
- 外部スタイルシートを指定するには、<link>要素を使います。
rel属性には、"stylesheet"を指定します。
href属性には、外部スタイルシートのファイル名(.css)を指定します。
- 外部スクリプトを指定するには、<script>要素を使います。
src属性に外部スクリプトファイルのファイル名（.jsなど）を指定します。
type属性にはスクリプトのMIMEタイプを指定します。
type属性を省略すると"text/javascript"になります。
charset属性に文字コードを指定することもできます。
- 他の文書との関係性を示すには、<link>要素を使います。
href属性に、外部ファイル名を指定します。
rel属性が関係性を表し、次の値を取ることができます。
「alternate」：代替文書
「archive」：アーカイブ
「author」：著者
「help」：ヘルプ
「icon」：アイコン
「license」：著作権
「pingback」：ピングバック受付
「prefetch：事前取得
「search」：検索
「sidebar」：サイドバー
「stylesheet」：スタイルシート
「tag」：タグ
「index」：目次
「first」：初回
「last」：最終回
「prev」：前回
「next」：次回
「up」：上の階層
- その他のメタ情報を記述するには、<meta>要素を使います。
次のような書式があります。
| タグ | 内容 |
| <meta name="application-name" content="Webアプリケーション名"> | Webアプリケーション名を指定する |
| <meta name="description" content="文書の概要"> | 文書の概要を指定する |
| <meta name="author" content="著者名"> | 著者名を指定する |
| <meta name="generator" content="ソフト名"> | 文書作成に使ったソフト名を指定する |
| <meta name="keywords" content="関連キーワード"> | 関連キーワードをカンマ区切りで指定する |
| <meta http-equiv="content-language" content="言語名"> | 既定の言語名を指定する |
| <meta http-equiv="content-type" content="MIMEタイプや文字コード"> | 文書のMIMEタイプや文字コードを指定する（文字コードはcharsetで指定可能） |
| <meta http-equiv="default-style" content="既定のスタイルシート名"> | 既定のスタイルシートを指定する |
| <meta http-equiv="reflesh" content="3"> | 3秒おきにページを更新する |
| <meta http-equiv="" content="3;http://www.abcd1234.co.jp/"> | 3秒後に指定URLに移動する |
| <meta charset="文字コード名"> | 文書の文字コードを指定する |
<head>～</head>内の記述方法については、サンプルソース２を参照してください。
headタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<title>天気予報</title>
</head>
<body>
<p>
今朝も日本各地で厳しい冷え込みとなりました。東京でも今年の最低気温を観測しました。
また、西日本では昨夜から今朝にかけて雪が降り、広い範囲で雪化粧しています。
各地の天気予報を見てみましょう。</p>
<section>
<h1>近畿</h1>
<p>近畿地方は北部の低気圧の影響で、北部を中心に雨や雪を降るところが多いでしょう。
また、明日にかけて中部や南部も断続的に雨や雪の降るところがある見込みです。</p>
</section>
<section>
<h1>関東・甲信</h1>
<p>東京地方では、現在曇りや晴れのところが多いです。甲信地方では雨や雪の降るところもあります。
明日は、今日よりも寒くなるでしょう。</p>
</section>
</body>
</html>
headタグのサンプル画面1
headタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://winxppro001:8080/">
<title>C言語講座</title>
<link rel="stylesheet" href="sample/default.css">
<link rel="stylesheet" href="sample/color.css" title="color">
<script src="sample.js"></script>
<meta name="description" content="C言語講座">
</head>
<body>
<header>
<h1>C言語のサンプル</h1>
</header>
<section>
<h1>sample1</h1>
<pre><code>
#include <stdio.h>
main()
{
printf("Hello World!\n");
}
</code></pre>
</section>
<input type="button" value="実行結果を見る" onclick="sample()">
</body>
</html>
headタグのサンプル画面2
headタグの関連項目
