HTMLに書くべきメタデータ

headの中で、<meta から始まって > で終わる範囲は、 文書に付随するさまざまな情報指定をする箇所で、 そのデータはメタデータと呼ばれます。

必ず指定すべきメタ情報

HTMLはテキストファイルで、ファイルの内容は文字コードが 並んでいます。 つまり、テキストファイルもその実体は文字のコード番号が並んでいるだけです。
(文字と番号の対応表の参考例:ご使用システムのHTMLで扱える符号化の表  ASCIIコード
ここで、一つ文字を一つの番号に割り振りしているだけならよいのですが、 実は、たくさんの割り振り方があるのです。 この割り振りした文字集合の名前をキャラクタセットと呼びます。
近年はユニコードのUTF-8というキャラクタセットがよく使われます。
UTF-8の割り振りで、まなぶの文字列を保存すると E3 81 BE E3 81 AA E3 81 B6番号列で保存されます。
対して、Windowsのメモ帳のデフォルトで使われるキャラクタセットは、 Shift_JIS(正確な名前は「windows-31j」または「MS932」)です。
このUTF-8で保存したファイルを、Shift_JISで開くと ・ソ縺セ縺ェ縺カのように違う文字に化けて見えてしまいます。 この現象は文字化けと呼ばれます。 (まなぶをShift_JISで保存すると 82 DC 82 C8 82 D4の番号列になります。
(これは 各キャラクタセットの文字番号を調べるページ で確認できます。)
また文字化けは、ブラウザの「表示」メニューの中の 「エンコード」の項目から「自動選択」以外のキャラクタセットを選ぶことでも 確認できます。試してみましょう。

以上により、ファイルを保存した時のキャラクタセット と異なるキャラクタセットで開くと文字化けが起きます。
そして、ブラウザが保存した時と同じキャラクタセットで開けるように それを指定するための属性があり、それがcharsetです。 以下にShift_JISのキャラクタセットで保存する場合の例を示します。

	<meta charset="Shift_JIS">

Shift_JISの部分が保存で使用したキャラクタセット名を書きます。 JIS規格のISO-2022-JP や Unixオペレーティングシステムでよく使うEUC-JP などをよく見ます。 テキスト編集ソフトによってはさまざまなキャラクタセットで保存できます。 その保存に使ったキャラクタセットと上記のメタ情報を 合わせなければなりません。

なおこれは、他のメタ要素よりも先に書くべき要素とされています。 また、次に示すhttp-equiv属性で併記することもできます。
(一般には http-equiv属性でcharsetを書いて、上記の記述を省略することが多いようです。)


http-equiv属性

これは、このHTMLを使う側のソフト つまり「Webブラウザなどに与える情報」を指定する部分です。
Webサーバとブラウザ間における情報のやり取り規則は HTTPと呼ばれます。 その規則では、サーバー側がHTMLの送り出し直前で、これら「Webブラウザなどに与える情報」を送る規則になっています。
ですが実際には、この情報を正しく送出していないサーバーが場合が多くて、 ブラウザのベンダーは、その情報をの代わりに、 HTMLフィルそのものに記述してある metaタグのhttp-equiv属性が、 「Webブラウザなどに与える情報」に相当するものとして、使うようになった経緯があります。
なお、equivはequivalentの略文字列で、「〜と同等の,〜に相当する」などの意味です。
つまり ブラウザは、受け取るHTML内の http-equiv属性でHTMLに関する各種情報を判断して表示しているわけです。 この書き方は、次の通りです。
<meta http-equiv="HTTPヘッダのプロパティ名" content="プロパティの値(指定内容)">
以下で、これで書くべきメタ情報の例を示します。

まず、テキストのHTMLであることと、そのキャラクタセットをブラウザに知らせる指定例です。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

次は、HTMLの主言語が日本語であることをブラウザに知らせる言語コードの指定例です。
<meta http-equiv="Content-Language" content="ja">
他の言語コードの例もいくつか紹介します。 なおこれは、国コードとは違います。URLのドメインに使う国コードはISO3166で定められるもので、 ここで示す言語コードとは ISO 639で定められたものです。

英語enラテン語la
ドイツ語deフランス語fr
中国語zh韓国語ko
ロシア語ruベンガル語bem

なお、これらの言語コードは、htmタグのlang属性で指定することもできます。
<html lang="ja">

次は、CSSのスタイルシートを利用する場合に記述すべきものす。 CSS以外のスタイルシートが利用できるので、CSSを使うこをブラウザに知らせる指定例です。
<meta http-equiv="Content-Style-Type" content="text/css">

次は、スクリプトでJavaScriptを使うことをブラウザに知らせる指定例です。
<meta http-equiv="Content-Script-Type" content="text/javascript">
なお、vbscriptを使う場合は、次のように書きます。
<meta http-equiv="Content-Script-Type" content="text/vbscript">

以上より、HTMLに書くべきメタ情報を含めたHTML例を示すと次のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
	<meta http-equiv="Content-Language" content="ja">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript"> 
	<title> </title>
	<style type="text/css"><!--
	 
	 --> 
	 </style>
	 <script type="text/javascript"><!-- 
	 
	 // -->
	 </script>
</head>
<body>


</body>
</html>

もちろんスクリプトを使っていない場合は、その部分が不要です。
以上のように本来は このような多くの記述をすべきものなのです。
ですが、練習用のサンプルでは、学習効果を上げるために 煩雑に見えるこれら記述を省略しています。 主要なブラウザのほとんどは、これらが省略されてもほとんど問題が生じないでしょう。 それは本来の仕様解析とは別に、記述内容から自動的に判断して処理する余計プログラムが組み込まれているからです。
ですが、実際に作る場合は省略すべきものではありません。

なお一般にWebブラウザには、ブラウザキャッシュの機能があります。
これは、常にサーバーからデータをダウンロードして表示するのではなく、 一度見たページのデータ(HTMLや画像など)をPC内に記憶して、 次回に見る時、サーバーから取得したデータでなく、 PC内に記憶したキャッシュデータで、画面に出す機能です。
キャッシュデータを使ってダウンロードしない分だけ、表示までの時間を短縮することができます。
しかしサーバー側で変更したのに、ダウンロードなしキャッシュデータが使われて ブラウザ側で変更されない場合があります。
この場合、ブラウザ側で強制更新処理(Ctrl+F5)の操作を行うと見えるようになります。

しかし、ブラウザのオペレータに更新処理をお願いする訳にには行けません。
対応策として、ブラウザにキャッシュされないように指定することができます。
同時にキャッシュの有効期限も指定した例を以下に示します。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
上記でExpiresを指定した行のcontent=が有効期限で、消去する日時をGMT(グリニッジ標準時) 「例:Fri, 31 Dec 2020 01:31:50 GMT」で指定することや、 content="86400"のように、86400秒後(24時間後)などの指定がことができます。
(指定しても、ブラウザにキャッシュが残ってしまうことがあるようです。)

近年は、スマートホンやタブレットも多用されますが、その場合に使うmetaタグで、 viewport指定があります。


Windows Internet Explorer 8に対する補足:
Windows Internet Explorerは、microsoftの標準Webブラウザですが、W3Cと異なる独自の表現がたくさん存在しています。 そして、Windows Internet Explorer 8(以後は 略してIE8と呼びます)では、 過去のブラウザと同等の表示ができるように、各種の互換モードが存在します。 この指定も『http-equiv属性』で、ページごとに指定できます。例えば、IE7と同等の表示をさせる場合は、 次のようなmataタグをhead内の先頭に書きます。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
content属性には、これ以外に IE=5IE=7IE=8IE=edge を指定できます。 IE=edgeはIE8 に対して、利用できる最も互換性の高いモードの指示です。


なお、このページよりダウンロードして使える「HTML作成練習用テキストエディタ」の起動ツール では、入力支援機能で、これらHTMLに書くべきメタの表現を出すことができるようになっています。