1. 4 HTMLの要素
    1. 4.1 文書要素
      1. 4.1.1 html要素
    2. 4.2 文書メタデータ
      1. 4.2.1 head要素
      2. 4.2.2 title要素
      3. 4.2.3 base要素
      4. 4.2.4 link要素
        1. 4.2.4.1 link要素によって作成されるハイパーリンクを追跡する
      5. 4.2.5 meta要素
        1. 4.2.5.1 標準メタデータ名
        2. 4.2.5.2 他のメタデータ名
        3. 4.2.5.3 プラグマディレクティブ
        4. 4.2.5.4 文書の文字エンコーディングを指定する
      6. 4.2.6 style要素

4 HTMLの要素

4.1 文書要素

4.1.1 html要素

Element/html

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
なし。
この要素を使用できるコンテキスト
文書の文書要素として。
複合文書で、サブ文書断片が許可される場所ならどこでも。
コンテンツモデル
head要素の後に続いてbody要素。
text/htmlにおけるタグ省略
html要素内の最初の文がコメントでない場合、html要素の開始タグは省略することができる。
html要素の直後がコメントでない場合、html要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

html要素は、HTML文書のルートを表す

著者は、文書の言語を与えるために、ルートのhtml要素にlang属性を指定することが推奨される。これは、音声合成ツールにどの発音を使用するかを決定する、翻訳ツールを使用するための規則を決定する、などの手助けを行う。

次の例において、html要素は、文書言語が英語であることを宣言する。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</p>
</body>
</html>

4.2 文書メタデータ

4.2.1 head要素

Element/head

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
html要素での最初の要素として。
コンテンツモデル
文書がiframe srcdoc文書であるか、タイトル情報がより上位プロトコルから利用可能な場合、1つより多くないtitle要素および1つより多くないbase要素である、0個以上のメタデータコンテンツ
そうでなければ、厳密に1つのtitle要素が存在しかつ1つより多くないbase要素である、1つ以上のメタデータコンテンツ
text/htmlにおけるタグ省略
要素が空である場合、またはhead要素内の最初の文が要素である場合、head要素の開始タグは省略することができる。
head要素の直後がASCII空白文字またはコメントでない場合、head要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLHeadElementを使用する。

head要素は、Documentに関するメタデータの集まりを表す

head要素でのメタデータの集まりは、大きいかもしれないし、小さいかもしれない。これは非常に簡潔な例である:

<!doctype html>
<html lang=en>
 <head>
  <title>A document with a short head</title>
 </head>
 <body>
 ...

これはより大きな例である:

<!DOCTYPE HTML>
<HTML LANG="EN">
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="https://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

title要素は、ほとんどの状況で必須の子であるが、上位プロトコルがタイトル情報を提供する場合、たとえばHTMLが電子メールのオーサリング形式として使用されるときの電子メールの件名において、title要素は省略できる。

4.2.2 title要素

Element/title

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer1+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
他のtitle要素を含まないhead要素内。
コンテンツモデル
要素間の空白文字でないテキスト
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTitleElementを使用する。

title要素は、文書のタイトルまたは名前を表す。たとえば、ユーザーの履歴やブックマークまたは検索結果などで、文脈を無視して使用される場合でも、著者は文書を識別するタイトルを使用すべきである。文脈から取り出したときに最初の見出しが独立する必要はないので、文書のタイトルは多くの場合、最初の見出しとは異なる。

文書ごとに複数のtitle要素が存在してはならない。

タイトルがないことが合理的なDocumentの場合、title要素はおそらく必要とされない。この要素が必要とされる場合の説明については、head要素のコンテンツモデルを参照のこと。

title.text [ = value ]

要素の子テキストコンテンツを返す。

与えられた値を持つ要素の子を置換するために、設定できる。

それらの同じページ上で使用されるかもしれないトップレベルの見出しと対照的に、適切なタイトルのいくつかの例を次に示す。

  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> book is...

次のページは、同じサイトの一部であるかもしれない。最初の見出しが、読者がどのような文脈か知っており、したがってダンスがサルサやワルツであるかどうかを知りたいと思わないだろうことを前提としつつ、タイトルが明確に主題を説明する方法に注意する:

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

文書のタイトルとして使用する文字列は、document.title IDL属性によって与えられる。

4.2.3 base要素

Element/base

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
他のbase要素を含まないhead要素内。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
href文書基底URL
targetハイパーリンクナビゲーションおよびフォーム送信に対するデフォルトのナビゲート可能
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLBaseElementを使用する。

The base element allows authors to specify the document base URL for the purposes of parsing URLs, and the name of the default navigable for the purposes of following hyperlinks. この要素は、この情報を超えた任意のコンテンツを表すものでない。

文書ごとに複数のbase要素が存在してはならない。

