Edition for Web Developers — Last Updated 29 October 2025
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を使用する。base要素は、著者にURLを解析する目的で文書の基底URLを指定、および次に続くハイパーリンクのためにデフォルトでナビゲート可能の名前の指定を可能にする。この要素は、この情報を超えた任意のコンテンツを表すものでない。
文書ごとに複数のbase要素が存在してはならない。
base要素は、href属性、またはtarget属性のいずれか、またはその両方を持たなければならない。
hrefコンテンツ属性が指定される場合、潜在的にスペースで囲まれた妥当なURLでなければならない。
base要素は、href属性を持つ場合、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属性はこの要素で特別なセマンティックスを持つ:リンクのタイトル、CSSスタイルシート設定名HTMLLinkElementを使用する。link要素は、著者が文書を他のリソースとリンクするのを可能にする。
リンクのアドレスは、href属性で与えられる。href属性が存在する場合、その値は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。href属性またはimagesrcset属性のいずれか、または両方が存在しなければならない。
(関係を)示されるリンクの種類はrel属性値によって与えられ、存在する場合、順不同の一意な空白区切りトークンの集合である値を持たなければならない。許可されたキーワードとその意味は、後の節で定義される。
link要素はrel属性またはitemprop属性を持たなければならないが、同時に持ってはならない。
link要素がitemprop属性を持つ、またはbody-okであるキーワードのみを含むrel属性を持つ場合、要素はbody内で許可されると呼ばれる。これは、要素がフレージングコンテンツが期待される場所で使用できることを意味する。
rel属性が使用される場合、この要素はページのbody内でのみ使用することができる。itemprop属性とともに使用される場合、マイクロデータモデルの制限と仮定して、要素はhead要素またはページのbody要素で使用できる。
外部リソースへのリンクとハイパーリンクという、2つのリンクカテゴリーがlink要素を用いて作成できる。リンクタイプの節では、あるリンクタイプが外部リソースまたはハイパーリンクであるかどうかを定義する。1つのlink要素は、複数のリンク(一部は外部リソースリンクかもしれず、一部はハイパーリンクであるかもしれない)を作成できる。正確には、どのリンクがどれだけ作成されるかは、rel属性で与えられるキーワードに応じて異なる。ユーザーエージェントは、要素あたりの基準ではなく、リンクあたりの基準でリンクを処理しなければならない。
link要素に対して作成された各リンクは別々に処理される。たとえば、rel="stylesheet"をもつ2つのlink要素が存在する場合、これらは個別の外部リソースとして数え、およびそれぞれが独立に独自の属性によって影響される。同様に、単一のlink要素が値next stylesheetを伴うrel属性を持つ場合、それはハイパーリンク(nextキーワードへの)および外部リソースリンク(stylesheetキーワードへの)の両方を作成し、それらはそれぞれに(mediaまたはtitleのような)他の属性の影響を受ける。
たとえば、次のlink要素は、(同じページへの)2つのハイパーリンクを作成する。
< link rel = "author license" href = "/about" >
この要素によって作成される2つのリンクは、1つは対象ページが現在のページの著者に関する情報を持つセマンティックであり、1つは現在のページが提供されている内部でライセンスに関する情報を対象ページが持つセマンティックである。
link要素とrel属性で作成されるハイパーリンクは、文書全体に適用される。これは、コンテキストが文書内のリンク位置によって与えられるリンク型を示す、aおよびarea要素のrel属性とは対照的である。
aおよびarea要素によって作成されたものとは異なり、link要素によって作成されたハイパーリンクは、提案されたデフォルトのレンダリングをサポートするユーザーエージェントでは、デフォルトで文書の一部として表示されない。そして、たとえCSSを使用して強制的に表示されたとしても、アクティブ化動作はない。 代わりに、ページまたはページのコンテンツを消費する他のソフトウェアによって使用される可能性のあるセマンティック情報を主に提供する。さらに、ユーザーエージェントは、そのようなハイパーリンクをたどるための独自のUIを提供することができる。
外部リソースへのリンクに対する正確な振る舞いは、関連するリンク型に対して定義されるように、正確な関係に依存する。
crossorigin属性はCORS設定属性である。これは、外部リソースリンクでの使用を意図される。
media属性は、リソースが適用されるメディアを表す。値は妥当なメディアクエリーリストでなければならない。
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属性はブロッキング属性である。これはリンクタイプstylesheetおよびexpectで使用され、これらのキーワードを含むrel属性を持つlink要素でのみ指定しなければならない。
color属性は、mask-iconリンクタイプとともに使用される。この属性は、mask-icon キーワードを含む rel 属性を持つlink要素でのみ指定しなければならない。この値は、ユーザーエージェントがサイトをピン留めするときに目に付くアイコンの表示をカスタマイズするために使用することができる推奨色を定義する、CSS <color>生成物と一致する文字列でなければならない。
この仕様は、color属性に対するユーザーエージェント要件を一切持たない。
mask-iconキーワードは、登録された事前定義されたリンクタイプの集合への拡張であるが、ユーザーエージェントは形はどうあれそのキーワードをサポートする必要はない。
link要素は、関連付けられた明示的に有効な真偽値を持つ。最初はfalseである。
disabled属性は、stylesheetリンクタイプで使用される真偽属性である。この属性は、stylesheetキーワードを含むrel属性を持つlink要素でのみ指定しなければならない。
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属性が指定された場合、要素はプラグマディレクティブである。
http-equiv属性は、次のキーワードと状態を持つ列挙属性である:
| キーワード | 状態 | 概要 |
|---|---|---|
content-type | エンコーディング宣言 | charsetを設定する代替形式。 |
default-style | デフォルトスタイル | CSSスタイルシートセットの名前を設定する。 |
refresh | リフレッシュ | 時限式のリダイレクトとして動作する。 |
x-ua-compatible | X-UA-Compatible | 実際には、仕様により密接に従うようにInternet Explorerに勧める。 |
content-security-policy | Content security policy | DocumentのContent Security Policyを実施する。 |
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")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属性は、この要素で特別なセマンティックスを持つ:CSSスタイルシートセット名HTMLStyleElementを使用する。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 >