Edition for Web Developers — Last Updated 11 April 2024
html
要素Support in all current engines.
head
要素の後に続いてbody
要素。html
要素内の最初の文がコメントでない場合、html
要素の開始タグは省略することができる。html
要素の直後がコメントでない場合、html
要素の終了タグは省略することができる。HTMLElement
を使用する。著者は、文書の言語を与えるために、ルートの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 >
head
要素Support in all current engines.
html
要素での最初の要素として。iframe
srcdoc
文書であるか、タイトル情報がより上位プロトコルから利用可能な場合、1つより多くないtitle
要素および1つより多くないbase
要素である、0個以上のメタデータコンテンツ。title
要素が存在しかつ1つより多くないbase
要素である、1つ以上のメタデータコンテンツ。head
要素内の最初の文が要素である場合、head
要素の開始タグは省略することができる。head
要素の直後がASCII空白文字またはコメントでない場合、head
要素の終了タグは省略することができる。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
要素は省略できる。
title
要素Support in all current engines.
title
要素を含まないhead
要素内。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属性によって与えられる。
base
要素Support in all current engines.
base
要素を含まないhead
要素内。href
— 文書基底URLtarget
— ハイパーリンクナビゲーションおよびフォーム送信に対するデフォルトのナビゲート可能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 < base> 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
"へのリンクとなる。
link
要素Support in all current engines.
head
の子であるnoscript
要素内。href
— ハイパーリンクのアドレスcrossorigin
— 要素が生成元をまたいだ要求を処理する方法rel
— ハイパーリンクと宛先のリソースを含む文書の関係media
— 受け入れ可能なメディアintegrity
— Subresource 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
attribute has special semantics on this element: Title of the link; CSS style sheet set nameHTMLLinkElement
を使用する。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
属性は、リソースが適用されるメディアを表す。値は妥当なメディアクエリーリストでなければならない。
Support in all current engines.
integrity
属性は、この要素が責任を負うリクエストに対する完全性メタデータを表す。値はテキストである。属性は、stylesheet
、preload
または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" >
fetchpriority
属性は、外部リソースリンクでの使用を目的としたフェッチ優先属性であり、リンクされたリソースのフェッチと処理時に使用される優先度を設定するために使用される。
link
要素によって作成されるハイパーリンクを追跡する対話的なユーザーエージェントは、ユーザーインターフェイス内のどこかで、link
要素を使用して作成されるハイパーリンクを追跡する手段をユーザーに提供してもよい。そのようなfollow the hyperlinkアルゴリズムの呼び出しでは、 userInvolvement引数を"browser UI
"に設定しなければならない。正確なインターフェイスはこの仕様で定義されないが、文書で各link
要素とともに作成される各ハイパーリンクに対して、一部のフォームまたは別のもの(おそらく単純化された)中で、(以下に再び定義されるように、要素の属性から得られる)次の情報を含めることができる:
rel
属性で与えられる)title
属性で与えられる)。href
属性で与えられる)。hreflang
属性で与えられる)。media
属性で与えられる)。ユーザーエージェントはまた、(type
属性によって与えられるような)リソースのタイプなどの情報を含めることができる。
meta
要素Support in all current engines.
itemprop
属性が存在する場合:フローコンテンツ。itemprop
属性が存在しない場合:フレージングコンテンツ。charset
属性が存在する場合、または要素のhttp-equiv
の属性がエンコード宣言状態にある場合:head
要素内。http-equiv
属性が存在するが、エンコード宣言状態でない場合:head
要素内。http-equiv
属性が存在するが、エンコード宣言状態でない場合:head
要素の子であるnoscript
要素内。name
属性が存在する場合:メタデータコンテンツが期待される場所。itemprop
属性が存在する場合:メタデータコンテンツが期待される場所。itemprop
属性が存在する場合:フレージングコンテンツが期待される場所。name
— メタデータ名http-equiv
— プラグマディレクティブcontent
— 要素の値charset
— 文字エンコーディング宣言media
— 受け入れ可能なメディアHTMLMetaElement
を使用する。meta
要素は、title
、base
、link
、style
、script
要素を用いて表現できない様々な種類のメタデータを表す。
meta
要素は、name
属性をもつ文書レベルのメタデータ、http-equiv
属性を持つプラグマ・ディレクティブ、およびcharset
属性をもつHTML文書が文字列形式にシリアライズされる(たとえば、ネットワーク上の伝送、またはディスクストレージ)場合、ファイルの文字エンコーディング宣言を表すことができる。
name
、http-equiv
、charset
、およびitemprop
属性のうちの1つを正確に指定しなければならない。
name
、http-equiv
またはitemprop
のいずれかが指定される場合、content
属性も指定しなければならない。そうでなければ、省略されなければならない。
charset
属性は、文書で使用される文字エンコーディングを指定する。これは、文字エンコーディング宣言である。属性が存在する場合、その値は"utf-8
"に一致するASCII大文字・小文字不区別でなければならない。
meta
要素上のcharset
属性は、XML文書では効果はないが、XMLからおよびへの移行を容易にするためにXML文書で許可される。
文書ごとにcharset
属性をもつ複数のmeta
要素があってはならない。
content
属性は、文書のメタデータまたは要素がそれらの目的のために使用される場合のプラグマディレクティブの値を与える。この仕様の後続の節で説明されるように、許可される値は、正確な文脈に依存する。
meta
要素がname
属性を持つ場合、文書のメタデータを設定する。文書のメタデータは、名前と値のペアの観点から表される。meta
要素のname
属性が名前を与え、同じ要素のcontent
属性が値を与える。名前はメタデータのどの側面を設定するかを指定する。妥当な名前とその値の意味は、次の節で説明する。meta
要素がcontent
属性を持たない場合、メタデータの名前と値のペアの値部分は、空文字列である。
media
属性は、メタデータが適用されるメディアを表す。値は妥当なメディアクエリーリストでなければならない。name
がtheme-color
でない限り、media
属性は処理モデルに影響を与えないため、著者が使用することはできない。
Support in all current engines.
名前は大文字・小文字を区別せず、かつASCII大文字・小文字を区別しない方法で比較されなければならない。
application-name
値は、ページが表すウェブアプリケーションの名前を与える短い自由形式の文字列でなければならない。ページがウェブアプリケーションでない場合、application-name
メタデータ名を使用してはならない。それぞれの名前の言語を指定するlang
属性を使用することで、ウェブアプリケーション名の翻訳は与えられてもよい。
与えられる言語をもつ複数のmeta
要素が存在してはならず、かつname
属性値が文書ごとに値application-name
とASCII大文字・小文字不区別で一致する。
author
値は、ページ著者のうちの一人の名前を与える、自由形式の文字列でなければならない。
description
値は、ページを説明する自由形式の文字列でなければならない。たとえば検索エンジン内など、値はページのディレクトリーで使用するために適切なものでなければならない。name
属性値が文書ごとのdescription
にASCII大文字・小文字不区別で一致する場合、複数の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
値は、ユーザーエージェントがページや周囲のユーザーインターフェイスのの表示をカスタマイズするために使用すべき提案される色を定義する、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-scheme
にASCII大文字・小文字不区別一致で設定されるname
属性値をもつ複数のmeta
要素が存在してはならない。
次の宣言は、ページが暗い背景色と明るい前景色のカラースキームを認識して、処理できることを示す:
< meta name = "color-scheme" content = "dark" >
これらの規則は一致する要素が見つかるまで連続する要素をチェックするため、レガシーユーザーエージェントのフォールバックを処理するために、著者はそのような値を複数提供できる。 プロパティに対してCSSフォールバックがどのように機能するかとは反対に、複数のmeta要素は、新しい値の後にレガシー値で配置する必要がある。
誰でも独自の定義済みメタデータ名の集合に対する拡張を作成して使用することができる。そのような拡張を登録する必要はない。
ただし、次のいずれかの場合では新しいメタデータ名を作成すべきではない:
名前がURLであるか、付随するcontent
属性の値がURLである場合。このような場合では、(新しいメタデータ名を作成するよりもむしろ)リンクタイプの定義済みの集合への拡張として登録する。
名前がユーザーエージェントで処理要求があると予想されるものである場合。その場合、それは標準化されることが望ましい。
また、新しいメタデータ名を作成して使用する前に、すでに使用されているメタデータ名の選択を避け、すでに使用されているメタデータ名の複製を避け、かつ新しい標準化された名前があなたの選んだ名前と衝突することを避けるために、WHATWG Wiki MetaExtensions pageを参照することを勧める。[WHATWGWIKI]
誰でも自由にWHATWG Wiki MetaExtensions pageを編集して、いつでもメタデータ名を追加できる。新しいメタデータ名は、次の情報とともに指定することができる:
実際の名前が定義されている。名前は、他の定義済みの名前と紛らわしいものであるべきでない(たとえば、大文字と小文字だけが異なる)。
メタデータ名の意味はどのようなものかの短い非標準の説明は、その値が要求する形式を含む。
全く同じ処理要求を持つ他の名前のリスト。著者は、同義語であると定義された名前を使用すべきではない(同義語はユーザーエージェントがレガシーコンテンツのサポートを可能にすることのみを目的とする)。誰もが実際に使用されてない同義語を削除できる。レガシーコンテンツとの互換性のために同義語として処理する必要がある名前のみが、この方法で登録されているのである。
以下のうちの1つをとる:
メタデータ名が既存の値とともに冗長であることが判明した場合、削除され、既存の値の同義語としてリストされているべきである。
メタデータ名が、使用するまたは指定することなく一月以上の期間"proposed"(提案)状態で追加される場合、WHATWG Wiki MetaExtensions pageから削除されることがある。
メタデータ名が"proposed"(提案)状態で追加され、既存の値とともに冗長であることが判明している場合、既存の値の同義語として削除され、リストされているべきである。メタデータ名は"proposed"(提案)状態で追加され、有害だと判明している場合、"discontinued"(中止)状態に変更すべきである。
誰もがいつでも状態を変更できるが、上記の定義にしたがってのみ行うべきである。
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-compatible | X-UA-Compatible | In practice, encourages Internet Explorer to more closely follow the specifications. |
content-security-policy | Content security policy | Enforces 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
"
)Support in one engine only.
このプラグマは、CSSスタイルシートセットの名前を設定する。
http-equiv="refresh
"
)This pragma acts as a timed redirect.
Document
オブジェクトは、宣言的にリフレッシュに関連付けられている(真偽値)。最初はfalseである。
リフレッシュ状態のhttp-equiv
属性をもつmeta
に対して、content
属性はいずれかからなる値を持たなければならない:
URL
"に一致するサブ文字列が続き、その後にU+003D EQUALS SIGN 文字(=)が続き、その後にリテラルにU+0027 APOSTROPHE(')またはU+0022 QUOTATION MARK(")で開始しない妥当なURLが続くもの。前者の場合、整数は、そのページが再読み込みされるよりも前の秒数を表す。後者の場合、整数は、与えられたURLのページで置き換えられるよりも前の秒数を表す。
ページが5分ごとにサーバーからの自動的な再読み込みを確実にするために、報道機関のフロントページは、そのページのhead
要素で次のマークアップを含むかもしれない:
< meta http-equiv = "Refresh" content = "300" >
次のようなマークアップを用いて、連続したページは、各ページが連続で次のページにリフレッシュさせることで、自動スライドショーとして使用されるかもしれない:
< meta http-equiv = "Refresh" content = "20; URL=page4.html" >
http-equiv="x-ua-compatible
"
)実際問題として、このプラグマは、仕様により密接に従うようにInternet Explorerに勧める。
X-UA-Compatible状態におけるhttp-equiv
属性をもつmeta
要素の場合、content
属性は、文字列"IE=edge
"に一致するASCII大文字・小文字不区別である値を持たなければならない。
ユーザーエージェントは、このプラグマを無視することが要求される。
http-equiv="content-security-policy
"
)このプラグマはDocument
のContent Security Policyを実施する。[CSP]
Content Security Policy状態でhttp-equiv
属性をもつmeta
要素の場合、content
属性は妥当なコンテンツセキュリティポリシーからなる値を持たなければならないが、任意のreport-uri
、frame-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
要素が存在してはならない。
文字エンコーディング宣言は、文書の記憶または伝達に用いられる文字エンコーディングを指定するメカニズムである。
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"?>
style
要素Support in all current engines.
head
の子であるnoscript
要素内。media
— 受け入れ可能なメディアblocking
— 要素が潜在的にレンダリングブロッキングであるかどうか title
attribute has special semantics on this element: CSS style sheet set nameHTMLStyleElement
を使用する。style
要素は、著者に文書へCSSスタイルシートを埋め込むことを可能にする。style
要素は、スタイリング処理モデルへの、複数の入力の1つである。この要素は、ユーザーへのコンテンツを表すものでない。
Support in all current engines.
disabled
ゲッターの手順は次のとおり:
thisにCSSスタイルシートが関連付けられていない場合、falseを返す。
thisの関連付けられているCSSスタイルシートの無効フラグが設定されている場合、trueを返す。
falseを返す。
disabled
セッターの手順は次のとおり:
thisにCSSスタイルシートが関連付けられていない場合、返す。
与えられた値が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
属性はブロッキング属性である。
Support in one engine only.
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 >