Nothing Special   »   [go: up one dir, main page]

  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 media属性を処理する
        2. 4.2.4.2 type属性を処理する
        3. 4.2.4.3 Fetching and processing a resource from a link element
        4. 4.2.4.4 Processing `Link` headers
        5. 4.2.4.5 Early hints
        6. 4.2.4.6 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要素
      7. 4.2.7 Interactions of styling and scripting

4 HTMLの要素

4.1 文書要素

4.1.1 html要素

HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.">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+

HTMLHtmlElement

Support in all current engines.

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

  // also has obsolete members
};

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要素

HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.">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?

HTMLHeadElement

Support in all current engines.

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

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要素

HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.">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?

. This element inherits all of the properties and methods of the HTMLElement interface.">HTMLTitleElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
他のtitle要素を含まないhead要素内。
コンテンツモデル
要素間の空白文字でないテキスト
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLTitleElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString text;
};

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

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

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

title.text [ = value ]

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

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

text属性のゲッターはtitle要素の子テキストコンテンツを返さなければならない。

text属性のセッターは、このtitle要素内の指定された値ですべての文字列を置き換えなければならない。

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

  <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属性によって与えられる。

ユーザーインターフェイスで文書を参照するときに、ユーザーエージェントは、文書のタイトルを使用すべきである。title要素のコンテンツがこの方法で使用される場合、そのtitle要素の書字方向は、ユーザーインターフェイスにおける文書のタイトルの書字方向を設定するために使用されるべきである。

4.2.3 base要素

HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document.">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?

HTMLBaseElement

Support in all current engines.

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

  [CEReactions] attribute USVString href;
  [CEReactions] attribute DOMString target;
};

base要素は、著者にURLを解析する目的で文書の基底URLを指定、および次に続くハイパーリンクのためにデフォルトでナビゲート可能の名前の指定を可能にする。この要素は、この情報を超えた任意のコンテンツを表すものでない。

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

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

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

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

href属性をもつ複数のbaseが存在する場合、最初のものを除いてすべて無視される。

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

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

target属性をもつ複数のbaseが存在する場合、最初のものを除いてすべて無視される。

To get an element's target, given an a, area, or form element element, and an optional string-or-null target (default null), run these steps:

  1. If target is null, then:

    1. If element has a target attribute, then set target to that attribute's value.

    2. Otherwise, if element's node document contains a base element with a target attribute, set target to the value of the target attribute of the first such base element.

  2. If target is not null, and contains an ASCII tab or newline and a U+003C (<), then set target to "_blank".

  3. Return target.


A base element that is the first base element with an href content attribute in a document tree has a frozen base URL. The frozen base URL must be immediately set for an element whenever any of the following situations occur:

To set the frozen base URL for an element element:

  1. Let document be element's node document.

  2. Let urlRecord be the result of parsing the value of element's href content attribute with document's fallback base URL, and document's character encoding. (Thus, the base element isn't affected by itself.)

  3. If any of the following are true:

    then set element's frozen base URL to document's fallback base URL and return.

  4. Set element's frozen base URL to urlRecord.

The href IDL attribute, on getting, must return the result of running the following algorithm:

  1. Let document be element's node document.

  2. Let url be the value of the href attribute of this element, if it has one, and the empty string otherwise.

  3. Let urlRecord be the result of parsing url with document's fallback base URL, and document's character encoding. (Thus, the base element isn't affected by other base elements or itself.)

  4. If urlRecord is failure, return url.

  5. Return the serialization of urlRecord.

The href IDL attribute, on setting, must set the href content attribute to the given new value.

The target IDL attribute must reflect the content attribute of the same name.

この例において、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"へのリンクとなる。

HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.">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+

element; not to be confused with <a>, which is represented by HTMLAnchorElement). This object inherits all of the properties and methods of the HTMLElement interface.">HTMLLinkElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+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 — 要素によって開始されるフェッチ優先度を設定する
また、title属性はこの要素で特別なセマンティックスを持つ:リンクのタイトル、CSSスタイルシート設定名
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString href;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions] attribute DOMString rel;
  [CEReactions] attribute DOMString as;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString media;
  [CEReactions] attribute DOMString integrity;
  [CEReactions] attribute DOMString hreflang;
  [CEReactions] attribute DOMString type;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
  [CEReactions] attribute USVString imageSrcset;
  [CEReactions] attribute DOMString imageSizes;
  [CEReactions] attribute DOMString referrerPolicy;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
  [CEReactions] attribute boolean disabled;
  [CEReactions] attribute DOMString fetchPriority;

  // also has obsolete members
};
HTMLLinkElement includes LinkStyle;

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

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