base要素は、href属性、またはtarget属性のいずれか、あるいはその両方を持たなければならない。

hrefコンテンツ属性が指定される場合、潜在的にスペースで囲まれた妥当なURLでなければならない。

href属性を持つ場合、base要素は、html要素を除いて(manifest属性はbase要素に影響されない)、URLを取得するよう定義された属性を持つツリー内の他の要素の前に来なければならない。

target属性が指定される場合、Documentハイパーリンクフォームナビゲーションを引き起こすときに、どのナビゲート可能がデフォルトとして使用するかを指定する妥当なナビゲート可能の名前またはキーワードを含まなければならない。

target属性を持つ場合、base要素は、ハイパーリンクを表すツリー内の要素の前に来なければならない。

この例において、base要素は文書の基底URLを設定するために使用される:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="https://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

上記の例において、リンクは"http://www.example.com/news/archives.html"へのリンクとなる。

Element/link

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
メタデータコンテンツ
要素がbody内で許可される場合フローコンテンツ
要素がbody内で許可される場合フレージングコンテンツ
この要素を使用できるコンテキスト
メタデータコンテンツが期待される場所。
headの子であるnoscript要素内。
要素がbody内で許可される場合フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
hrefハイパーリンクのアドレス
crossorigin — 要素が生成元をまたいだ要求を処理する方法
relハイパーリンクと宛先のリソースを含む文書の関係
media — 受け入れ可能なメディア
integritySubresource Integrityチェックで使用される整合性メタデータ[SRI]
hreflang — リンクされたリソースの言語
type — 参照されるリソースタイプのヒント
referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシー
sizes — アイコンのサイズ(rel="icon"に対する)
imagesrcset — 高解像度ディスプレイや小型モニターなど、様々な状況で利用する画像。(rel="preload"に対して)
imagesizes — 異なるページレイアウトの画像サイズ(rel="preload"に対して)
as — プリロードリクエストの潜在的な宛先rel="preload"およびrel="modulepreload"に対して)
blocking — 要素が潜在的にレンダリングブロッキングであるかどうか
color — サイトのアイコンをカスタマイズするときに使用する色(rel="mask-icon"に対して)
disabled — リンクが無効であるかどうか
fetchpriority — 要素によって開始されるフェッチ優先度を設定する
Also, the title attribute has special semantics on this element: Title of the link; CSS style sheet set name
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLLinkElementを使用する。

link要素は、著者が文書を他のリソースとリンクするのを可能にする。

リンクのアドレスは、href属性で与えられる。href属性が存在する場合、その値は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。href属性またはimagesrcset属性のいずれか、または両方が存在しなければならない。

(関係を)示されるリンクの種類はrel属性値によって与えられ、存在する場合、順不同の一意な空白区切りトークンの集合である値を持たなければならない。許可されたキーワードとその意味は、後の節で定義される。

link要素はrel属性またはitemprop属性を持たなければならないが、同時に持ってはならない。

link要素がitemprop属性を持つ、またはbody-okであるキーワードのみを含むrel属性を持つ場合、要素はbody内で許可されると呼ばれる。これは、要素がフレージングコンテンツが期待される場所で使用できることを意味する。

rel属性が使用される場合、この要素はページのbody内でのみ使用することができる。itemprop属性とともに使用される場合、マイクロデータモデルの制限と仮定して、要素はhead要素またはページのbody要素で使用できる。


外部リソースへのリンクハイパーリンクという、2つのリンクカテゴリーがlink要素を用いて作成できる。リンクタイプの節では、あるリンクタイプが外部リソースまたはハイパーリンクであるかどうかを定義する。1つのlink要素は、複数のリンク(一部は外部リソースリンクかもしれず、一部はハイパーリンクであるかもしれない)を作成できる。正確には、どのリンクがどれだけ作成されるかは、rel属性で与えられるキーワードに応じて異なる。ユーザーエージェントは、要素あたりの基準ではなく、リンクあたりの基準でリンクを処理しなければならない。

link要素に対して作成された各リンクは別々に処理される。たとえば、rel="stylesheet"をもつ2つのlink要素が存在する場合、これらは個別の外部リソースとして数え、およびそれぞれが独立に独自の属性によって影響される。同様に、単一のlink要素が値next stylesheetを伴うrel属性を持つ場合、それはハイパーリンクnextキーワードへの)および外部リソースリンクstylesheetキーワードへの)の両方を作成し、それらはそれぞれに(mediaまたはtitleのような)他の属性の影響を受ける。

たとえば、次のlink要素は、(同じページへの)2つのハイパーリンクを作成する。

<link rel="author license" href="/about">

この要素によって作成される2つのリンクは、1つは対象ページが現在のページの著者に関する情報を持つセマンティックであり、1つは現在のページが提供されている内部でライセンスに関する情報を対象ページが持つセマンティックである。

