HyperText Markup Language meta element.
meta要素は、その文書に関する情報（メタデータ）を指定する際に使用します。メタデータとは、“情報に関する情報”のことですが、HTML の仕様では“その文書に関する様々な情報”を意味します。
HTML文書のメタデータは <head>〜</head> の中に、
などの要素で指定しますが、これらの要素で表現できないその他の様々なメタデータは meta要素で表します。
meta要素を指定する際には、name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。
また、name属性か http-equiv属性のどちらかが指定された場合には、必ず content属性とセットで使用します。セットで使用することでメタデータの定義（名前）とその内容が関連付けられます。
また、HTML5では新たに charset属性が規定され、このコンテンツ属性を使う事で、ドキュメントの文字エンコーディングを表す事ができます。
meta {
display: none;
}
charset属性がセットされた meta要素は、文書の文字エンコーディングを指定する際に使用します。
日本語の文字エンコーディングの値としては、"utf-8"・"shift-jis"・"euc-jp"などが挙げられます。大文字と小文字の違いは区別されません。charset属性を指定した meta要素は、一つの文書に一つだけしか配置できませんので、注意してください。尚、XML 文書に meta要素の charset属性を指定する場合には、値には "utf-8" を指定します。
meta要素で文字エンコーディングを指定する場合、HTML4では以下のように記述していました。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。
<meta charset="UTF-8">
文字エンコーディングを指定しないと、例えば、日本語で作成された Webページに英語版のブラウザでアクセスした場合などに文字化けが起きることがあります。必須ではありませんが、できるだけ指定した方が良いでしょう。
meta要素に name属性がセットされている場合は、この meta要素はメタ情報を表すことになります。そのメタ情報値は content属性を使って指定します。name属性は、メタ情報の種類を表します。
一般的な Webページでの meta要素の例
<meta name="description" content="HTML5 の meta 要素の説明をしています。">
<meta name="generator" content="Dreamweaver">
name="keywords" は、その HTML文書がどのような内容を示したものかキーワードで指定します。複数のキーワードを指定する場合には、半角カンマ（ , ）区切りで指定します。
<meta name="keywords" content="HTML,HTML5,CSS,CSS3,JavaScript">
name="description" は、その文書の説明を短文で指定します。ここで指定する値は、Google の検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。
<meta name="description" content="HTML・CSS等の解説サイト">
また、name="robots" content="noindex,nofollow" は、検索エンジンのクローラ（ロボット）に対して URL をインデックスしないように（noindex）、文書内のリンクをたどらないように（nofollow）知らせるための指定です。この指定はすべての検索エンジンに対して有効ではなく、この情報を参照する検索エンジンに対してのみ有効となる指定なので注意してください。検索エンジン対策として一般的に利用されていますが、W3C の仕様には記載されていません。
<meta name="robots" content="noindex,nofollow">
name="author" は、その文書の作者を示す際に指定します。
<meta name="author" content="WasteOfTime">
name="generator" は、文書作成に使用したツールやソフトウェアを示すものです。これは、ツールやソフトウェアを使用して Webページが自動生成された際に、そのツール自身が Webページを出力する際に head要素内に挿入するものです。手作りしたウェブページに使用するものではないので注意してください。
<meta name="generator" content="Dreamweaver">
meta要素に http-equiv属性が指定してある場合は、その meta要素はプラグマ指示子（pragma directive）を表すことになります。そのプラグマ指示子の値は content属性を使って指定します。プラグマ指示子とは“実行命令を指示するもの”のことで、ユーザーエージェント（ブラウザ）に対して文書の“状態・挙動”を指示する役割があります。http-equiv属性に利用可能な値には、以下の4つのキーワードを指定することができます。
http-equiv="content-language" は、文書全体のデフォルトの言語を指定するプラグマです。言語は content属性で指定します。例えば、日本語なら content="ja"、英語なら content="en" となります。その他の主な言語には、zh（中国）、ko（韓国語）、de（ドイツ語）、fr（フランス語）、it（イタリア語）、es（スペイン語）、ru（ロシア語）、ar（アラビア語）などがあります。
旧来のマークアップとの互換性のために用意されたプラグマですが、基本的には、言語をセットする場合は、グローバル属性である lang属性を使う事が推奨されます。通常は、html要素に lang属性をセットして、ドキュメント全体の言語をマークアップします。
<meta http-equiv="content-language" content="ja">
http-equiv="content-type" は、ファイルタイプや文字エンコーディングを指定するために使います。ファイルタイプを指定する場合には、例えば HTML文書なら content="text/html" と指定します。また、文字エンコーディングを指定すれば、charset属性の代わりとして機能しますが、旧来のマークアップを認めたものでしかなく、HTML5では文字エンコーディングを指定する意味しかありません。HTML5では、この文字エンコーディングを指定する方法として、meta要素の charset属性が規定されています。
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
http-equiv="default-style" は、複数の代替スタイルシートを用意して、そのうち 1つをデフォルトの優先スタイルシートとして指定することができます。具体的には、例えば、content="default.css" のように記述して、デフォルトスタイルとなる CSSファイルの URI を指定します。この指定をすると、link要素で複数の CSSファイルを指定している場合に、その中で優先して利用する CSSファイルをブラウザに伝えることができます。ここで指定した値は、スタイルシートを読み込む link要素か style要素の title属性にセットした値と一致しなければいけません。
<meta http-equiv="default-style" content="default.css">
meta要素の http-equiv属性に "default-style" をセットし、content属性に、優先スタイルシートを読み込む link要素の title属性の値をセットしておきます。
代替スタイルシートと優先スタイルシートのマークアップ例
<meta http-equiv="default-style" content="red">
<link rel="stylesheet" type="text/css" href="red.css" title="red">
<link rel="stylesheet" type="text/css" href="blue.css" title="blue">
この例では、red.css だけが適用されます。もし meta要素がなければ、red.css と blue.css の両方が適用されてしまいます。
このような形で代替スタイルを用意すると、いくつかのブラウザでは、ユーザーがスタイルを選択できるインターフェースが用意されます。
http-equiv="refresh" は、別の URL へのリダイレクトや現在ページの再読み込みを指定します。content属性に数字がセットされれば、該当のページが読み込まれてから、その数字が表す秒数が経過すると、該当のページが再読み込みされます。
<meta http-equiv="refresh" content="10">
この例では、同じページを 10秒後に再読み込みをすることになります。しかし、同じページを読み込むことになるので、10秒おきにページの再読み込みが発生する事になります。
もし、次のように、content属性に、秒数だけでなく、URLもセットした場合は、指定の秒数が経過してから、指定の URL へ遷移します。
<meta http-equiv="refresh" content="5; url=newpage.html">
この例では、5秒後に newpage.html というページにリダイレクトする場合には以下のように記述します。
※注意：w3.org によれば、meta要素による refresh を多用していいる Webサイトは、検索エンジンのリストから削除されることがあるようです。それを避けたい場合には、代わりに 301 リダイレクトを使用すると良いとのことです。
HTML5では、name属性の値として "application-name" が追加されています。name="application-name" は、ウェブアプリケーションの名前を示すものです。これはウェブアプリケーションを作成するに場合に利用する値であり、ページがウェブアプリケーションでない場合には使用してはいけません。また、使用する場合には一つの文書に一つだけ指定します。
<meta name="application-name" content="Gmail">
「name="viewport"」を使って、デバイスサイズに合わせて表示することができます。パソコンとスマホの両方の幅に合わせてサイト幅がフィットするようになりますので、共用のサイト作ることも可能になるのでは？と考えています。
<meta name="viewport" content="width=device-width,initial-scale=1.0">