hrefimagesrcset属性の両方が不在である場合、要素はリンクを定義しない。

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

relサポートされるトークンは、link要素で許可されるHTMLリンクタイプで定義されるキーワードであり、処理モデルに影響を与え、ユーザーエージェントによってサポートされる。The possible supported tokens are alternate, dns-prefetch, expect, icon, manifest, modulepreload, next, pingback, preconnect, prefetch, preload, search, and stylesheet. rel's supported tokens must only include the tokens from this list that the user agent implements the processing model for.

Theoretically a user agent could support the processing model for the canonical keyword — if it were a search engine that executed JavaScript. But in practice that's quite unlikely. So in most cases, canonical ought not be included in rel's supported tokens.

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要素については、それを指定してはならない。

The processing model for how the as attribute is used is given in an individual link type's fetch and process the linked resource algorithm.

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


blocking属性はブロッキング属性である。これはリンクタイプstylesheetおよびexpectで使用され、これらのキーワードを含むrel属性を持つlink要素でのみ指定しなければならない。


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


element and the current document.">HTMLLinkElement/rel

Support in all current engines.

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

The IDL attributes href, hreflang, integrity, media, rel, sizes, type, blocking, and disabled each must reflect the respective content attributes of the same name.

There is no reflecting IDL attribute for the color attribute, but this might be added later.

HTMLLinkElement/as

Support in all current engines.

Firefox56+Safari10+Chrome50+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The as IDL attribute must reflect the as content attribute, limited to only known values.

The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.

element defining which referrer is sent when fetching the resource.">HTMLLinkElement/referrerPolicy

Support in all current engines.

Firefox50+Safari14.1+Chrome58+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values.

The fetchPriority IDL attribute must reflect the fetchpriority content attribute, limited to only known values.

The imageSrcset IDL attribute must reflect the imagesrcset content attribute.

The imageSizes IDL attribute must reflect the imagesizes content attribute.

element and the current document.">HTMLLinkElement/relList

Support in all current engines.

Firefox30+Safari9+Chrome50+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The relList IDL attribute must reflect the rel content attribute.

The relList attribute can be used for feature detection, by calling its supports() method to check which types of links are supported.

4.2.4.1 media属性を処理する

リンクがハイパーリンクである場合、media属性は純粋に助言であり、問題の文書が設計されたメディアに対して説明する。

しかし、リンクが外部リソースのリンクである場合、media属性は規範的である。media属性の値が環境にマッチしかつその他の条件が適用される場合、ユーザーエージェントは外部リソースを適用しなければならず、そうでなければ適用してはならない。

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

外部リソースは、外部リソースの制限の適用内で定義される追加の制限があるかもしれない。たとえば、CSSスタイルシートは、いくつかの@mediaブロックを持っているかもしれない。この仕様は、そのような追加の制限や要件を上書きしない。

4.2.4.2 type属性を処理する

If the type attribute is present, then the user agent must assume that the resource is of the given type (even if that is not a valid MIME type string, e.g. the empty string). If the attribute is omitted, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type. If the UA does not support the given MIME type for the given link relationship, then the UA should not fetch and process the linked resource; if the UA does support the given MIME type for the given link relationship, then the UA should fetch and process the linked resource at the appropriate time as specified for the external resource link's particular type. If the attribute is omitted, and the external resource link type does not have a default type defined, but the user agent would fetch and process the linked resource if the type was known and supported, then the user agent should fetch and process the linked resource under the assumption that it will be supported.

ユーザーエージェントは、type属性を信頼できるものとし考慮してはならない―リソースをフェッチする際に、ユーザーエージェントは、その実際のタイプを決定するためにtype属性を使用してはならない。実際のタイプのみが、上記の想定タイプではなく、(次の段落で定義されるように)リソースを適用するかどうかを決定するために使用される。

stylesheetリンクタイプは、リソースのContent-Typeメタデータを処理するための規則を定義する。

ユーザーエージェントがリソースのタイプを一度確立すると、タイプがサポートされるタイプでありかつその他の条件が適用される場合、ユーザーエージェントはリソースを適用しなければならず、そうでなければリソースを無視しなければならない。

文書が次のようにラベル付けされたスタイルシートのリンクを含む場合:

<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C">

text/plainはCSSスタイルシートのためのMIMEタイプではないので)CSSスタイルシートのみをサポートする適合ユーザーエージェントは、BとCのファイルをフェッチし、Aファイルをスキップする。

ファイルBとCの場合、その後サーバーから返される実際のタイプをチェックする。text/cssとして送信されるものに対して、スタイルを適用するが、text/plainとしてラベル付けされるものに対して、スタイルを適用しない。