link要素とrel属性で作成されるハイパーリンクは、文書全体に適用される。これは、コンテキストが文書内のリンク位置によって与えられるリンク型を示す、aおよびarea要素のrel属性とは対照的である。

aおよびarea要素によって作成されたものとは異なり、link要素によって作成されたハイパーリンクは、提案されたデフォルトのレンダリングをサポートするユーザーエージェントでは、デフォルトで文書の一部として表示されない。そして、たとえCSSを使用して強制的に表示されたとしても、アクティブ化動作はない。 代わりに、ページまたはページのコンテンツを消費する他のソフトウェアによって使用される可能性のあるセマンティック情報を主に提供する。さらに、ユーザーエージェントは、そのようなハイパーリンクをたどるための独自のUIを提供することができる。

外部リソースへのリンクに対する正確な振る舞いは、関連するリンク型に対して定義されるように、正確な関係に依存する。


crossorigin属性はCORS設定属性である。これは、外部リソースリンクでの使用を意図される。

media属性は、リソースが適用されるメディアを表す。値は妥当なメディアクエリーリストでなければならない。

Subresource_Integrity

Support in all current engines.

Firefox43+Safari11.1+Chrome45+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

integrity属性は、この要素が責任を負うリクエストに対する完全性メタデータを表す。値はテキストである。属性は、stylesheetpreloadまたはmodulepreloadキーワードを含むrel属性を持つlink要素のみで指定されなければならない。[SRI]

link要素のhreflang属性は、a要素のhreflang属性と同じセマンティックスを持つ。

type属性は、リンクされたリソースのMIMEタイプを提供する。これは単なる助言である。値は妥当なMIMEタイプ文字列でなければならない。

外部リソースへのリンクについて、それらがサポートしないリソースのフェッチを回避できるように、type属性はユーザーエージェントへのヒントとして使用される。

referrerpolicy属性は、リファラーポリシー属性である。属性がリンクされた外部リソースをフェッチして処理するときに使用されるリファラーポリシーを設定するのを手伝う場合、この属性は外部リソースリンクとともに使用するためのものである。[REFERRERPOLICY]

title属性は、リンクのタイトルを与える。1つの例外を除いて、これは純粋に助言的である。値はテキストである。例外は、title属性がCSSスタイルシートセットを定義する、文書ツリー内であるスタイルシートリンクである。

link要素のtitle属性は、タイトルをもたないリンクが親要素のタイトルを継承しない点で、他のほとんどの要素に属するグローバルtitle属性とは異なる。それは単にタイトルを持たない。


imagesrcset属性は存在してもよく、かつsrcset属性である。

幅記述子が使用されない場合)imagesrcset属性およびhref属性は、ソースセット画像ソースに一緒に寄与する。

imagesrcset属性が存在しかつ幅記述子を用いる任意の画像候補文字列を持つ場合、sizes属性も存在しなければならず、かつsizes属性である。imagesizes属性はソースセットソースサイズに寄与する。

imagesrcset属性およびimagesizes属性は、preloadキーワードを指定するrel属性と、"image"状態のas属性の両方を持つlink要素上でのみ指定しなければならない。

これらの属性は、srcsetおよびsizes属性に対応する値を持つimg要素によって後に使用される適切なリソースをプリロードすることを可能にする:

<link rel="preload" as="image"
      imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
      imagesizes="50vw">

<!-- ... later, or perhaps inserted dynamically ... -->
<img src="wolf.jpg" alt="A rad wolf"
     srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
     sizes="50vw">

href属性を省略していることに注意する。これは、imagesrcsetをサポートしないブラウザーにのみ関係があり、そのような場合には誤った画像がプリロードされる可能性が高いためである。

imagesrcset属性は、art directionに対して、picture要素のソースから選択された適切なリソースをプリロードするために、media属性と組み合わせることができる。

<link rel="preload" as="image"
      imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
      media="(max-width: 800px)">
<link rel="preload" as="image"
      imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
      media="(min-width: 801px)">

<!-- ... later, or perhaps inserted dynamically ... -->
<picture>
  <source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
          media="(max-width: 800px)">
  <img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
       alt="An awesome dog">
</picture>

sizes属性は、視覚形式のアイコンのサイズを与える。存在する場合、この値は単に助言を与えるだけである。存在する場合、この属性は、ASCII大文字・小文字不区別である順不同の一意な空白区切りトークンの集合である値を持たなければならない。値はそれぞれ、"any"に一致するASCII大文字・小文字不区別である文字列か、2つの妥当な非負整数からなる値のいずれかでなければならない。この数値は、先行するU+0030 DIGIT ZERO(0)文字を持たず、かつ1つのU+0078 LATIN SMALL LETTER XまたはU+0058 LATIN CAPITAL LETTER X文字により分離される。この属性は、iconキーワードまたはapple-touch-iconキーワードを指定するrel属性を持つlink要素でのみ指定しなければならない。

