複数のキーワードを指定する場合、カンマ（ , ）で区切って記述します。
referrer
文書のデフォルトのリファラーポリシーを指定します。
値に指定できるキーワードは、以下の通りです。
- no-referrer …… リファラー情報を送信しません。
- no-referrer-when-downgrade …… httpsからhttpへはリファラー情報を送信しません。
- same-origin …… 同一オリジンの場合のみリファラー情報を送信します。
- origin …… オリジン情報のみを送信します。例えば「https://example.com/page 」の文書からは、「https://example.com/」というリファラー情報が送信されます。
- strict-origin …… オリジン情報のみを送信します。ただし、httpsからhttpへはリファラー情報を送信しません。
- origin-when-cross-origin …… 同一オリジンの場合のみリファラー情報を送信します。異なるオリジン間ではオリジン情報のみを送信します。
- strict-origin-when-cross-origin …… 同一オリジンの場合のみリファラー情報を送信します。異なるオリジン間ではオリジン情報のみを送信します。ただし、httpsからhttpへはリファラー情報を送信しません。これが初期値です。
- unsafe-url …… リファラー情報を送信します。機密性の高い文書にこのリファラーポリシーを設定する際には、慎重に検討してください。
- “” …… 空の文字列を指定すると、文書レベルではリファラーポリシーが指定されていないことを示します。別の場所で指定したリファラーポリシーがあれば、それが適用されるかもしれません。
theme-color
カラーコード値やカラーネームで、文書のテーマカラー指定します。
color-scheme
カラースキーム（配色体系）を指定します。
値に指定できるキーワードは、以下の通りです。
- normal …… ノーマル配色。これが初期値です。
- light …… 明るい配色（ライトモード）
- dark …… 暗い配色（ダークモード）
- only …… ユーザーエージェントによる配色のオーバーライドを禁止します。
- カスタム識別子 …… 作者が任意の文字列で定義したオリジナルの配色を指定します。
以下のサンプルは、「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属性を追加することで、どのような場面でテーマカラーを使用するのかを指定できます。
以下のサンプルは、ダークモードのみでテーマカラーを使用するために、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要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマディレクティブとなります。
プラグマディレクティブ（Pragma directive）とは、文書がどのように挙動するかの指示です。
具体的な挙動内容はcontent属性で指定します。
以下に、http-equiv属性に指定できるキーワードを示します。
- content-language
- コンテンツ言語を指定します。
この機能は規格に適合していないため、代わりにlang属性を使用することが推奨されています。
- content-type
- エンコーディング宣言（文字コード）を指定します。
content属性には、”text/html;” のあとに空白スペースを入れて charset=utf-8 が続きます。
<meta http-equiv="content-type" content="text/html; charset=utf-8">
ただし、この機能はcharset属性の単なる代替形式に過ぎません。
文字コードを指定する場合には、charset属性を使用するほうが短く記述できます。
ひとつの文書内に、エンコーディング宣言状態のhttp-equiv属性を持つmeta 要素と、
charset属性を持つmeta要素の両方を含めてはなりません。
- default-style
- デフォルトのCSSスタイルシートセットの名前を指定します。
<meta http-equiv="default-style" content="緑スタイル">
- refresh
- 再読み込みや他のURLへのリダイレクトを指定します。content属性には、秒数とURLを指定します。
正の整数で秒数、セミコロン（ ; ）、空白スペース、URL=文字列の順序で記述します。
秒数だけを指定してURL=文字列を省略すると、現在のページをリロードします。
5分（300秒）ごとにリロードします。
<meta http-equiv="refresh" content="300">
20秒後にpage4 へリダイレクトします。
<meta http-equiv="refresh" content="20; URL=page4 ">
- set-cookie
- Cookieをセットするという指示ですが、この機能は規格に適合していません。
この指定をしてもユーザーエージェントに無視される可能性があり効果はありません。
- x-ua-compatible
-
X-UA互換を指定するための機能です。
Internet Explorer8.0以降で互換モードで表示したい場合などに指定します。
この指定をしてもユーザーエージェントに無視される可能性があります。
Internet Explorerで表示した際に、作者の意図に近い表示にできるかもしれません。
<meta http-equiv="x-ua-compatible" content="IE=edge">
- content-security-policy
- 文書にコンテンツ セキュリティ ポリシーを適用します。
以下のサンプルでは、インライン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要素の属性の使用ルール
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属性は、メタデータが適用されるメディアを示します。
広告