2つのファイルのいずれかがContent-Typeメタデータなしで、またはContent-Type: "null"のような構文的に誤ったタイプとともに返された場合、stylesheetのリンクに対するデフォルトタイプは蹴られる。Since that default type is text/css, the style sheet would nonetheless be applied.

The default fetch and process the linked resource, given a link element el, is as follows:

  1. Let options be the result of creating link options from el.

  2. Let request be the result of creating a link request given options.

  3. If request is null, then return.

  4. Set request's synchronous flag.

  5. Run the linked resource fetch setup steps, given el and request. If the result is false, then return.

  6. Set request's initiator type to "css" if el's rel attribute contains the keyword stylesheet; "link" otherwise.

  7. Fetch request with processResponseConsumeBody set to the following steps given response response and null, failure, or a byte sequence bodyBytes:

    1. Let success be true.

    2. If any of the following are true:

      then set success to false.

      Note that content-specific errors, e.g., CSS parse errors or PNG decoding errors, do not affect success.

    3. Otherwise, wait for the link resource's critical subresources to finish loading.

      The specification that defines a link type's critical subresources (e.g., CSS) is expected to describe how these subresources are fetched and processed. However, since this is not currently explicit, this specification describes waiting for a link resource's critical subresources to be fetched and processed, with the expectation that this will be done correctly.

    4. Process the linked resource given el, success, response, and bodyBytes.

To create a link request given a link processing options options:

  1. Assert: options's href is not the empty string.

  2. If options's destination is null, then return null.

  3. Let url be the result of encoding-parsing a URL given options's href, relative to options's base URL.

    Passing the base URL instead of a document or environment is tracked by issue #9715.

  4. If url is failure, then return null.

  5. Let request be the result of creating a potential-CORS request given url, options's destination, and options's crossorigin.

  6. Set request's policy container to options's policy container.

  7. Set request's integrity metadata to options's integrity.

  8. Set request's cryptographic nonce metadata to options's cryptographic nonce metadata.

  9. Set request's referrer policy to options's referrer policy.

  10. Set request's client to options's environment.

  11. Set request's priority to options's fetch priority.

  12. Return request.

User agents may opt to only try to fetch and process such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied.

Similar to the fetch and process the linked resource algorithm, all external resource links have a process the linked resource algorithm which takes a link element el, boolean success, a response response, and a byte sequence bodyBytes. Individual link types may provide their own process the linked resource algorithm, but unless explicitly stated, that algorithm does nothing.

Unless otherwise specified for a given rel keyword, the element must delay the load event of the element's node document until all the attempts to fetch and process the linked resource and its critical subresources are complete. (Resources that the user agent has not yet attempted to fetch and process, e.g., because it is waiting for the resource to be needed, do not delay the load event.)

All link types that can be external resource links define a process a link header algorithm, which takes a link processing options. This algorithm defines whether and how they react to appearing in an HTTP `Link` response header.

For most link types, this algorithm does nothing. The summary table is a good reference to quickly know whether a link type has defined process a link header steps.

A link processing options is a struct. 次のアイテムがある:

href (default the empty string)
destination (default the empty string)
initiator (default "link")
integrity (default the empty string)
type (default the empty string)
cryptographic nonce metadata (default the empty string)
文字列
crossorigin (default No CORS)
A CORS settings attribute state
referrer policy (default the empty string)
A referrer policy
source set (default null)
Null or a source set
base URL
URL
origin
An origin
environment
An environment
policy container
A policy container
document (default null)
Null or a Document
on document ready (default null)
Null or an algorithm accepting a Document
fetch priority (default auto)
A fetch priority attribute state

A link processing options has a base URL and an href rather than a parsed URL because the URL could be a result of the options's source set.

To create link options from element given a link element el:

  1. Let document be el's node document.

  2. Let options be a new link processing options with

    destination
    the result of translating the state of el's as attribute.
    crossorigin
    the state of el's crossorigin content attribute
    referrer policy
    the state of el's referrerpolicy content attribute
    source set
    el's source set
    base URL
    document's document base URL
    origin
    document's origin
    environment
    document's relevant settings object
    policy container
    document's policy container
    document
    document
    cryptographic nonce metadata
    The current value of el's [[CryptographicNonce]] internal slot
    fetch priority
    the state of el's fetchpriority content attribute
  3. If el has an href attribute, then set options's href to the value of el's href attribute.

  4. If el has an integrity attribute, then set options's integrity to the value of el's integrity content attribute.

  5. If el has a type attribute, then set options's type to the value of el's type attribute.

  6. Assert: options's href is not the empty string, or options's source set is not null.

    A link element with neither an href or an imagesrcset does not represent a link.

  7. Return options.