apple-touch-iconキーワードは、登録された事前定義されたリンクタイプの集合への拡張であるが、ユーザーエージェントは形はどうあれそのキーワードをサポートする必要はない。


as属性は、href属性によって与えられるリソースに対するプリロードリクエストの潜在的な宛先を指定する。この属性は列挙属性である。各潜在的な宛先は、同じ名前の状態にマッピングする、この属性のキーワードである。属性は、preloadキーワードを含むrel属性を持つlink要素で指定されなければならない。これは、modulepreloadキーワードを含むrel属性を持つlink要素で指定されてもよい。そのような場合には、script-like destinationである値を持たなければならない。他のlink要素については、それを指定してはならない。

属性は、欠損値のデフォルトまたは不正値のデフォルトを持たない。これは、属性の無効または欠損値が状態なしに対応することを意味する。これは処理モデルで説明される。preloadの場合、両方の条件はエラーである。modulepreloadリンクの場合、欠損値は"script"として扱われる。


blocking属性はブロッキング属性である。It is used by link types stylesheet and expect, and it must only be specified on link elements that have a rel attribute containing those keywords.


color属性は、mask-iconリンクタイプとともに使用される。この属性は、mask-icon キーワードを含む rel 属性を持つlink要素でのみ指定しなければならない。この値は、ユーザーエージェントがサイトをピン留めするときに目に付くアイコンの表示をカスタマイズするために使用することができる推奨色を定義する、CSS <color>生成物と一致する文字列でなければならない。

この仕様は、color属性に対するユーザーエージェント要件を一切持たない。

mask-iconキーワードは、登録された事前定義されたリンクタイプの集合への拡張であるが、ユーザーエージェントは形はどうあれそのキーワードをサポートする必要はない。


link要素は、関連付けられた明示的に有効な真偽値を持つ。最初はfalseである。

disabled属性は、stylesheetリンクタイプで使用される真偽属性である。この属性は、stylesheetキーワードを含むrel属性を持つlink要素でのみ指定しなければならない。

disabled属性が削除されるたびに、link要素の明示的に有効な属性をtrueに設定する。

disabled属性を動的に削除する、例えばdocument.querySelector("link").removeAttribute("disabled")を使用すると、スタイルシートをフェッチして適用する。

<link disabled rel="alternate stylesheet" href="css/pooh">

HTMLLinkElement/fetchPriority

FirefoxNoSafari🔰 preview+Chrome102+
Opera?Edge102+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

fetchpriority属性は、外部リソースリンクでの使用を目的としたフェッチ優先属性であり、リンクされたリソースのフェッチと処理時に使用される優先度を設定するために使用される。

対話的なユーザーエージェントは、ユーザーインターフェイス内のどこかで、link要素を使用して作成されるハイパーリンクを追跡する手段をユーザーに提供してもよい。そのようなfollow the hyperlinkアルゴリズムの呼び出しでは、 userInvolvement引数を"browser UI"に設定しなければならない。正確なインターフェイスはこの仕様で定義されないが、文書で各link要素とともに作成される各ハイパーリンクに対して、一部のフォームまたは別のもの(おそらく単純化された)中で、(以下に再び定義されるように、要素の属性から得られる)次の情報を含めることができる:

ユーザーエージェントはまた、(type属性によって与えられるような)リソースのタイプなどの情報を含めることができる。

4.2.5 meta要素

Element/meta

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
メタデータコンテンツ
itemprop属性が存在する場合:フローコンテンツ
itemprop属性が存在しない場合:フレージングコンテンツ
この要素を使用できるコンテキスト
charset属性が存在する場合、または要素のhttp-equivの属性がエンコード宣言状態にある場合:head要素内。
http-equiv属性が存在するが、エンコード宣言状態でない場合:head要素内。
http-equiv属性が存在するが、エンコード宣言状態でない場合:head要素の子であるnoscript要素内。
name属性が存在する場合:メタデータコンテンツが期待される場所。
itemprop属性が存在する場合:メタデータコンテンツが期待される場所。
itemprop属性が存在する場合:フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
name — メタデータ名
http-equiv — プラグマディレクティブ
content — 要素の値
charset文字エンコーディング宣言
media — 受け入れ可能なメディア
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLMetaElementを使用する。

meta要素は、titlebaselinkstylescript要素を用いて表現できない様々な種類のメタデータを表す

