meta要素

meta要素は、title要素、base要素、link要素、style要素、script要素で表せない、様々なメタデータを表す要素。メタデータとは、ドキュメントに関する情報のこと。

カテゴリー メタデータ・コンテンツ。
コンテキスト charset属性が存在する、もしくは、http-equiv属性が「content-type」である場合、head要素内で使用できる。
http-equiv属性が存在するが、http-equiv属性が「content-type」でない場合、head要素内、もしくは、head要素が親要素であるnoscript要素内で使用できる。
name属性が存在する場合、メタデータ・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル 空。
属性 グローバル属性。
charset属性、name属性、http-equiv属性、content属性。
charset属性、name属性、http-equiv属性のうち、何れか１つは指定しなければならない。
ブラウザ対応

要点

属性

属性 説明
charset属性 文字エンコーディングを指定する属性。
name属性 メタデータの種類を指定する属性。
http-equiv属性 プラグマ指示子の種類を指定する属性。
content属性 メタデータの内容、もしくは、プラグマ指示子の指示の内容を指定する属性。

サンプルコード

文字エンコードを指定

charset属性を使う方法

charset属性を使う、HTML5ならではの指定方法。

<meta charset="UTF-8">
charset属性を使わない方法

http-equiv属性にcontent-typeを指定する、従来の方法でも指定できる。

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

メタデータ

キーワード
<meta name="keywords" content="キーワード１, キーワード２, キーワード３, ">
ドキュメント概要
<meta name="description" content="ドキュメントの概要、説明。">

プラグマ指示子

meta要素にhttp-equiv属性を指定することで、プラグマ指示子となる。

自動再読み込み

60秒ごとに、ドキュメントを自動的に再読み込みするサンプルコード。

<meta http-equiv="refresh" content="60">
リダイレクト

３秒後に「sample.html」にリダイレクトするサンプルコード。

<meta http-equiv="refresh" content="3; url=sample.html">

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>meta要素のサンプル・ドキュメント</title>
	</head>
	<body>
		<h1>見出し[h1]</h1>
		<article>
			<h2>見出し[H2]</h2>
			<p>記事セクション。</p>
		</article> 
	</body>
</html>

実際の表示

別窓で表示。