To extract links from headers given a header list headers:

  1. Let links be a new list.

  2. Let rawLinkHeaders be the result of getting, decoding, and splitting `Link` from response's header list.

  3. For each linkHeader of rawLinkHeaders:

    1. Let linkObject be the result of parsing linkHeader. [WEBLINK]

    2. If linkObject["target_uri"] does not exist, then continue.

    3. Append linkObject to links.

  4. Return links.

To process link headers given a Document doc, a response response, and a "pre-media" or "media" phase:

  1. Let links be the result of extracting links from response's header list.

  2. For each linkObject in links:

    1. Let rel be linkObject["relation_type"].

    2. Let attribs be linkObject["target_attributes"].

    3. Let expectedPhase be "media" if either "srcset", "imagesrcset", or "media" exist in attribs; otherwise "pre-media".

    4. If expectedPhase is not phase, then continue.

    5. If attribs["media"] exists and attribs["media"] does not match the environment, then continue.

    6. Let options be a new link processing options with

      href
      linkObject["target_uri"]
      base URL
      doc's document base URL
      origin
      doc's origin
      environment
      doc's relevant settings object
      policy container
      doc's policy container
      document
      doc
    7. Apply link options from parsed header attributes to options given attribs.

    8. If attribs["imagesrcset"] exists and attribs["imagesizes"] exists, then set options's source set to the result of creating a source set given linkObject["target_uri"], attribs["imagesrcset"], attribs["imagesizes"], and null.

    9. Run the process a link header steps for rel given options.

To apply link options from parsed header attributes to a link processing options options given attribs:

  1. If attribs["as"] exists, then set options's destination to the result of translating attribs["as"].

  2. If attribs["crossorigin"] exists and is an ASCII case-insensitive match for one of the CORS settings attribute keywords, then set options's crossorigin to the CORS settings attribute state corresponding to that keyword.

  3. If attribs["integrity"] exists, then set options's integrity to attribs["integrity"].

  4. If attribs["referrerpolicy"] exists and is an ASCII case-insensitive match for some referrer policy, then set options's referrer policy to that referrer policy.

  5. If attribs["nonce"] exists, then set options's nonce to attribs["nonce"].

  6. If attribs["type"] exists, then set options's type to attribs["type"].

  7. If attribs["fetchpriority"] exists and is an ASCII case-insensitive match for a fetch priority attribute keyword, then set options's fetch priority to that fetch priority attribute keyword.

4.2.4.5 Early hints

Status/103

Firefoxpreview+SafariNoChrome103+
OperaNoEdge103+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Early hints allow user-agents to perform some operations, such as to speculatively load resources that are likely to be used by the document, before the navigation request is fully handled by the server and a response code is served. Servers can indicate early hints by serving a response with a 103 status code before serving the final response.[RFC8297]

For compatibility reasons early hints are typically delivered over HTTP/2 or above, but for readability we use HTTP/1.1-style notation below.

For example, given the following sequence of responses:

103 Early Hint
Link: </image.png>; rel=preload; as=image
200 OK
Content-Type: text/html

<!DOCTYPE html>
...
<img src="/image.png">

the image will start loading before the HTML content arrives.

Only the first early hint response served during the navigation is handled, and it is discarded if it is succeeded by a cross-origin redirect.

In addition to the `Link` headers, it is possible that the 103 response contains a Content Security Policy header, which is enforced when processing the early hint.

For example, given the following sequence of responses:

103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style
103 Early Hint
Link: </image.png>; rel=preload; as=image
302 Redirect
Location: /alternate.html
200 OK
Content-Security-Policy: style-src: none;
Link: </font.ttf>; rel=preload; as=font

The font and style would be loaded, and the image will be discarded, as only the first early hint response in the final redirect chain is respected. The late Content Security Policy header comes after the request to fetch the style has already been performed, but the style will not be accessible to the document.

To process early hint headers given a response response and an environment reservedEnvironment:

Early-hint `Link` headers are always processed before `Link` headers from the final response, followed by link elements. This is equivalent to prepending the contents of the early and final `Link` headers to the Document's head element, in respective order.

  1. Let earlyPolicyContainer be the result of creating a policy container from a fetch response given response and reservedEnvironment.

    This allows the early hint response to include a Content Security Policy which would be enforced when fetching the early hint request.

  2. Let links be the result of extracting links from response's header list.

  3. Let earlyHints be an empty list.

  4. For each linkObject in links:

    The moment we receive the early hint link header, we begin fetching earlyRequest. If it comes back before the Document is created, we set earlyResponse to the response of that fetch and once the Document is created we commit it (by making it available in the map of preloaded resources as if it was a link element). If the Document is created first, the response is committed as soon as it becomes available.

    1. Let rel be linkObject["relation_type"].

    2. Let options be a new link processing options with

      href
      linkObject["target_uri"]
      initiator
      "early-hint"
      base URL
      response's URL
      origin
      response's URL's origin
      environment
      reservedEnvironment
      policy container
      earlyPolicyContainer
    3. Let attribs be linkObject["target_attributes"].

      Only the as, crossorigin, integrity, and type attributes are handled as part of early hint processing. The other ones, in particular blocking, imagesrcset, imagesizes, and media are only applicable once a Document is created.

    4. Apply link options from parsed header attributes to options given attribs.

    5. Run the process a link header steps for rel given options.

    6. Append options to earlyHints.

  5. Return the following substeps given Document doc: for each options in earlyHints:

    1. If options's on document ready is null, then set options's document to doc.

    2. Otherwise, call options's on document ready with doc.

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

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

4.2.5 meta要素

HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">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+

elements. This interface inherits all of the properties and methods described in the HTMLElement interface.">HTMLMetaElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
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インターフェイス
[Exposed=Window]
interface HTMLMetaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString httpEquiv;
  [CEReactions] attribute DOMString content;
  [CEReactions] attribute DOMString media;

  // also has obsolete members
};

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属性は処理モデルに影響を与えないため、著者が使用することはできない。

The name, content, and media IDL attributes must reflect the respective content attributes of the same name. The IDL attribute httpEquiv must reflect the content attribute http-equiv.

4.2.5.1 標準メタデータ名

element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.">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大文字・小文字不区別で一致する。

タイトルはステータスメッセージを含むかもしれず、アプリケーションの名前であること代わりに特定の時点でページの状態に関連かもしれないので、ユーザーエージェントは、ページのtitleに優先してUIでアプリケーション名を使用してもよい。

指定された言語の順序付きのリスト(たとえばイギリス英語、アメリカ英語、英語)を使用するためにアプリケーション名を検索するには、ユーザーエージェントは次の手順を実行しなければならない:

  1. languagesを言語のリストにする。

  2. もしあれば、かつその言語が不明ではない場合、default languageDocument文書要素言語とする。

  3. default languageが存在する場合、かつそれがlanguagesにおける言語のいずれかと同じ言語でない場合、languagesに追加する。

  4. Let winning language be the first language in languages for which there is a meta element in the Document where the name attribute value is an ASCII case-insensitive match for application-name and whose language is the language in question.

    If none of the languages have such a meta element, then return; there's no given application name.

  5. Return the value of the content attribute of the first meta element in the Document in tree order where the name attribute value is an ASCII case-insensitive match for application-name and whose language is winning language.

このアルゴリズムは、例えばブックマークを標識するために、ブラウザーがページの名前を必要とする場合にブラウザーによって使用される。アルゴリズムに提供する言語は、ユーザーの優先言語になる。

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>
  ...

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

著者がページに適用可能として指定しているキーワードのリストを取得するために、ユーザーエージェントは、次の手順を実行しなければならない:

  1. keywordsを空のリストにする。

  2. For each meta element with a name attribute and a content attribute and where the name attribute value is an ASCII case-insensitive match for keywords:

    1. カンマで要素のcontent属性の値を分割する

    2. もしあれば、keywordsに得られたトークンを追加する。

  3. keywordsから重複を削除する。

  4. keywordsを返す。これは、著者がページに適用可能として指定したキーワードのリストである。

値の信頼性への不十分な確信が存在する場合に、ユーザーエージェントは、この情報を使用すべきでない。

たとえば、コンテンツ管理システムがサイト固有の検索エンジンのインデックスを設定するためにシステム内のページのキーワード情報を使用することは合理的であるが、この情報を使用した大規模なコンテンツアグリゲータはおそらく、特定のユーザーが不適切なキーワードを使用してその順位メカニズムを操作しようとすることに気づく。

リファラー

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

If any meta element element is inserted into the document, or has its name or content attributes changed, user agents must run the following algorithm:

  1. If element is not in a document tree, then return.

  2. If element does not have a name attribute whose value is an ASCII case-insensitive match for "referrer", then return.

  3. If element does not have a content attribute, or that attribute's value is the empty string, then return.

  4. Let value be the value of element's content attribute, converted to ASCII lowercase.

  5. If value is one of the values given in the first column of the following table, then set value to the value given in the second column:

    Legacy valueReferrer policy
    neverno-referrer
    defaultthe default referrer policy
    alwaysunsafe-url
    origin-when-crossoriginorigin-when-cross-origin
  6. If value is a referrer policy, then set element's node document's policy container's referrer policy to policy.