meta要素は、name属性をもつ文書レベルのメタデータ、http-equiv属性を持つプラグマ・ディレクティブ、およびcharset属性をもつHTML文書が文字列形式にシリアライズされる(たとえば、ネットワーク上の伝送、またはディスクストレージ)場合、ファイルの文字エンコーディング宣言を表すことができる。

namehttp-equivcharset、およびitemprop属性のうちの1つを正確に指定しなければならない。

namehttp-equivまたはitempropのいずれかが指定される場合、content属性も指定しなければならない。そうでなければ、省略されなければならない。

charset属性は、文書で使用される文字エンコーディングを指定する。これは、文字エンコーディング宣言である。属性が存在する場合、その値は"utf-8"に一致するASCII大文字・小文字不区別でなければならない。

meta要素上のcharset属性は、XML文書では効果はないが、XMLからおよびへの移行を容易にするためにXML文書で許可される。

文書ごとにcharset属性をもつ複数のmeta要素があってはならない。

content属性は、文書のメタデータまたは要素がそれらの目的のために使用される場合のプラグマディレクティブの値を与える。この仕様の後続の節で説明されるように、許可される値は、正確な文脈に依存する。

meta要素がname属性を持つ場合、文書のメタデータを設定する。文書のメタデータは、名前と値のペアの観点から表される。meta要素のname属性が名前を与え、同じ要素のcontent属性が値を与える。名前はメタデータのどの側面を設定するかを指定する。妥当な名前とその値の意味は、次の節で説明する。meta要素がcontent属性を持たない場合、メタデータの名前と値のペアの値部分は、空文字列である。

media属性は、メタデータが適用されるメディアを表す。値は妥当なメディアクエリーリストでなければならない。nametheme-colorでない限り、media属性は処理モデルに影響を与えないため、著者が使用することはできない。

4.2.5.1 標準メタデータ名

Element/meta/name

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

この仕様は、meta要素のname属性の名前を定義する。

名前は大文字・小文字を区別せず、かつASCII大文字・小文字を区別しない方法で比較されなければならない

application-name

値は、ページが表すウェブアプリケーションの名前を与える短い自由形式の文字列でなければならない。ページがウェブアプリケーションでない場合、application-nameメタデータ名を使用してはならない。それぞれの名前の言語を指定するlang属性を使用することで、ウェブアプリケーション名の翻訳は与えられてもよい。

与えられる言語をもつ複数のmeta要素が存在してはならず、かつname属性値が文書ごとに値application-nameASCII大文字・小文字不区別で一致する。

author

値は、ページ著者のうちの一人の名前を与える、自由形式の文字列でなければならない。

description

値は、ページを説明する自由形式の文字列でなければならない。たとえば検索エンジン内など、値はページのディレクトリーで使用するために適切なものでなければならない。name属性値が文書ごとのdescriptionASCII大文字・小文字不区別で一致する場合、複数のmeta要素が存在してはならない。

generator

値は、文書を生成するために使用されるソフトウェアパッケージの1つを識別する自由形式の文字列でなければならない。この値は、たとえばマークアップがテキストエディターでユーザーによって記述されたページのように、マークアップがソフトウェアによって生成されないページで使用してはならない。

"Frontweaver"と呼ばれるツールは、ページ生成のために使用されるツールとして自分自身を識別するために、ページのhead要素内にその出力で含むかもしれない:

<meta name=generator content="Frontweaver 8.2">
keywords

値は、それぞれがページに関連するキーワードである、コンマ区切りトークンの集合でなければならない。

イギリスの高速道路上の書体に関するこのページは、ユーザーがページを検索するために使用するかもしれないキーワードを指定するmeta要素を使用している:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head>
  <title>Typefaces on UK motorways</title>
  <meta name="keywords" content="british,type face,font,fonts,highway,highways">
 </head>
 <body>
  ...

多くの検索エンジンは、この機能が歴史的に当てにならず、さらにはユーザーにとって有益でない手段をもたらす、検索エンジンスパムとして誤解を招く方法で使用されているので、そのようなキーワードを考慮しない。

リファラー

値は、Documentのデフォルトのリファラーポリシーを定義する、リファラーポリシーでなければならない。[REFERRERPOLICY]

theme-color

Element/meta/name/theme-color

FirefoxNoSafari15+Chrome🔰 73+
OperaNoEdge🔰 79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android80+WebView AndroidNoSamsung Internet6.2+Opera AndroidNo

値は、ユーザーエージェントがページや周囲のユーザーインターフェイスのの表示をカスタマイズするために使用すべき提案される色を定義する、CSS <color>生成物とマッチする文字列でなければならない。たとえば、ブラウザーは、指定された値でページのタイトルバーに色をつけるかもしれず、またはタブバーやタスクスイッチャーでカラーハイライトとして使用するかもしれない。

HTML文書内では、media属性値はすべてのmeta要素の中で一意でなければならず、name属性値はASCIIの大文字・小文字不区別theme-colorに一致するものに設定される。

