Close
<meta>タグは、文書に関するメタデータを表す際に使用します。
title要素、
base要素、
link要素、
style要素、
script要素
を使っても表現できない様々な種類のメタデータは、meta要素を使って指定します。
HTMLの仕様では、meta要素には終了タグ</meta>はありません。
以下は、メディアタイプとして定義されていますが、非推奨となっています。
可能ならば、使用を避けた方が良いでしょう。
以下に、meta要素のname属性に指定できるメタデータの名前を紹介します。
メタデータの名前は、大文字と小文字を区別しません。
以下のサンプルは、「Frontweaver」というツールによってページが生成されたことを示しています。
この場合、meta要素は出力のページのhead要素のなかに含めます。
<!doctype html>
<html>
<head>
<meta name="generator" content="Frontweaver 8.2">
</head>
<body>
...
以下のサンプルは、ユーザーがページを探すために使用する可能性があるいくつかのキーワードを、カンマ（ , ）区切りで指定しています。
ただし、多くの検索エンジンは meta name=”keywords” で指定されたキーワードを考慮していません。
これは、この機能が検索エンジンへのスパム行為に利用されてきた歴史があり信頼性が低いためです。
<!doctype html>
<html lang="ja">
<head>
<title>高速道路で使用される書体</title>
<meta name="keywords" content="書体,字体,フォント,高速道路">
</head>
<body>
...
以下のサンプルは、meta name=”referrer”で文書レベルのリファラーポリシーを指定しています。
値に「origin」を指定すると、リファラー情報としてオリジン情報のみを送信するように指定したことになります。
オリジン情報のみを送信するとは、例えば「https://example.com/page 」の文書からは、「https://example.com/」というリファラー情報が送信されるということです。
<!doctype html>
<html>
<head>
<meta name="referrer" content="origin">
</head>
<body>
...
以下のサンプルは、meta name=”color-scheme”でカラースキーム（配色体系）を指定しています。
content=”dark”を指定しているので、
ページがダークモード（暗い背景色と明るい前景色のカラースキーム）で処理できることを示します。
<meta name="color-scheme" content="dark">
以下のサンプルは、meta name=”theme-color”で文書のテーマカラーを指定しています。
文書のテーマカラーとは、ユーザーエージェントがこの文書に関するインターフェースの表示をカスタマイズする際の推奨色です。
例えば、ブラウザは指定されたテーマカラーを、この文書のタイトルバーの背景色として利用するかもしれません。
<!doctype html>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a">
...
上記サンプルにmedia属性を追加することで、どのような場面でテーマカラーを使用するのかを指定できます。
以下のサンプルは、ダークモードのみでテーマカラーを使用するために、media属性の値に prefers-color-scheme: dark を指定しています
<!doctype html>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">
...
meta要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマディレクティブとなります。
プラグマディレクティブ（Pragma directive）とは、文書がどのように挙動するかの指示です。
具体的な挙動内容はcontent属性で指定します。
以下に、http-equiv属性に指定できるキーワードを示します。
<meta http-equiv="content-type" content="text/html; charset=utf-8"> ただし、この機能はcharset属性の単なる代替形式に過ぎません。
文字コードを指定する場合には、charset属性を使用するほうが短く記述できます。
<meta charset="utf-8"> ひとつの文書内に、エンコーディング宣言状態のhttp-equiv属性を持つmeta 要素と、
charset属性を持つmeta要素の両方を含めてはなりません。
<meta http-equiv="default-style" content="緑スタイル">5分（300秒）ごとにリロードします。
<meta http-equiv="refresh" content="300">20秒後にpage4 へリダイレクトします。
<meta http-equiv="refresh" content="20; URL=page4 ">Internet Explorerで表示した際に、作者の意図に近い表示にできるかもしれません。
<meta http-equiv="x-ua-compatible" content="IE=edge">
以下のサンプルでは、インラインJavaScriptの実行を防止し、
すべてのプラグインコンテンツをブロックするように指定しています。
この指定により、クロスサイト・スクリプティング攻撃のリスクが軽減するかもしれません。
<meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'">
文書内に文字エンコード宣言を配置する場合には、
文書ごとにmeta要素による文字エンコーディング宣言を1つだけ含めることができます。
HTML文書では、文字エンコーディングが UTF-8 であることを宣言するために、
以下のマークアップを文書の上部（head要素のなか）に含めます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
...
エンコーディング標準では、「utf-8」を使用する必要があります。
文書内に文字エンコード宣言を配置するかどうかに関係なく、
文書で実際に使用される文字エンコードは UTF-8 でなければなりません。
UTF-8 以外のエンコーディングを使用すると、
フォーム送信やURLエンコーディングで予期しない結果が生じる可能性があります。
XML文書では、文書の最上部に配置するXML宣言のなかで、
文字エンコーディングが UTF-8 であることを宣言します。
<?xml version="1.0" encoding="utf-8"?>
iframe要素のsrcdoc属性で指定される文書には、文字エンコーディング宣言が含まれていてはなりません。
この場合、ソースはiframeを含む文書の一部となるため、すでにデコードされています。
meta要素を使用する場合、name属性、http-equiv属性、charset属性、itemprop属性のうち、いずれか1つを指定する必要があります。
name属性、http-equiv属性、itemprop属性のいずれかが指定されている場合は、同時にcontent属性を指定する必要があります。
それ以外の場合は、content属性を指定しません。
name属性は、メタデータの名前を指定します。
文書のメタデータは、name属性で指定するメタデータの名前と、content属性で指定するメタデータの値のペアで表されます。
content属性が指定されていない場合、メタデータの値は空の文字列となります。
http-equiv属性は、プラグマディレクティブ（Pragma directive＝文書がどのように挙動するかの指示）を定義します。
挙動の具体的な内容は、content属性で指定します。
charset属性は、文書で使用される文字エンコーディングを宣言します。
ひとつの文書のなかに、charset属性を持つmeta要素が複数あってはなりません。
media属性は、メタデータが適用されるメディアを示します。
どのカジノが自分に最適か分からないですか?