For historical reasons, unlike other standard metadata names, the processing model for referrer is not responsive to element removals, and does not use tree order. Only the most-recently-inserted or most-recently-modified meta element in this state has an effect.

theme-color

element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <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)">
...

To obtain a page's theme color, user agents must run the following steps:

  1. Let candidate elements be the list of all meta elements that meet the following criteria, in tree order:

  2. For each element in candidate elements:

    1. If element has a media attribute and the value of element's media attribute does not match the environment, then continue.

    2. Let value be the result of stripping leading and trailing ASCII whitespace from the value of element's content attribute.

    3. Let color be the result of parsing value.

    4. If color is not failure, then return color.

  3. Return nothing (the page has no theme color).

If any meta elements are inserted into the document or removed from the document, or existing meta elements have their name, content, or media attributes changed, or if the environment changes such that any meta element's media attribute's value may now or may no longer match the environment, user agents must re-run the above algorithm and apply the result to any affected UI.

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

color-scheme

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

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

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

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

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

To obtain a page's supported color-schemes, user agents must run the following steps:

  1. Let candidate elements be the list of all meta elements that meet the following criteria, in tree order:

  2. For each element in candidate elements:

    1. Let parsed be the result of parsing a list of component values given the value of element's content attribute.
    2. If parsed is a valid CSS 'color-scheme' property value, then return parsed.
  3. Return null.

If any meta elements are inserted into the document or removed from the document, or existing meta elements have their name or content attributes changed, user agents must re-run the above algorithm.

これらの規則は一致する要素が見つかるまで連続する要素をチェックするため、レガシーユーザーエージェントのフォールバックを処理するために、著者はそのような値を複数提供できる。 プロパティに対して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属性が指定された場合、要素はプラグマディレクティブである。

http-equiv属性は、次のキーワードと状態を持つ列挙属性である:

キーワードConforming状態概要
content-languageNoContent languageSets the pragma-set default language.
content-typeエンコーディング宣言charsetを設定する代替形式。
default-styleデフォルトスタイルCSSスタイルシートセット名前を設定する。
refreshリフレッシュ時限式のリダイレクトとして動作する。
set-cookieNoSet-CookieHas no effect.
x-ua-compatibleX-UA-Compatible実際には、仕様により密接に従うようにInternet Explorerに勧める。
content-security-policyContent security policyEnforces a Content Security Policy on a Document.

meta要素が文書に挿入される場合、その要素のhttp-equiv属性が存在しかつ上記の状態のいずれかを表す場合、以下のリストに記載されるように、ユーザーエージェントはその状態に適したアルゴリズムを実行しなければならない:

コンテンツ言語状態http-equiv="content-language"

この機能は不適合である。著者は代わりにlang属性を使用することを勧める。

このプラグマは、プラグマ設定のデフォルト言語を設定する。そのようなプラグマは正常に処理されるまで、プラグマ設定のデフォルト言語は存在しない。

  1. If the meta element has no content attribute, then return.

  2. If the element's content attribute contains a U+002C COMMA character (,) then return.

  3. Let input be the value of the element's content attribute.

  4. Let position point at the first character of input.

  5. Skip ASCII whitespace within input given position.

  6. Collect a sequence of code points that are not ASCII whitespace from input given position.

  7. Let candidate be the string that resulted from the previous step.

  8. If candidate is the empty string, return.

  9. Set the pragma-set default language to candidate.

    If the value consists of multiple space-separated tokens, tokens after the first are ignored.

このプラグマは、同じ名前のHTTP `Content-Language`ヘッダーと完全ではないが、ほぼ大部分で異なる。[HTTP]

エンコーディング宣言状態http-equiv="content-type"

エンコーディング宣言状態は、charset属性の設定の単なる代替形式である。これは文字エンコーディング宣言である。この状態のユーザーエージェントの要件は、仕様の解析セクションによってすべて処理される。

エンコーディング宣言状態http-equiv属性をもつmeta要素に対して、content属性は、文字列"text/html;"、その後に任意の数のASCII空白文字が任意で続き、その後に文字列"charset=charset=utf-8"で構成される文字列にASCII大文字・小文字不区別で一致する値を持たなければならない。

文書は、エンコーディング宣言状態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スタイルシートセット名前を設定する。

  1. If the meta element has no content attribute, or if that attribute's value is the empty string, then return.

  2. Change the preferred CSS style sheet set name with the name being the value of the element's content attribute. [CSSOM]

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

This pragma acts as a timed redirect.

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

  1. If the meta element has no content attribute, or if that attribute's value is the empty string, then return.

  2. Let input be the value of the element's content attribute.

  3. Run the shared declarative refresh steps with the meta element's node document, input, and the meta element.