この標準自身は、テーマカラーとして"WHATWG green"を使用している:

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a">
...

media属性は、提供された色を使用べきであるコンテキストを説明するために使用してもよい。

ダークモードでこの標準のテーマカラーとして"WHATWG green"のみを使用したい場合、prefers-color-schemeメディア特性を使用できる:

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">
...

UIのテーマカラーを使用する場合、ユーザーエージェントは、問題のUIにテーマカラーより適切にするために実装固有の方法でテーマカラーを調整してもよい。たとえば、ユーザーエージェントが背景としてテーマカラーを使用しその上に白いテキストを表示しようとする場合、適切なコントラストを確保するために、UIの一部でテーマカラーのより暗い異なる色を使用するかもしれない。

color-scheme

ユーザーエージェントが(ページ内のすべてのCSSが読み込まれるのを待つのではなく)希望のカラースキームでページの背景をすぐにレンダリングするのを支援するために、meta要素で'color-scheme'値を提供できる。

値は、CSS 'color-scheme'プロパティ値の構文と一致する文字列でなければならない。これはページのサポートされる配色を決定する。

文書でcolor-schemeASCII大文字・小文字不区別一致で設定されるname属性値をもつ複数のmeta 要素が存在してはならない。

次の宣言は、ページが暗い背景色と明るい前景色のカラースキームを認識して、処理できることを示す:

<meta name="color-scheme" content="dark">

これらの規則は一致する要素が見つかるまで連続する要素をチェックするため、レガシーユーザーエージェントのフォールバックを処理するために、著者はそのような値を複数提供できる。 プロパティに対してCSSフォールバックがどのように機能するかとは反対に、複数のmeta要素は、新しい値の後にレガシー値で配置する必要がある。

4.2.5.2 他のメタデータ名

誰でも独自の定義済みメタデータ名の集合に対する拡張を作成して使用することができる。そのような拡張を登録する必要はない。

ただし、次のいずれかの場合では新しいメタデータ名を作成すべきではない:

また、新しいメタデータ名を作成して使用する前に、すでに使用されているメタデータ名の選択を避け、すでに使用されているメタデータ名の複製を避け、かつ新しい標準化された名前があなたの選んだ名前と衝突することを避けるために、WHATWG Wiki MetaExtensions pageを参照することを勧める。[WHATWGWIKI]

誰でも自由にWHATWG Wiki MetaExtensions pageを編集して、いつでもメタデータ名を追加できる。新しいメタデータ名は、次の情報とともに指定することができる:

キーワード

実際の名前が定義されている。名前は、他の定義済みの名前と紛らわしいものであるべきでない(たとえば、大文字と小文字だけが異なる)。

概要

メタデータ名の意味はどのようなものかの短い非標準の説明は、その値が要求する形式を含む。

Specification(仕様)
メタデータ名のセマンティックスおよび要求のより詳細な説明へのリンク。それはwiki上の別のページかもしれないし、外部ページへのリンクかもしれない。
Synonyms(同義語)

全く同じ処理要求を持つ他の名前のリスト。著者は、同義語であると定義された名前を使用すべきではない(同義語はユーザーエージェントがレガシーコンテンツのサポートを可能にすることのみを目的とする)。誰もが実際に使用されてない同義語を削除できる。レガシーコンテンツとの互換性のために同義語として処理する必要がある名前のみが、この方法で登録されているのである。

Status(状態)

以下のうちの1つをとる:

Proposed(提案)
広いレビューと承認を受けていない名前。誰かが提案済みか提案している、あるいは提案予定であり、使うことができる。
Ratified(承認)
広いレビューと承認を受けている名前。それは、明確に不正確な方法で使用する場合を含めて、名前を使用するページを処理する方法を明快に定義した仕様を持つ。
Discontinued(中止)
広いレビューを受けており、欠陥が発見されたメタデータ名。既存のページはこのメタデータ名を使用しているが、新しいページでは避けるべきである。"brief description"(簡単な説明)と"specification"(仕様書)のエントリーは、どちらかといえば著者が代わりに使用すべきものの詳細を提供するだろう。

メタデータ名が既存の値とともに冗長であることが判明した場合、削除され、既存の値の同義語としてリストされているべきである。

メタデータ名が、使用するまたは指定することなく一月以上の期間"proposed"(提案)状態で追加される場合、WHATWG Wiki MetaExtensions pageから削除されることがある。

メタデータ名が"proposed"(提案)状態で追加され、既存の値とともに冗長であることが判明している場合、既存の値の同義語として削除され、リストされているべきである。メタデータ名は"proposed"(提案)状態で追加され、有害だと判明している場合、"discontinued"(中止)状態に変更すべきである。