The shared declarative refresh steps, given a Document object document, string input, and optionally a meta element meta, are as follows:

  1. If document's will declaratively refresh is true, then return.

  2. Let position point at the first code point of input.

  3. Skip ASCII whitespace within input given position.

  4. Let time be 0.

  5. Collect a sequence of code points that are ASCII digits from input given position, and let the result be timeString.

  6. If timeString is the empty string, then:

    1. If the code point in input pointed to by position is not U+002E (.), then return.

  7. Otherwise, set time to the result of parsing timeString using the rules for parsing non-negative integers.

  8. Collect a sequence of code points that are ASCII digits and U+002E FULL STOP characters (.) from input given position. Ignore any collected characters.

  9. Let urlRecord be document's URL.

  10. If position is not past the end of input, then:

    1. If the code point in input pointed to by position is not U+003B (;), U+002C (,), or ASCII whitespace, then return.

    2. Skip ASCII whitespace within input given position.

    3. If the code point in input pointed to by position is U+003B (;) or U+002C (,), then advance position to the next code point.

    4. Skip ASCII whitespace within input given position.

  11. If position is not past the end of input, then:

    1. Let urlString be the substring of input from the code point at position to the end of the string.

    2. If the code point in input pointed to by position is U+0055 (U) or U+0075 (u), then advance position to the next code point. Otherwise, jump to the step labeled skip quotes.

    3. If the code point in input pointed to by position is U+0052 (R) or U+0072 (r), then advance position to the next code point. Otherwise, jump to the step labeled parse.

    4. If the code point in input pointed to by position is U+004C (L) or U+006C (l), then advance position to the next code point. Otherwise, jump to the step labeled parse.

    5. Skip ASCII whitespace within input given position.

    6. If the code point in input pointed to by position is U+003D (=), then advance position to the next code point. Otherwise, jump to the step labeled parse.

    7. Skip ASCII whitespace within input given position.

    8. Skip quotes: If the code point in input pointed to by position is U+0027 (') or U+0022 ("), then let quote be that code point, and advance position to the next code point. Otherwise, let quote be the empty string.

    9. Set urlString to the substring of input from the code point at position to the end of the string.

    10. If quote is not the empty string, and there is a code point in urlString equal to quote, then truncate urlString at that code point, so that it and all subsequent code points are removed.

    11. Parse: Set urlRecord to the result of encoding-parsing a URL given urlString, relative to document.

    12. If urlRecord is failure, then return.

  12. Set document's will declaratively refresh to true.

  13. 次の手順のうちの1つ以上を実行する:

    • After the refresh has come due (as defined below), if the user has not canceled the redirect and, if meta is given, document's active sandboxing flag set does not have the sandboxed automatic features browsing context flag set, then navigate document's node navigable to urlRecord using document, with historyHandling set to "replace".

      For the purposes of the previous paragraph, a refresh is said to have come due as soon as the later of the following two conditions occurs:

      • At least time seconds have elapsed since document's completely loaded time, adjusted to take into account user or user agent preferences.
      • If meta is given, at least time seconds have elapsed since meta was inserted into the document document, adjusted to take into account user or user agent preferences.

      It is important to use document here, and not meta's node document, as that might have changed between the initial set of steps and the refresh coming due and meta is not always given (in case of the HTTP `Refresh` header).

    • Provide the user with an interface that, when selected, navigates document's node navigable to urlRecord using document.

    • Do nothing.

    In addition, the user agent may, as with anything, inform the user of any and all aspects of its operation, including the state of any timers, the destinations of any timed redirects, and so forth.

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

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

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

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

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

<meta http-equiv="Refresh" content="20; URL=page4.html">
Set-Cookie state (http-equiv="set-cookie")

This pragma is non-conforming and has no effect.

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

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]

  1. If the meta element is not a child of a head element, return.

  2. If the meta element has no content attribute, or if that attribute's value is the empty string, then return.

  3. Let policy be the result of executing Content Security Policy's parse a serialized Content Security Policy algorithm on the meta element's content attribute's value, with a source of "meta", and a disposition of "enforce".

  4. Remove all occurrences of the report-uri, frame-ancestors, and sandbox directives from policy.

  5. Enforce the policy policy.

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]

上記の規則を適用するために、オーサリングツールは、新たに作成される文書にUTF-8を使用することをデフォルトに設定しなければならない。

次の制限も適用される:

さらに、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要素

HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.">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+