誰もがいつでも状態を変更できるが、上記の定義にしたがってのみ行うべきである。

4.2.5.3 プラグマディレクティブ

meta要素でhttp-equiv属性が指定された場合、要素はプラグマディレクティブである。

The http-equiv attribute is an enumerated attribute with the following keywords and states:

キーワード状態概要
content-typeエンコーディング宣言An alternative form of setting the charset.
default-styleデフォルトスタイルSets the name of the default CSS style sheet set.
refreshリフレッシュActs as a timed redirect.
x-ua-compatibleX-UA-CompatibleIn practice, encourages Internet Explorer to more closely follow the specifications.
content-security-policyContent security policyEnforces a Content Security Policy on a Document.
エンコーディング宣言状態http-equiv="content-type"

エンコーディング宣言状態は、charset属性の設定の単なる代替形式である。これは文字エンコーディング宣言である。

For meta elements with an http-equiv attribute in the Encoding declaration state, the content attribute must have a value that is an ASCII case-insensitive match for a string that consists of: "text/html;", optionally followed by any number of ASCII whitespace, followed by "charset=utf-8".

文書は、エンコーディング宣言状態http-equiv属性をもつmeta要素と、charset属性の存在するmeta要素の両方を含んではならない。

エンコーディング宣言状態HTML文書で使用されてもよいが、その状態のhttp-equiv属性をもつ要素はXML文書で使用されてはならない。

デフォルトスタイル状態http-equiv="default-style"

Alternative_style_sheets

Support in one engine only.

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (Legacy)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

このプラグマは、CSSスタイルシートセット名前を設定する。

リフレッシュ状態http-equiv="refresh"

This pragma acts as a timed redirect.

Documentオブジェクトは、宣言的にリフレッシュに関連付けられている(真偽値)。最初はfalseである。

リフレッシュ状態http-equiv属性をもつmetaに対して、content属性はいずれかからなる値を持たなければならない:

前者の場合、整数は、そのページが再読み込みされるよりも前の秒数を表す。後者の場合、整数は、与えられたURLのページで置き換えられるよりも前の秒数を表す。

ページが5分ごとにサーバーからの自動的な再読み込みを確実にするために、報道機関のフロントページは、そのページのhead要素で次のマークアップを含むかもしれない:

<meta http-equiv="Refresh" content="300">

次のようなマークアップを用いて、連続したページは、各ページが連続で次のページにリフレッシュさせることで、自動スライドショーとして使用されるかもしれない:

<meta http-equiv="Refresh" content="20; URL=page4.html">
X-UA-Compatible状態http-equiv="x-ua-compatible"

実際問題として、このプラグマは、仕様により密接に従うようにInternet Explorerに勧める。

X-UA-Compatible状態におけるhttp-equiv属性をもつmeta要素の場合、content属性は、文字列"IE=edge"に一致するASCII大文字・小文字不区別である値を持たなければならない。

ユーザーエージェントは、このプラグマを無視することが要求される。

Content security policy状態 (http-equiv="content-security-policy")

このプラグマはDocumentContent Security Policy実施する[CSP]

Content Security Policy状態http-equiv属性をもつmeta要素の場合、content属性は妥当なコンテンツセキュリティポリシーからなる値を持たなければならないが、任意のreport-uriframe-ancestors、またはsandboxディレクティブを含めてはならない。content属性で指定されるコンテンツセキュリティポリシーは、現在の文書上に実施される[CSP]

meta要素を文書に挿入するときに、一部のリソースがすでにフェッチされている可能性がある。たとえば、Content Security Policy状態http-equiv属性をもつmeta要素を動的に挿入する前に、使用可能な画像のリストに画像が保存されることがある。すでにフェッチされているリソースは、遅れて実施されるコンテンツセキュリティポリシーによってブロックされることが保証されていない。

ページは、次のようなポリシーを使用して、インラインのJavaScriptの実行を防止するだけでなく、すべてのプラグインコンテンツをブロックすることにより、クロスサイトスクリプティング攻撃のリスクを軽減することを選択するかもしれない。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

一度に文書で特定の状態をもつ複数のmeta要素が存在してはならない。

4.2.5.4 文書の文字エンコーディングを指定する

文字エンコーディング宣言は、文書の記憶または伝達に用いられる文字エンコーディングを指定するメカニズムである。

Encoding標準は、UTF-8文字エンコーディングの使用を要求し、それを識別するために"utf-8"エンコーディングラベルの使用を要求する。これらの要件は、文書の文字エンコーディング宣言が存在する場合、"utf-8"に対してASCII大文字・小文字不区別での一致を使用してエンコーディングラベルを指定する必要がある。文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングUTF-8でなければならない。[ENCODING]

次の制限も適用される:

さらに、meta要素には多くの制限があるため、文書ごとに1つのmetaベースの文字エンコーディング宣言のみがあるかもしれない。

HTML文書がBOMで開始せず、かつそのエンコーディングContent-Typeメタデータによって明示的に指定されず、かつ文書がiframe srcdoc文書でない場合、エンコーディングはcharset属性をもつmeta要素、またはエンコーディング宣言状態http-equiv属性をもつmeta要素を使用して指定されなければならない。

フォームにユーザーが入力した、スクリプトによって生成されたURLでなど、文字エンコーディングは非ASCII文字を処理するために必要とされるため、すべてのエンコーディングがUS-ASCIIの範囲にあるときでさえも、文字エンコーディング宣言は、(Content-Typeメタデータ内または明示的にファイル内のいずれか)が必要である。

UTF-8でないエンコーディングの使用は、デフォルトで文書の文字エンコーディングを使うことで、フォーム提出およびURLエンコーディングで予期しない結果を招くかもしれない。

文書がiframe srcdoc文書である場合、文書は文字エンコーディング宣言を持ってはならない。(この場合、文書の一部はiframeを含んでいるので、ソースはすでにデコードされている。)

XMLにおいて、必要ならば、XML宣言はインライン文字エンコーディング情報に対して使用されるべきである。

HTMLにおいて、文字エンコーディングがUTF-8であることを宣言するために、著者は(head要素内で)文書のトップの近くに次のマークアップを含むかもしれない:

<meta charset="utf-8">

XMLにおいて、マークアップのはじめでXML宣言は代わりに用いられるかもしれない:

<?xml version="1.0" encoding="utf-8"?>

4.2.6 style要素

Element/style

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3.5+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
メタデータコンテンツが期待される場所。
headの子であるnoscript要素内。
コンテンツモデル
適合スタイルシートを与えるテキスト
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
media — 受け入れ可能なメディア
blocking — 要素が潜在的にレンダリングブロッキングであるかどうか
Also, the title attribute has special semantics on this element: CSS style sheet set name
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLStyleElementを使用する。

style要素は、著者に文書へCSSスタイルシートを埋め込むことを可能にする。style要素は、スタイリング処理モデルへの、複数の入力の1つである。この要素は、ユーザーへのコンテンツを表すものでない。

HTMLStyleElement/disabled

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)13+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

disabledゲッターの手順は次のとおり:

  1. thisCSSスタイルシートが関連付けられていない場合、falseを返す。

  2. this関連付けられているCSSスタイルシート無効フラグが設定されている場合、trueを返す。

  3. falseを返す。

disabledセッターの手順は次のとおり:

  1. thisCSSスタイルシートが関連付けられていない場合、返す。

  2. 与えられた値がtrueの場合、this関連付けられているCSSスタイルシート無効フラグを設定する。そうでなければ、this関連付けられているCSSスタイルシート無効フラグの設定を解除する。

重要なこととして、disabled属性の割り当ては、 style要素が関連付けられているCSSスタイルシートを持つ場合にのみ有効になる。

const style = document.createElement('style');
style.disabled = true;
style.textContent = 'body { background-color: red; }';
document.body.append(style);
console.log(style.disabled); // false

media属性は、スタイルが適用されるメディアをいう。値は妥当なメディアクエリーリストでなければならない。

media属性が省略される場合、デフォルトでは"all"であり、デフォルトのスタイルにより、すべてのメディアに適用されることを意味する。

blocking属性はブロッキング属性である。

Alternative_style_sheets

Support in one engine only.

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (Legacy)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

style要素のtitle属性はCSSスタイルシートセットを定義する。style要素がtitle属性を持たない場合、タイトルを持たない。先祖のtitle属性はstyle要素に適用しない。style要素が文書ツリー内にない場合、title属性は無視される。[CSSOM]

link要素のtitle属性のような、style要素のtitle属性は、グローバルtitle属性とタイトルなしのstyleブロックが親要素のタイトルを継承しないという点で異なる。それは単にタイトルを持たない。

style要素の子テキストコンテンツは、適合スタイルシートのテキストコンテンツでなければならない。

要素がノード文書のパーサーによって作成された場合、style要素は暗黙的に潜在的にレンダリングブロックキングである。


この仕様はスタイル規則を指定しないが、CSSは多くのウェブブラウザーによってサポートされることが期待される。[CSS]

LinkStyleインターフェイスはまた、この要素によって実装される。[CSSOM]

次の文書は、デフォルトのイタリック体で作品とラテン語のタイトルを残したまま、イタリックテキストよりも明るい赤色のテキストとして強調するスタイルを持つ。適切な要素を使用した、文書のより簡単な再スタイル付けを可能にする方法を示す。

<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis catus</i> in modern human society.</p>
 </body>
</html>