element. It inherits properties and methods from its parent, HTMLElement.">HTMLStyleElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
メタデータコンテンツが期待される場所。
headの子であるnoscript要素内。
コンテンツモデル
適合スタイルシートを与えるテキスト
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
media — 受け入れ可能なメディア
blocking — 要素が潜在的にレンダリングブロッキングであるかどうか
また、title属性は、この要素で特別なセマンティックスを持つ:CSSスタイルシートセット名
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
  [HTMLConstructor] constructor();

  attribute boolean disabled;
  [CEReactions] attribute DOMString media;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;

  // also has obsolete members
};
HTMLStyleElement includes LinkStyle;

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属性の値が環境にマッチしかつ他の関連する条件が適用される場合、ユーザーエージェントはスタイルを適用しなければならず、そうでなければスタイルを適用してはならない。

スタイルは、たとえば@mediaブロックの使用とともにCSSにおいて、さらに範囲が制限されるかもしれない。この仕様は、そのような追加の制限や要件を上書きしない。

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要素は暗黙的に潜在的にレンダリングブロックキングである。


The user agent must run the update a style block algorithm whenever any of the following conditions occur:

The update a style block algorithm is as follows:

  1. Let element be the style element.

  2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

  3. If element is not connected, then return.

  4. If element's type attribute is present and its value is neither the empty string nor an ASCII case-insensitive match for "text/css", then return.

    In particular, a type value with parameters, such as "text/css; charset=utf-8", will cause this algorithm to return early.

  5. If the Should element's inline behavior be blocked by Content Security Policy? algorithm returns "Blocked" when executed upon the style element, "style", and the style element's child text content, then return. [CSP]

  6. Create a CSS style sheet with the following properties:

    type

    text/css

    owner node

    element

    media

    The media attribute of element.

    This is a reference to the (possibly absent at this time) attribute, rather than a copy of the attribute's current value. CSSOM defines what happens when the attribute is dynamically set, changed, or removed.

    title

    The title attribute of element, if element is in a document tree, or the empty string otherwise.

    Again, this is a reference to the attribute.

    alternate flag

    Unset.

    origin-clean flag

    Set.

    location
    parent CSS style sheet
    owner CSS rule

    null

    disabled flag

    Left at its default value.

    CSS rules

    Left uninitialized.

    This doesn't seem right. Presumably we should be using the element's child text content? Tracked as issue #2997.

  7. If element contributes a script-blocking style sheet, append element to its node document's script-blocking style sheet set.

  8. If element's media attribute's value matches the environment and element is potentially render-blocking, then block rendering on element.

Once the attempts to obtain the style sheet's critical subresources, if any, are complete, or, if the style sheet has no critical subresources, once the style sheet has been parsed and processed, the user agent must run these steps:

Fetching the critical subresources is not well-defined; probably issue #968 is the best resolution for that. In the meantime, any critical subresource request should have its render-blocking set to whether or not the style element is currently render-blocking.

  1. Let element be the style element associated with the style sheet in question.

  2. Let success be true.

  3. If the attempts to obtain any of the style sheet's critical subresources failed for any reason (e.g., DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), set success to false.

    Note that content-specific errors, e.g., CSS parse errors or PNG decoding errors, do not affect success.

  4. Queue an element task on the networking task source given element and the following steps:

    1. If success is true, fire an event named load at element.

    2. Otherwise, fire an event named error at element.

    3. If element contributes a script-blocking style sheet:

      1. Assert: element's node document's script-blocking style sheet set contains element.

      2. Remove element from its node document's script-blocking style sheet set.

    4. Unblock rendering on element.

The element must delay the load event of the element's node document until all the attempts to obtain the style sheet's critical subresources, if any, are complete.

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

HTMLStyleElement/media

Support in all current engines.

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

The media and blocking IDL attributes must each reflect the respective content attributes of the same name.

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>

4.2.7 Interactions of styling and scripting

If the style sheet referenced no other resources (e.g., it was an internal style sheet given by a style element with no @import rules), then the style rules must be immediately made available to script; otherwise, the style rules must only be made available to script once the event loop reaches its update the rendering step.

An element el in the context of a Document of an HTML parser or XML parser contributes a script-blocking style sheet if all of the following are true:

It is expected that counterparts to the above rules also apply to <?xml-stylesheet?> PIs. However, this has not yet been thoroughly investigated.

A Document has a script-blocking style sheet set, which is an ordered set, initially empty.

A Document document has a style sheet that is blocking scripts if the following steps return true:

  1. If document's script-blocking style sheet set is not empty, then return true.

  2. If document's node navigable is null, then return false.

  3. Let containerDocument be document's node navigable's container document.

  4. If containerDocument is non-null and containerDocument's script-blocking style sheet set is not empty, then return true.

  5. falseを返す。

A Document has no style sheet that is blocking scripts if it does not have a style sheet that is blocking scripts.