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 Processing the media attribute
        2. 4.2.4.2 Processing the type attribute
        3. 4.2.4.3 Obtaining a resource from a link element
        4. 4.2.4.4 Processing `Link` headers
        5. 4.2.4.5 Providing users with a means to follow hyperlinks created using the link element
      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 他のプラグマディレクティブ
        5. 4.2.5.5 文書の文字エンコーディングを指定する
      6. 4.2.6 style要素
      7. 4.2.7 スタイルとスクリプトの相互作用
    3. 4.3 セクション
      1. 4.3.1 body要素
      2. 4.3.2 article要素
      3. 4.3.3 section要素
      4. 4.3.4 nav要素
      5. 4.3.5 aside要素
      6. 4.3.6 h1h2h3h4h5h6要素
      7. 4.3.7 hgroup要素
      8. 4.3.8 header要素
      9. 4.3.9 footer要素
      10. 4.3.10 address要素
      11. 4.3.11 見出しとセクション
        1. 4.3.11.1 アウトラインの作成
        2. 4.3.11.2 サンプルアウトライン
        3. 4.3.11.3 ユーザーにアウトラインを公開する
      12. 4.3.12 使用方法の概要
        1. 4.3.12.1 Articleかsectionか?
    4. 4.4 グルーピングコンテンツ
      1. 4.4.1 p要素
      2. 4.4.2 hr要素
      3. 4.4.3 pre要素
      4. 4.4.4 blockquote要素
      5. 4.4.5 ol要素
      6. 4.4.6 ul要素
      7. 4.4.7 li要素
      8. 4.4.8 dl要素
      9. 4.4.9 dt要素
      10. 4.4.10 dd要素
      11. 4.4.11 figure要素
      12. 4.4.12 figcaption要素
      13. 4.4.13 main要素
      14. 4.4.14 div要素
    5. 4.5 テキストレベルセマンティックス
      1. 4.5.1 a要素
      2. 4.5.2 em要素
      3. 4.5.3 strong要素
      4. 4.5.4small要素
      5. 4.5.5 s要素
      6. 4.5.6 cite要素
      7. 4.5.7 q要素
      8. 4.5.8 dfn要素
      9. 4.5.9 abbr要素
      10. 4.5.10 ruby要素
      11. 4.5.11 rt要素
      12. 4.5.12 rp要素
      13. 4.5.13 data要素
      14. 4.5.14 time要素
      15. 4.5.15 code要素
      16. 4.5.16 var要素
      17. 4.5.17 samp要素
      18. 4.5.18 kbd要素
      19. 4.5.19 subおよびsup要素
      20. 4.5.20 i要素
      21. 4.5.21 b要素
      22. 4.5.22 u要素
      23. 4.5.23 mark要素
      24. 4.5.24 bdi要素
      25. 4.5.25 bdo要素
      26. 4.5.26 span要素
      27. 4.5.27 br要素
      28. 4.5.28 wbr要素
      29. 4.5.29 使用方法の概要
    6. 4.6 リンク
      1. 4.6.1 導入
      2. 4.6.2 aおよびarea要素によって作成されるリンク
      3. 4.6.3 aおよびarea要素に対するAPI
      4. 4.6.4 Following hyperlinks
      5. 4.6.5 リソースのダウンロード
        1. 4.6.5.1 ハイパーリンク監査
      6. 4.6.6 リンクタイプ
        1. 4.6.6.1 リンクタイプ"alternate"
        2. 4.6.6.2 リンクタイプ"author"
        3. 4.6.6.3 リンクタイプ"bookmark"
        4. 4.6.6.4 Link type "canonical"
        5. 4.6.6.5 リンクタイプ"dns-prefetch"
        6. 4.6.6.6 リンクタイプ"external"
        7. 4.6.6.7 リンクタイプ"help"
        8. 4.6.6.8 リンクタイプ"icon"
        9. 4.6.6.9 リンクタイプ"license"
        10. 4.6.6.10 リンクタイプ"nofollow"
        11. 4.6.6.11 リンクタイプ"noopener"
        12. 4.6.6.12 リンクタイプ"noreferrer"
        13. 4.6.6.13 リンクタイプ"pingback"
        14. 4.6.6.14 リンクタイプ"preconnect"
        15. 4.6.6.15 リンクタイプ"prefetch"
        16. 4.6.6.16 リンクタイプ"preload"
        17. 4.6.6.17 リンクタイプ"prerender"
        18. 4.6.6.18 リンクタイプ"search"
        19. 4.6.6.19 Link type "serviceworker"
        20. 4.6.6.20 リンクタイプ"stylesheet"
        21. 4.6.6.21 リンクタイプ"tag"
        22. 4.6.6.22 シーケンシャルリンクタイプ
          1. 4.6.6.22.1 リンクタイプ"next"
          2. 4.6.6.22.2 リンクタイプ"prev"
        23. 4.6.6.23 その他のリンクタイプ
    7. 4.7 編集
      1. 4.7.1 ins要素
      2. 4.7.2 del要素
      3. 4.7.3 insdel要素の共通属性
      4. 4.7.4 編集と段落
      5. 4.7.5 編集とリスト
      6. 4.7.6 編集とテーブル

4 HTMLの要素

4.1 文書要素

4.1.1 html要素

カテゴリー
なし。
この要素を使用できるコンテキスト
文書の文書要素として。
複合文書で、サブ文書断片が許可される場所ならどこでも。
コンテンツモデル
head要素の後に続いてbody要素。
text/htmlにおけるタグ省略
html要素内の最初の文がコメントでない場合、html要素の開始タグは省略することができる。
html要素の直後がコメントでない場合、html要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
manifestアプリケーションキャッシュマニフェスト
DOMインターフェイス
[HTMLConstructor]
interface HTMLHtmlElement : HTMLElement {};

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

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

存在するならば、manifestマニフェスト属性は、文書のアプリケーションキャッシュマニフェストのアドレスを与える。属性が存在する場合、属性値は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。

The manifest attribute is part of the legacy "offline Web applications" feature, which is in the process of being removed from the Web platform. (This is a long process that takes many years.) Using the manifest attribute at this time is highly discouraged. Use service workers instead. [SW]

manifest属性は、文書の読み込みの初期段階でのみ効果を持つ。よって、動的に属性を変更すると、効果がない(したがって、いずれのDOM APIも、この属性に提供されない)。

アプリケーションキャッシュの選択の目的に対して、それらの要素が見られる前に属性が処理されるように、base要素は、manifest属性でURLの解析に影響を後で与えることができない。

window.applicationCache IDL属性は、オフラインのアプリケーションキャッシュ機構へのスクリプトアクセスを提供する。

次の例において、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要素での最初の要素として。
コンテンツモデル
文書がiframe srcdoc文書であるか、タイトル情報がより上位プロトコルから利用可能な場合、1つより多くないtitle要素および1つより多くないbase要素である、0個以上のメタデータコンテンツ
そうでなければ、厳密に1つのtitle要素が存在しかつ1つより多くないbase要素である、1つ以上のメタデータコンテンツ
text/htmlにおけるタグ省略
要素が空である場合、またはhead要素内の最初の文が要素である場合、head要素の開始タグは省略することができる。
A head element's end tag can be omitted if the head element is not immediately followed by ASCII whitespace or a comment.
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLHeadElement : HTMLElement {};

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

カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
他のtitle要素を含まないhead要素内。
コンテンツモデル
要素内の空白文字でないテキスト
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLTitleElement : HTMLElement {
  [CEReactions] attribute DOMString text;
};

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

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

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

title . text [ = value ]

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

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

IDL属性textは、title要素の子テキストコンテンツを返さなければならない。設定する際に、それはtextContent IDL属性と同じように振る舞わなければならない。

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

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

カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
他のbase要素を含まないhead要素内。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
href文書基底URL
targetハイパーリンクナビゲーションおよびフォーム送信に対するブラウジングコンテキスト
DOMインターフェイス
[HTMLConstructor]
interface HTMLBaseElement : HTMLElement {
  [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が存在する場合、最初のものを除いてすべて無視される。

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. Set element's frozen base URL to document's fallback base URL, if urlRecord is failure or running Is base allowed for Document? on the resulting URL record and document returns "Blocked", and to urlRecord otherwise.

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>

The link in the above example would be a link to "https://www.example.com/news/archives.html".

Spec bugs: 21622

カテゴリー
メタデータコンテンツ
要素がbody内で許可される場合フローコンテンツ
要素がbody内で許可される場合フレージングコンテンツ
この要素を使用できるコンテキスト
メタデータコンテンツが期待される場所。
headの子であるnoscript要素内。
要素がbody内で許可される場合フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
hrefハイパーリンクのアドレス
crossorigin — 要素がcrossorigin要求を処理する方法
rel — Relationship between the document containing the hyperlink and the destination resource
media — 受け入れ可能なメディア
nonceContent Security Policyチェックで使用される暗号nonce [CSP]
integrity — Integrity metadata used in Subresource Integrity checks [SRI]
hreflang — リンクされたリソースの言語
type — 参照されるリソースタイプのヒント
referrerpolicyReferrer policy for fetches initiated by the element
sizes — アイコンのサイズ(rel="icon"に対する)
as — プリロードリクエストの宛先(rel="preload"に対する)
scopeScope url for a service worker registration (for rel="serviceworker")
usecache — Whether to set use cache to true for a service worker registration (for rel="serviceworker")
workertypeService worker type for a service worker registration (for rel="serviceworker")
color — Color to use when customizing a site's icon (for rel="mask-icon")
また、title属性はこの要素で特別なセマンティックスを持つ:リンクのタイトル、CSSスタイルシート設定名
DOMインターフェイス
[HTMLConstructor]
interface HTMLLinkElement : HTMLElement {
  [CEReactions] attribute USVString href;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions] attribute DOMString rel;
  [CEReactions] attribute DOMString as; // (default "")
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString media;
  [CEReactions] attribute DOMString nonce;
  [CEReactions] attribute DOMString integrity;
  [CEReactions] attribute DOMString hreflang;
  [CEReactions] attribute DOMString type;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions] attribute USVString scope;
  [CEReactions] attribute WorkerType workerType;
  [CEReactions] attribute boolean useCache;
};
HTMLLinkElement implements LinkStyle;

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

リンクの宛先はhref属性によって与えられ、これは存在しなければならず、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。href属性が不在である場合、要素はリンクを定義しない。

crossorigin属性はCORS設定属性である。It is intended for use with external resource links.

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

relサポートトークンは、link要素で許可されるHTMLリンクタイプで定義されるキーワードであり、処理モデルに影響を与え、ユーザーエージェントによってサポートされる。The possible supported tokens are alternate, dns-prefetch, icon, next, pingback, preconnect, prefetch, preload, prerender, search, serviceworker, 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要素を用いて作成できる。リンクタイプの節では、あるリンクタイプが外部リソースまたはハイパーリンクであるかどうかを定義する。One link element can create multiple links (of which some might be external resource links and some might be hyperlinks); exactly which and how many links are created depends on the keywords given in the rel attribute. ユーザーエージェントは、要素あたりの基準ではなく、リンクあたりの基準でリンクを処理しなければならない。

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

For example, the following link element creates two hyperlinks (to the same page):

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

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

Hyperlinks created with the link element and its rel attribute apply to the whole document. This contrasts with the rel attribute of a and area elements, which indicates the type of a link whose context is given by the link's location within the document.

The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.

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

The nonce attribute represents a cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not an external resource specified by the link will be loaded and applied to the document. 値はテキストである。[CSP]

The integrity attribute represents the integrity metadata for requests which this element is responsible for. 値はテキストである。The attribute must not be specified on link elements that do not have a rel attribute that contains the stylesheet keyword. [SRI]

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

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

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

referrerpolicy属性は、リファラポリシー属性である。It is intended for use with external resource links, where it helps set the referrer policy used when obtaining the external resource. [REFERRERPOLICY].

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

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


sizes属性は、視覚形式のアイコンのサイズを与える。存在する場合、この値は単に助言を与えるだけである。複数のアイコンが利用可能な場合、ユーザーエージェントは、どのアイコンを使用するかを決定するためにこの値を使用してもよい。If specified, the attribute must have a value that is an unordered set of unique space-separated tokens which are ASCII case-insensitive. Each value must be either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character. The attribute must not be specified on link elements that do not have a rel attribute that specifies the icon keyword or the apple-touch-icon keyword.

The apple-touch-icon keyword is a registered extension to the predefined set of link types, but user agents are not required to support it in any way.


as属性は、href属性によって与えられるリソースに対するプリロードリクエストの宛先を指定する。It is an enumerated attribute. Each request destination, including the empty string, is a keyword for this attribute, mapping to a state of the same name. The attribute's missing value default and invalid value default are both the empty string state. 属性は省略してもよい。The attribute must not be specified on link elements that do not have a rel attribute that contains the preload keyword. User agents must implement the processing model of the as attribute described in Preload. [FETCH] [PRELOAD]


The scope attribute specifies the scope url for a service worker registration. If the attribute is present, the value must be a valid URL potentially surrounded by spaces. The attribute must not be specified on link elements that do not have a rel attribute that contains the serviceworker keyword.

The usecache attribute is a boolean attribute which sets use cache to true for a service worker registration. The attribute must not be specified on link elements that do not have a rel attribute that contains the serviceworker keyword.

The workertype attribute is an enumerated attribute that specifies the service worker type for a service worker registration. The attribute's keywords are classic and module, which map to the respective states classic and module. The missing value default is the classic state. The attribute must not be specified on link elements that do not have a rel attribute that contains the serviceworker keyword.


The color attribute is used with the mask-icon link type. The attribute must not be specified on link elements that do not have a rel attribute that contains the mask-icon keyword. The value must be a string that matches the CSS <color> production, defining a suggested color that user agents can use to customize the display of the icon that the user sees when they pin your site.

This specification does not have any user agent requirements for the color attribute.

The mask-icon keyword is a registered extension to the predefined set of link types, but user agents are not required to support it in any way.


The IDL attributes href, hreflang, integrity, media, nonce, rel, scope, sizes, and type 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.

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

crossOrigin IDL属性は、crossoriginコンテンツ属性を反映しなければならない。

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

The relList IDL attribute must reflect the rel content attribute.

The useCache IDL attribute must reflect the usecache content attribute.

The workerType IDL attribute must reflect the workertype content attribute.

4.2.4.1 Processing the media attribute

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

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

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

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

4.2.4.2 Processing the type attribute

If 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, 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. ユーザーエージェントが指定されるリンク関係に対して指定されるMIMEタイプをサポートしない場合、ユーザーエージェントはリソースを取得するべきではない。ユーザーエージェントが指定されるリンク関係に対して指定されるMIMEタイプをサポートする場合、ユーザーエージェントは外部リソースリンクの特定のタイプに対して指定されるように適切な時間でリソースを取得すべきである。If the attribute is omitted, and the external resource link type does not have a default type defined, but the user agent would obtain the resource if the type was known and supported, then the user agent should obtain the 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のリンクに対するデフォルトタイプは蹴られる。デフォルトタイプはtext/cssであるので、それにもかかわらずスタイルシートは適用される

For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available (modulo cross-origin restrictions) even if the resource is not applied. To obtain the resource, the user agent must run the following steps:

  1. If the href attribute's value is the empty string, then abort these steps.

  2. Parse the URL given by the href attribute, relative to the element's node document. If that fails, then abort these steps. Otherwise, let url be the resulting URL record.

  3. Let corsAttributeState be the current state of the element's crossorigin content attribute.

  4. Let request be the result of creating a potential-CORS request given url, the empty string, and corsAttributeState.

  5. Set request's client to the link element's node document's Window object's environment settings object.

  6. Set request's cryptographic nonce metadata to the current value of the link element's nonce content attribute.

  7. Set request's integrity metadata to the current value of the link element's integrity content attribute.

  8. Set request's referrer policy to the current state of the link element's referrerpolicy attribute.

  9. Fetch request.

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

外部リソースを取得する際に使用するプロトコル(HTTPなど)のセマンティックスに従わなければならない。(たとえば、リダイレクトに従い、404応答は外部リソースが適用されないようにする。)

Once the attempts to obtain the resource and its critical subresources are complete, the user agent must, if the loads were successful, queue a task to fire an event named load at the link element, or, if the resource or one of its critical subresources failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire an event named error at the link element. Non-network errors in processing the resource or its subresources (e.g. CSS parse errors, PNG decoding errors) are not failures for the purposes of this paragraph.

The task source for these tasks is the DOM manipulation task source.

リソースまたはリソースの重要なサブリソースを取得するすべての試みが完了するまで、要素は、要素のノード文書loadイベントを遅延しなければならない。(ユーザーエージェントがまだ取得しようとしていないリソースは、たとえば、必要とされるリソースを待っているため、loadイベントを遅延しない。)

サポートされる場合、HTTP `Link:`ヘッダーは、HTTPメッセージで指定された順序で、文書内のリンクの前に来ると想定しなければならない。このヘッダーは、関連する仕様に指定される規則に従って処理される。[HTTP] [WEBLINK]

HTTP `Link`ヘッダーにおける関係タイプの登録は、HTMLリンクタイプから区別され、したがってそのセマンティックスは同じ名前のHTML種類と異なるかもしれない。

インタラクティブなユーザーエージェントは、ユーザーインターフェイス内のどこかで、link要素を使用して作成されるハイパーリンクを追跡する手段をユーザーに提供してもよい。The exact interface is not defined by this specification, but it could include the following information (obtained from the element's attributes, again as defined below), in some form or another (possibly simplified), for each hyperlink created with each link element in the document:

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

ハイパーリンクを作成するlink要素の活性化挙動は、次のステップを実行することである:

  1. link要素のノード文書完全にアクティブでない場合、この手順を中止する。

  2. link要素によって作成されるハイパーリンクを追跡する

4.2.5 meta要素

カテゴリー
メタデータコンテンツ
itemprop属性が存在する場合:フローコンテンツ
itemprop属性が存在しない場合:フレージングコンテンツ
この要素を使用できるコンテキスト
charset属性が存在する場合、または要素のhttp-equivの属性がエンコード宣言状態にある場合:head要素内。
http-equiv属性が存在するが、エンコード宣言状態でない場合:head要素内。
http-equiv属性が存在するが、エンコード宣言状態でない場合:head要素の子であるnoscript要素内。
name属性が存在する場合:メタデータコンテンツが期待される場所。
itempropが存在する場合:メタデータコンテンツが期待される場所。
itemprop存在がする場合:フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
name — メタデータ名
http-equiv — プラグマディレクティブ
content — 要素の値
charset文字エンコーディング宣言
DOMインターフェイス
[HTMLConstructor]
interface HTMLMetaElement : HTMLElement {
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString httpEquiv;
  [CEReactions] attribute DOMString content;
};

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

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

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

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

charset属性は、文書で使用される文字エンコーディングを指定する。これは、文字エンコーディング宣言である。属性がXML文書内に存在する場合、その値は、文字列"UTF-8"とASCII大文字・小文字不区別で一致しなければならない(したがって、文書は、エンコーディングとしてUTF-8を使用するよう強制される)。

The charset attribute on the meta element has no effect in XML documents, and is only allowed in order to facilitate migration to and from XML.

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

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

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

nameおよびcontent IDL属性は、同じ名前のそれぞれのコンテンツ属性を反映しなければならない。IDL属性httpEquivは、コンテンツ属性http-equiv反映しなければならない。

4.2.5.1 標準メタデータ名

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

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

application-name

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

与えられる言語をもち、かつ文書ごとに値application-nameを設定するname属性をもつ複数のmeta要素が存在してはならない。

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

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

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

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

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

  4. winning languageを、値application-nameに設定されるname属性を持ちかつその言語が問題の言語であるDocumentにおけるmeta要素が存在するlanguagesにおける第一言語とする。

    どの言語もそのようなmeta要素を持たない場合、この手順を中止する。指定されるアプリケーション名は存在しない。

  5. application-nameに設定されるname属性を持ちかつその言語winning languageである、ツリー順Documentにおける最初のmeta要素のcontent属性の値を返す。

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

author

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

description

値は、ページを説明する自由形式の文字列でなければならない。たとえば検索エンジン内など、値はページのディレクトリで使用するために適切なものでなければならない。文書ごとに値descriptionを設定するname属性を持つ複数の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 whose name attribute's value is keywords:

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

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

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

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

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

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

referrer

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

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 run the following algorithm:

  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 value be the value of element's content attribute, converted to ASCII lowercase.

    2. 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 value Referrer policy
      never no-referrer
      default no-referrer-when-downgrade
      always unsafe-url
      origin-when-crossorigin origin-when-cross-origin
    3. If value is a referrer policy, then set element's node document's referrer policy to policy.

    The fact that these steps are applied for each element enables deployment of fallback values for older user agents. [REFERRERPOLICY]

theme-color

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

文書ごとに値theme-colorを設定するname属性を持つ複数のmeta要素があってはならない。

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

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

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. Let value be the result of stripping leading and trailing ASCII whitespace from the value of element's content attribute.

    2. If value can be parsed as a CSS <color> value, return the parsed color.

  3. If this step is reached, 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 or content attributes changed, user agents must re-run the above algorithm and apply the result to any affected UI.

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

4.2.5.2 他のメタデータ名

Anyone can create and use their own extensions to the predefined set of metadata names. There is no requirement to register such extensions.

However, a new metadata name should not be created in any of the following cases:

Also, before creating and using a new metadata name, consulting the WHATWG Wiki MetaExtensions page is encouraged — to avoid choosing a metadata name that's already in use, and to avoid duplicating the purpose of any metadata names that are already in use, and to avoid new standardized names clashing with your chosen name. [WHATWGWIKI]

Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a metadata name. New metadata names can be specified with the following information:

キーワード

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

概要

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

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

全く同じ処理要求を持つ他の名前のリスト。Authors should not use the names defined to be synonyms (they are only intended to allow user agents to support legacy content). 誰もが実際に使用されてない同義語を削除できる。レガシーコンテンツとの互換性のために同義語として処理する必要がある名前のみが、この方法で登録されているのである。

Status(状態)

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

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

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

If a metadata name is added in the "proposed" state for a period of a month or more without being used or specified, then it may be removed from the WHATWG Wiki MetaExtensions page.

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

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

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

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

http-equiv属性は、列挙属性である。以下の表は、この属性に対して定義されたキーワードを列挙する。キーワードとともにその行の最初のセルに与えられた状態は、これらキーワードが対応する状態を与える。最後の列に記載されているように、キーワードの一部は非適合である。

状態 キーワード
Content Language content-language 非適合
エンコーディング宣言 content-type
デフォルトスタイル default-style
リフレッシュ refresh
Cookie setter set-cookie 非適合
X-UA-Compatible x-ua-compatible
Content security policy Content-Security-Policy

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

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

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

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

  1. If the meta element has no content attribute, then abort these steps.

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

  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, abort these steps.

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

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: the literal string "text/html;", optionally followed by any number of ASCII whitespace, followed by the literal string "charset=", followed by one of the labels of the character encoding of the character encoding declaration.

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

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

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

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

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

  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"

このプラグマは、時限式のリダイレクトとして動作する。

  1. If another meta element with an http-equiv attribute in the Refresh state has already been successfully processed (i.e. when it was inserted the user agent processed it and reached the step labeled end), then abort these steps.

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

  3. Let document be the meta element's node document.

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

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

  6. Skip ASCII whitespace within input given position.

  7. Collect a sequence of code points that are ASCII digits from input given position, and parse the resulting string using the rules for parsing non-negative integers. If the sequence of characters collected is the empty string, then no number will have been parsed; abort these steps. Otherwise, let time be the parsed number.

  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 url be document's URL.

  10. If position is past the end of input, jump to the step labeled end.

  11. If the character in input pointed to by position is not a U+003B SEMICOLON character (;), a U+002C COMMA character (,), or ASCII whitespace, then abort these steps.

  12. Skip ASCII whitespace within input given position.

  13. If the character in input pointed to by position is a U+003B SEMICOLON character (;), a U+002C COMMA character (,), then advance position to the next character.

  14. Skip ASCII whitespace within input given position.

  15. If position is past the end of input, jump to the step labeled end.

  16. Let url be equal to the substring of input from the character at position to the end of the string.

  17. If the character in input pointed to by position is a U+0055 LATIN CAPITAL LETTER U character (U) or a U+0075 LATIN SMALL LETTER U character (u), then advance position to the next character. Otherwise, jump to the step labeled skip quotes.

  18. If the character in input pointed to by position is a U+0052 LATIN CAPITAL LETTER R character (R) or a U+0072 LATIN SMALL LETTER R character (r), then advance position to the next character. Otherwise, jump to the step labeled parse.

  19. If the character in input pointed to by position is s U+004C LATIN CAPITAL LETTER L character (L) or a U+006C LATIN SMALL LETTER L character (l), then advance position to the next character. Otherwise, jump to the step labeled parse.

  20. Skip ASCII whitespace within input given position.

  21. If the character in input pointed to by position is a U+003D EQUALS SIGN (=), then advance position to the next character. Otherwise, jump to the step labeled parse.

  22. Skip ASCII whitespace within input given position.

  23. Skip quotes: If the character in input pointed to by position is either a U+0027 APOSTROPHE character (') or U+0022 QUOTATION MARK character ("), then let quote be that character, and advance position to the next character. Otherwise, let quote be the empty string.

  24. Let url be equal to the substring of input from the character at position to the end of the string.

  25. If quote is not the empty string, and there is a character in url equal to quote, then truncate url at that character, so that it and all subsequent characters are removed.

  26. Parse: Parse url relative to document. If that fails, abort these steps. Otherwise, let urlRecord be the resulting URL record.

  27. End: Perform one or more of the following steps:

    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">
クッキーセッターhttp-equiv="set-cookie"

このプラグマは、HTTPクッキーを設定する。[COOKIES]

これは非適合である。実際のHTTPヘッダーを代わりに使用すべきである。

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

  2. Act as if receiving a set-cookie-string for the document's URL via a "non-HTTP" API, consisting of the value of the element's content attribute encoded as UTF-8. [COOKIES] [ENCODING]

X-UA-Compatible状態http-equiv="x-ua-compatible"

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

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

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

コンテンツセキュリティーポリシー状態http-equiv="content-security-policy"

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

  1. If the meta element is not a child of a head element, abort these steps.

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

  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.

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

  5. Enforce the policy policy.

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

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

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

Spec bugs: 28339, 28563

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

4.2.5.4 他のプラグマディレクティブ

プラグマディレクティブの定義済みセットに対する拡張は、WHATWG Wiki PragmaExtensions pageに登録されているかもしれない。[WHATWGWIKI]

そのような拡張は、Permanent Message Header Field Registryに登録されたHTTPヘッダーと同一の名前を使用しなければならず、HTTPヘッダーに対して説明されるものと同様に振る舞わなければならない。[IANAPERMHEADERS]

メタデータを記述するヘッダー、または特定のユーザーエージェント処理を必要としないものに対応するプラグマディレクティブは、登録されてはならない。代わりにメタデータ名を使用する。結果としてHTMLを実装するユーザーエージェントとそうでないユーザーエージェントと異なるHTTPレベルの振る舞いをもたらすので、HTTP処理モデルに影響を与えるヘッダー(たとえば、キャッシュ)に相当するプラグマディレクティブは登録されてはならない。

上記の条件を満たすプラグマディレクティブの追加は、いつでもWHATWG Wiki PragmaExtensions pageを編集することで誰もが自由にできる。そのような登録は以下の情報を指定しなければならない:

キーワード

実際の名前が定義されている。名前は、同じ要求をもつ以前に登録されたHTTPの名前と一致しなければならない。

概要

プラグマディレクティブの目的の非規範的な説明。

Specification(仕様)
対応するHTTPヘッダーを定義する仕様へのリンク。

適合性チェッカーは、値が許容されているかどうかを確立するために、WHATWG Wiki PragmaExtensionsページに記載された情報を使用しなければならない:この仕様または前述のページのいずれかに記載されない値が無効として拒否されなければならないのに対し、この仕様で定義されるまたは上記のページに記載される値は、受け入れられなければならない。適合性チェッカーは、この情報をキャッシュしてもよい(たとえば、パフォーマンス上の理由から、または信頼性の低いネットワーク接続を使用することを避けるためなど)。

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

Spec bugs: 18338

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

以下の制限が文字エンコーディング宣言に適用される。

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

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

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

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

HTML文書charset属性をもつmeta要素または文字エンコーディング宣言http-equiv属性をもつmeta要素を含む場合、使用される文字エンコーディングはASCII互換エンコーディングでなければならない。

著者はUTF-8を使用すべきである。適合性検査は、著者にレガシーエンコーディングを使うことに反対するよう忠告してもよい。[ENCODING]

オーサリングツールは、新たに作成される文書にUTF-8を使用することをデフォルトに設定すべきである。[ENCODING]

著者は、WHATWG Encoding standardで定義されないエンコーディングを使用してはならない。さらに、著者はISO-2022-JPを使用すべきではない。[ENCODING]

Some encodings that are not defined in the WHATWG Encoding standard use bytes in the range 0x20 to 0x7E, inclusive, to encode characters other than the corresponding characters in the range U+0020 to U+007E, inclusive, and represent a potential security vulnerability: a user agent might end up interpreting supposedly benign plain text content as HTML tags and JavaScript.

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

In XML, the XML declaration should be used for inline character encoding information, if necessary.

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

<meta charset="utf-8">

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

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

4.2.6 style要素

カテゴリー
メタデータコンテンツ
この要素を使用できるコンテキスト
メタデータコンテンツが期待される場所。
headの子であるnoscript要素内。
コンテンツモデル
type属性の値に依存するが、下記の文に記述される要求に一致しなければならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
media — 受け入れ可能なメディア
nonceContent Security Policyチェックで使用される暗号nonce [CSP]
type — 埋め込みリソースタイプ
また、title属性はこの要素で特別なセマンティックスを持つ:CSSスタイルシートセット名
DOMインターフェイス
[HTMLConstructor]
interface HTMLStyleElement : HTMLElement {
  [CEReactions] attribute DOMString media;
  [CEReactions] attribute DOMString nonce;
  [CEReactions] attribute DOMString type;
};
HTMLStyleElement implements LinkStyle;

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

type属性はスタイル言語を与える。属性が存在する場合、その値はスタイル言語を示す妥当なMIMEタイプでなければならない。charsetパラメーターを指定してはならない。属性が存在しない場合に用いられるtype属性に対するデフォルト値は、"text/css"である。[RFC2318]

言語をサポートするかどうかを判断するためにタイプを検査する際、ユーザーエージェントは、未知のMIMEパラメーターを無視してはならない―未知のパラメーターをもつタイプがサポートされないことを仮定しなければならない。charsetパラメーターは、ここではMIMEタイプを比較するために未知のパラメーターとして扱われなければならない。

media属性は、スタイルが適用されるメディアを言う。値は妥当なメディアクエリーリストでなければならない。media属性の値が環境にマッチしかつ他の関連する条件が適用される場合、ユーザーエージェントはスタイルを適用しなければならず、そうでなければスタイルを適用してはならない。

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

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

nonce属性は、要素で指定されたスタイルが文書に適用されるかどうかを決定するためにContent Security Policyによって使用することができる(「一度に使用される数」)暗号ノンスを表す。値はテキストである。[CSP]

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

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

style要素のtextContentは以下のABNFでstyle生成物と対等でなければならず、Unicodeである文字セットとなる。[ABNF]

style         = no-c-start *( c-start no-c-end c-end no-c-start )
no-c-start    = < any string that doesn't contain a substring that matches c-start >
c-start       = "<!--"
no-c-end      = < any string that doesn't contain a substring that matches c-end >
c-end         = "-->"

The user agent must run the update a style block algorithm that applies for the style sheet language specified by the style element's type attribute, passing it the element's style data, whenever one of the following conditions occur:

For styling languages that consist of pure text (as opposed to XML), a style element's style data is the child text content of the style element. For XML-based styling languages, the style data consists of all the child nodes of the style element.

The update a style block algorithm for CSS (text/css) 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's root is neither a shadow root nor a document, then abort these steps.

  4. 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 style data, then abort these steps. [CSP]

  5. 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. The CSSOM specification 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 specification does not define any other styling language's update a style block algorithm.

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, if the loads were successful or there were none, queue a task to fire an event named load at the style element, or, if one of the style sheet's critical subresources failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), queue a task to fire an event named error at the style element. Non-network errors in processing the style sheet or its subresources (e.g. CSS parse errors, PNG decoding errors) are not failures for the purposes of this paragraph.

The task source for these tasks is the DOM manipulation task source.

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]

The media, nonce, and type IDL attributes must 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 スタイルとスクリプトの相互作用

スタイルシートは、link要素、style要素、<?xml-stylesheet?>処理命令、HTTP `Link:`ヘッダー、または他のメカニズムで追加されようがなかろうが、最初に設定されない、スタイルシートレディフラグを持つ。

スタイルシートを適用する準備ができている場合、そのスタイルシートレディフラグを設定しなければならない。スタイルシートが他のリソース(たとえば、@import規則のないstyle要素で与えられる内部スタイルシート)を参照しない場合、スタイル規則はすぐにスクリプトを利用可能にしなければならない。そうでなければ、スタイル規則は、イベントループがその更新レンダリング手順に達すると、スクリプトを利用可能にしなければならない。

HTMLパーサーまたはXMLパーサーDocumentのコンテキストにおけるスタイルシートは、要素がそのDocumentのパーサーによって作成された場合、スクリプトをブロックしているスタイルシートであると言われ、かつその要素は、要素がパーサーによって作成された際にスタイル処理モデルに貢献する外部リソースリンクであったstyle要素またはlink要素のいずれかであり、かつ要素がパーサーによって作成された際に要素のスタイルシートを有効にして、かつ要素のスタイルシートレディフラグはまだ設定されておらず、かつ最後の時間のイベントループステップ1に到達し、要素はそのDocumentあって、かつユーザーエージェントは、まだその特定のスタイルシートをあきらめていない。ユーザーエージェントは、いつでもスタイルシートをあきらめてもよい。

スタイルシートが最終的にまだロードする場合、スタイルシートをロードする前にスタイルシートをあきらめることは、スクリプトが誤った情報で動作して終わるかもしれないことを意味する。たとえば、スタイルシートが要素の色緑に設定するが、シートがロードされる前に実行される結果のスタイルを検査するスクリプトを設定する場合、スクリプトは要素が黒であること(またはデフォルトの色である何か)がわかり、したがって(緑の代わりに、ページ上の他の場所で色として黒の使用を決定するなど)粗末な選択を行うかもしれない。実装者は、終了するための遅いネットワーク要求を待つ間に何もし​ないことのパフォーマンスの影響で誤った情報を使用してスクリプトの可能性のバランスを取る必要がある。

そのDocumentのコンテキストでスクリプトをブロックしているスタイルシートのいずれかが存在する場合、またはそのDocument親ブラウジングコンテキストを持つブラウジングコンテキストにあり、かつその親ブラウジングコンテキスト自身のアクティブな文書スクリプトをブロックしているスタイルシートを持つ場合、Documentスクリプトをブロックしているスタイルシートを持つ

前の段落で定義されるようなスクリプトをブロックしているスタイルシートを持たない場合、Documentスクリプトをブロックしているスタイルシートを持たない

4.3 セクション

Support: html5semanticChrome for Android 57+Chrome 26+UC Browser for Android (limited) 11.4+iOS Safari 7.0+Firefox 21+IE (limited) 9+Samsung Internet 4+Opera Mini (limited) all+Android Browser 4.4+Edge 12+Safari 6.1+Opera 15+

Source: caniuse.com

4.3.1 body要素

カテゴリー
セクショニングルート
この要素を使用できるコンテキスト
html要素の2番目の要素として。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
A body element's start tag can be omitted if the element is empty, or if the first thing inside the body element is not ASCII whitespace or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
body要素の直前がコメントでない場合、body要素の終了タグは省略してすることができる。
コンテンツ属性
グローバル属性
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononline
onpagehide
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload
DOMインターフェイス
[HTMLConstructor]
interface HTMLBodyElement : HTMLElement {};

HTMLBodyElement implements WindowEventHandlers;

body要素は、文書の主要コンテンツを表す

適合文書では、1つのbody要素のみが存在する。document.body IDL属性は、文書のbody要素に簡単にアクセスできるスクリプトを提供する。

一部のDOM操作(たとえば、ドラッグアンドドロップモデルの一部)は、"body要素"という用語で定義される。これは用語の定義に従って、DOMにおける特定の要素を参照し、任意のbody要素を参照しない。

body要素は、Windowオブジェクトのイベントハンドラーの数をイベントハンドラーコンテンツ属性として公開する。また、それらのイベントハンドラーIDL属性を反映する。

body要素で公開されるWindowオブジェクトのonbluronerroronfocusonloadonresizeおよびonscrollイベントハンドラーは、通常HTML要素によってサポートされる同じ名前をもつ汎用イベントハンドラーに取って代わる。

したがって、たとえば、Documentbody要素の子で送出されたわき出るerrorイベントは、要素のonerrorイベントハンドラーコンテンツ属性を最初にもたらし、それからルートhtml要素のイベントハンドラーコンテンツ属性、その後にbody要素のonerrorイベントハンドラーコンテンツ属性をもたらすだろう。これは、イベントがターゲットから、bodyhtmlDocumentWindow、およびbodyでないWindowを見ているbody上のイベントハンドラーへわき出るためである。しかし、イベントがbodyを通してわき出し、かつイベントがWindowオブジェクトに到達しない場合、addEventListener()を使用するbodyに属する通常のイベントリスナーが実行されるだろう。

このページは、ユーザーがオンラインであるかどうかを表示するインジケーターを更新する:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Online or offline?</title>
  <script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  </script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>

4.3.2 article要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、インタラクティブなウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。

article要素がネストされる場合、原則的に内側のarticle要素が外側の記事の内容に関連する記事を表す。たとえば、ユーザーの投稿コメントを受け付けるサイトのブログエントリは、ブログエントリのarticle要素内にネストされたarticle要素としてコメントを表すことができる。

article要素に関連付けられている著者の情報(address要素を参照のこと)は、ネストされたarticle要素には適用されない。

シンジケーションで再配布されるコンテンツとともに明確に使用された場合、article要素は、Atomでのentry要素の目的と類似性がある。[ATOM]

schema.orgマイクロ語彙は、CreativeWorkサブタイプのいずれかを使用して、article要素の公表日を提供するために使用できる。

ページの主要コンテンツ(すなわち、フッター、ヘッダー、ナビゲーションブロック、およびサイドバーを除くもの)がすべての1つの自己完結型の組成物である場合、そのコンテンツはarticleでマークしてもよいが、その場合に技術的に冗長である(ページが単一の組成物であることは自明であるので、そのまま単一の文書である)。

この例は、schema.org注釈をもつarticle要素を使用するブログ記事を示す。

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

これは同じブログの記事であるが、コメントの一部を示す:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

(たとえば、誰がいつ書いたかなど)各コメントに対して情報を与えるためのfooterの用法に注意すること。たとえばこの場合のように、footer要素は、適切な場合にそのセクションの先頭に表示することができる。(この場合、headerの使用は、どちらも間違っていないだろう。これは主にオーサリングの好みの問題である。)

この例において、article要素は、ポータルページ上にウィジェットをホストするために使用される。ウィジェットは、特定のスタイリングおよびスクリプト動作を取得するために、カスタマイズされた組み込み要素として実装される。

<!DOCTYPE HTML>
<html lang=en>
<title>eHome Portal</title>
<script src="/scripts/widgets.js">
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h1>Stocks</h1>
 <table>
  <thead> <tr> <th> Stock <th> Value <th> Delta
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h1>News</h1>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>

4.3.3 section要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。

セクションの例は、章、タブ付きのダイアログボックス内のさまざまなタブ付きページ、または論文の番号付きセクションであろう。ウェブサイトのホームページは、はしがき、ニュース、および連絡先情報のセクションに分けることができるだろう。

要素のコンテンツを配給することが理にかなう場合、著者はsection要素の代わりにarticle要素を使用するよう推奨される。

section要素は包括的なコンテナ要素ではない。要素がスタイル付け目的またはスクリプティングの便宜のために必要になった場合のみ、著者は、代わりにdiv要素を使用するよう推奨される。要素の内容が文書のアウトラインで明示的に記載されるだろう場合のみ、section要素が適切であるというのが一般的なルールである。

次の例において、2つの短いセクションを含む、リンゴについて(大規模なウェブページの一部)の記事を見てみる。

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

sectionの使用は、特定のセクションが、トップレベル、第二レベル、第三レベルなどであるかどうかを心配することなく、著者がh1要素をあらゆる場所で使用できること意味することに注目する。

これは、2つのセクションをもつ卒業式のプログラムであり、1つは卒業する人のリスト、もう1つは式の説明である。(この例においてマークアップは、要素間の空白の量を最小化するために使用される珍しいスタイルを特徴とする。)

<!DOCTYPE Html>
<Html Lang=En
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H1
       >Ceremony</H1
     ><P
       >Opening Procession</P
     ><P
       >Speech by Validactorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H1
       >Graduates</H1
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>

この例において、本の著者は、章と付録のようないくつかのセクションをマークアップし、異なるセクションの2つのクラスでヘッダーをスタイル付けするためにCSSを使用している。

<style>
 section { border: double medium; margin: 2em; }
 section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
 <hgroup>
  <h1>My Book</h1>
  <h2>A sample with not much content</h2>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h1>My First Chapter</h1>
 <p>This is the first of my chapters. It doesn't say much.</p>
 <p>But it has two paragraphs!</p>
</section>
<section class="chapter">
 <h1>It Continues: The Second Chapter</h1>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h1>Chapter Three: A Further Example</h1>
 <p>It's not like a battle between brightness and earthtones would go
 unnoticed.</p>
 <p>But it might ruin my story.</p>
</section>
<section class="appendix">
 <h1>Appendix A: Overview of Examples</h1>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h1>Appendix B: Some Closing Remarks</h1>
 <p>Hopefully this long example shows that you <em>can</em> style
 sections, so long as they are used to indicate actual sections.</p>
</section>

4.3.4 nav要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしmain要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

nav要素は、他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部を表す

ページ上のリンクのグループがnav要素である必要はない―この要素は、主要なナビゲーションブロックから成るセクションを主に対象としている。特に、サービスの条件、ホームページ、著作権ページのような、サイトのさまざまなページへの簡潔なリンクのリストをフッターが持つことは、一般的である。footer要素は単独で、このような場合に対して十分である。一方nav要素は、そのような場合に使用できるが、通常不要である。

初期のレンダリングで省略されているナビゲーション情報から利益を得ることができる、またはすぐに利用可能であるナビゲーション情報から利益を得ることができるユーザーを対象とする(スクリーンリーダーなどの)ユーザーエージェントは、ページ上のどのコンテンツに最初にスキップまたは要求(もしくはその両方)に応じて提供するかを決定する方法として、この要素を使用できる。

次の例において、2つのnav要素がある。1つはサイト周辺の主要なナビゲーションのため、もう1つはページ自身周辺の補助的なナビゲーション用である。

<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h1>Demos in Exampland</h1>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h1>Public demonstrations</h1>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h1>Demolitions</h1>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

次の例において、ページはリンクが存在する複数の場所を持つが、そのうちの1つのみがナビゲーションセクションとみなされる。

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <main itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </main>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

main要素は、ヘッダーとフッター以外のページのすべてのコンテンツを包み、そのヘッダーとフッター以外のブログエントリのすべてのコンテンツを包むために使用されていることに注意すること。

ブログの記事について、公開日およびその他のメタデータを提供するためにschema.orgの語彙を使用する上記の例で、マイクロデータの注釈も見ることができる。

nav要素はリストを含める必要はなく、同様に他の種類のコンテンツを含むことができる。このナビゲーションブロックにおいて、リンクは文で提供されている:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="https://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="https://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

この例において、navは、ユーザースイッチフォルダーができるように、電子メールアプリケーションで使用される:

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
 <h1>Folders</h1>
 <ul>
  <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
  <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
  <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
  <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
  <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
 </ul>
</nav>

4.3.5 aside要素

カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしmain要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

aside要素は、aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクションを表す。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。

この要素はリード文またはサイドバーのような印刷上の効果に対して、navの要素のグループに対して、広告に対して、およびそのページのメインコンテンツとは別に考えられる他のコンテンツに対して使用できる。

これらの文書はメインフローの一部であるので、単に挿入句にaside要素を使用することは適切でない。

次の例は、asideがヨーロッパのかなり長いニュース記事でスイスの背景素材をマークアップに対して使用される様子を示す。

<aside>
 <h1>Switzerland</h1>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

次の例は、asideが長い記事でリード文のマークアップに対して使用される様子を示す。

...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
 <q> People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. </q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...

以下は、ブログロール(他のブログへのリンク)とブログの反対側のコンテンツにasideが使用される様子を示す。

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

4.3.6 h1h2h3h4h5h6要素

カテゴリー
フローコンテンツ
ヘディングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
hgroup要素の子として。
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLHeadingElement : HTMLElement {};

これらの要素は、そのセクションの見出しを表す

セマンティックスとこれらの要素の意味は見出しとセクションの節で定義される。

これらの要素は、要素名の数字で与えられたランクを持つ。h1要素が最も高いランクを持つと言われ、h6要素が最も低いランクを持ち、同じ名前をもつ2つの要素は等しいランクを持つ。

それぞれの文書のアウトライン(その見出しとセクションの構造)が関係する限りにおいて、次の2つの断片は、セマンティックに等価である:

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h1>Diving in</h1>
 </section>
 <section>
  <h1>Simple shapes</h1>
 </section>
 <section>
  <h1>Canvas coordinates</h1>
  <section>
   <h1>Canvas coordinates diagram</h1>
  </section>
 </section>
 <section>
  <h1>Paths</h1>
 </section>
</body>

著者は、その簡潔さのために前者のスタイルを好むかもしれないし、大量の編集を目の前にして利便性のために後者のスタイルを好むかもしれない。どちらが純粋に最良なのかは、オーサリングスタイルの好みの問題である。

もはやその互換性が必要されない場合に、依然として将来のプルーフィングの一方で、レガシーツールとの互換性のために、2つのスタイルを組み合わせることができる。この3つ目のスニペットはもう一度、前の2つと同じアウトラインを持つ:

<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h2>Diving in</h2>
 </section>
 <section>
  <h2>Simple shapes</h2>
 </section>
 <section>
  <h2>Canvas coordinates</h2>
  <section>
   <h3>Canvas coordinates diagram</h3>
  </section>
 </section>
 <section>
  <h2>Paths</h2>
 </section>
</body>

4.3.7 hgroup要素

カテゴリー
フローコンテンツ
ヘディングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
1つ以上のh1h2h3h4h5h6およびtemplate要素
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

hgroup要素は、hgroup要素のすべてのh1h6の子要素で構成する、セクションの見出しを表す。小見出し、代替タイトル、またはキャッチフレーズのような、要素が複数のレベルを持つ場合、見出しは、h1h6要素のグループセットを使用する。

任意のそのような要素が存在する場合、またはそうでなければh1要素(最高ランク)と同じである場合、hgroup要素のランクは、hgroup要素の最高位h1h6要素の子孫のランクである。hgroup要素でヘディングコンテンツのその他のh1h6要素は、小見出しまたは字幕または(補助的な)代替タイトルを示す。

見出しとセクションのセクションは、hgroup要素が個々のセクションに割り当てられる方法を定義する。

ここでは、妥当な見出しの例をいくつか示す。

<hgroup>
 <h1>The reality dysfunction</h1>
 <h2>Space is not the only void</h2>
</hgroup>
<hgroup>
 <h1>Dr. Strangelove</h1>
 <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

The point of using hgroup in these examples is to prevent the h2 element (which acts as a secondary title) from creating a separate section of its own in any outline and to instead cause the contents of the h2 to be shown in rendered output from the outline algorithm in some way to indicate that it is not the title of a separate section but instead just a secondary title in a group of titles.

ユーザーインターフェイスの問題であるので、ユーザーエージェントは(たとえば、コンテンツや検索結果の表に)ユーザーインターフェイスで、そのようなマルチレベルの見出しを公開する方法は、実装に開いたままになる。上記の最初の例は、このようにレンダリングすることができる:

The reality dysfunction: Space is not the only void

あるいは、次のようになる:

The reality dysfunction (Space is not the only void)

タイトルが複数行にレンダリングすることができるインターフェイスで、おそらくより大きなフォントサイズで最初の行とともに、次のようにレンダリングすることができる:

The reality dysfunction
Space is not the only void

次の2つの例は、2つのh1の見出しが同じ映画に米国と英国の名前をグループするためにhgroup要素内で使用することができる方法を示す。

<hgroup>
 <h1>The Avengers</h1>
 <h1>Avengers Assemble</h1>
</hgroup>

<hgroup>
 <h1>Avengers Assemble</h1>
 <h1>The Avengers</h1>
</hgroup>

上記の最初の例は、映画名が、米国名(主)タイトルとしてThe Avengers、および英国名(補助)代替タイトルとしてAvengers Assembleをもつ、米国の出版でグループ化するだろう方法を示す。上記の2番目の例は、映画名が英国名(主)タイトルとして、および米国名(補助)代替タイトルとしてもつ、英国の出版でグループ化するだろう方法を示す。

両方の場合で、2つのタイトルはタイトルが等価ではないことを示すグループへのhgroup要素の使用に注意することが重要である。最初のh1は(主)タイトルを提供する代わりに、2つ目が(補助)代替タイトルを与える。Even though both the title and alternative title are marked up with h1 elements, in a rendered view of output from the outline algorithm, the second h1 in the hgroup will be shown in some way that clearly indicates it is secondary; for example:

米国の出版で:

The Avengers (Avengers Assemble)

英国の出版で:

Avengers Assemble (The Avengers)

次の例では、hgroup要素は、ウィザード形式のダイアログボックス内で2つのレベルの見出しをマークアップするために使用される:

<dialog onclose="walletSetup.continue(this.returnValue)">
 <hgroup>
  <h1>Wallet Setup</h1>
  <h2>Configure your Wallet funding source</h2>
 </hgroup>
 <p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
 salesmen you may find in the dungeons, and to pay for mercenaries.</p>
 <p>We support two payment sources:</p>
 <form method=dialog>
  <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
   <legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
   <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
   <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
   <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label>
   <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label>
  </fieldset>
  <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
   <legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend>
   <p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label>
   <p><label>Routing number: <input name=bank2 inputmode=numeric></label>
   <p><label>Account number: <input name=bank3 inputmode=numeric></label>
  </fieldset>
  <button type=submit value="back"> ← Back </button>
  <button type=submit value="next"> Next → </button>
 </form>
</dialog>

4.3.8 header要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしheaderfooter、またはmain要素の子孫をもたない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

header要素は、前置きまたはナビゲーション補助のグループを表す

header要素は通常、セクションの見出し(h1h6要素または hgroup要素)を含むように意図されるが、これは必須ではない。header要素はまた、セクションのコンテンツの目録、検索フォーム、または関連するロゴを包むために使用することができる。

サンプルheaderは以下のとおり。この最初のものは、ゲームのために存在する:

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

次の断片は、要素が仕様のヘッダーをマークアップに対して使用できる様子を示す。

<header>
 <hgroup>
  <h1>Fullscreen API</h1>
  <h2>Living Standard — Last Updated 19 October 2015</h2>
 </hgroup>
 <dl>
  <dt>Participate:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>Commits:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

header要素は、セクショニングコンテンツではない。新しいセクションを導入しない。

この例は、ページがh1要素で与えられたページ見出しと、h2要素によって与えられた2つのサブセクションを持つ。header要素はアウトラインアルゴリズムに参加しないため、header要素の後のコンテンツは、依然としてheader要素で最後に開始したサブセクションの一部である。

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

Spec bugs: 12990

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしheaderfooter、またはmain要素の子孫をもたない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

footer要素は、その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッターを表す。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。

footer要素がセクション全体を含む場合、付録、索引、長い奥付、冗長なライセンス契約などのコンテンツを表す

セクションの著者や編集者に対する連絡先情報は、おそらくfooter内側にそれ自身、address要素に属する。headerfooterの両方に適するだろう署名欄およびその他の情報は、いずれか(またはどちらでもない)に配置できる。これらの要素の主な目的は、著者が維持し、スタイルが容易である自明のマークアップを書くためだけである。これら要素は著者に特定の構造を課すことを意図するものではない。

フッターは必ずしも、セクションの最後に出現する必要はない(通常は最後だが)。

最も近い祖先セクショニングコンテンツまたはセクショニングルート要素がbody要素である場合、これはページ全体に適用される。

footer要素は、セクショニングコンテンツではない。新しいセクションを導入しない。

これは、一番上と一番下に2つのフッターを持つ、同じコンテンツのページである:

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <h2>The ipsum of all lorems</h2>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

これは、サイト全体のフッターとセクションフッターの両方に使用されているfooter要素を示す例である。

<!DOCTYPE HTML>
<HTML LANG="en"><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

一部のサイトのデザインは、時々"分厚いフッター"と呼ばれるものを持つ―フッターは、画像、他の記事へのリンク、フィードバック送信用ページへのリンク、特別オファーなど、いくつかの点で、フッターで全体の"フロントページ"ともいえる大量の素材を含む。

この断片は、"分厚いフッター"をもつサイト上でページの最下部を示す:

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

4.3.10 address要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ、ただしヘディングコンテンツの子孫、セクショニングコンテンツの子孫、およびheaderfooteraddress要素の子孫を除く。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

address要素は、最も近いarticleまたはbody要素の祖先の連絡先情報を表す。祖先がbody要素である場合、連絡先情報は、文書全体に適用される。

たとえば、HTMLに関連するW3Cのウェブサイトにあるページは、以下の連絡先情報を含むかもしれない:

<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>,
 <A href="../People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

アドレスが実際に関連する連絡先情報でない場合、address要素は、任意のアドレス(たとえば郵便の宛先)を表すために使用してはならない。(p要素は、一般に住所をマークアップするための適切な要素である。)

address要素は連絡先情報以外の情報を含んではならない。

たとえば、次の例はaddress要素の不適合な用法である:

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

一般に、address要素は、footer要素で他の情報と一緒に含まれるだろう。

ノードnodeの連絡先情報は、次のリストからの最初に適用可能なエントリーで定義されるaddress要素のコレクションである:

nodearticle要素である場合
nodebody要素である場合

連絡先情報は、先祖としてnodeを持ちかつnodeの子孫である別のbodyまたはarticle要素の祖先を持たないすべてのaddress要素から構成される。

nodearticle要素である祖先要素を持つ場合
nodebody要素である祖先要素を持つ場合

nodeの連絡先情報は、最も近いいずれかの、最も近いarticleまたはbody要素の祖先の連絡先情報と同じである。

nodeノード文書body要素を持つ場合

nodeの連絡先情報は、Documentbody要素の連絡先情報と同じである。

そうでなければ

nodeに対する連絡先情報は存在しない。

ユーザーエージェントは、ユーザーにノードの連絡先情報を公開してもよく、またはそのようなセクションの連絡先情報に基づくインデックスセクションなど、他の目的のために使用してもよい。

この例において、フッターは、連絡先情報および著作権情報を含む。

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.11 見出しとセクション

h1h6要素およびhgroup要素は見出しである。

セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。同等以上のランクに属する後続の見出しは、新しい(暗黙の)セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。どちらの場合も、要素は暗黙のセクションの見出しを表す

blockquote要素とtd要素を含む特定の要素は、セクショニングルートであると言われている。これらの要素は、自分のアウトラインを持つことができるが、要素の内側のセクションと見出しは祖先のアウトラインに寄与しない。

セクショニングコンテンツ要素は、他の見出しが作成する暗黙のセクションであるかに関わらず、最も近い祖先セクショニングルートまたは最も近いセクショニングコンテンツの祖先要素の、最も近い方のサブセクションと常にみなされる。

次の断片の場合:

<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>

構造は次のようになる:

  1. Foo ( "Grunt"段落を含む、明示的なbodyセクションの見出し)
    1. Bar(引用ブロックと"Baz"段落を含む、暗黙のセクションを開始する見出し)
    2. Quux (その見出し自身のみのコンテンツをもつ暗黙のセクションを開始する見出し)
    3. Thud (明示的なsectionセクションの見出し)

後の段落("Grunt")がトップレベルに戻るように、sectionがそれ以前の暗黙のセクションを終了する様子に注目する。

セクションは、任意のランクの見出しを含んでもよいが、著者は、h1要素のみを使用する、またはセクションのネストレベルに対して適切なランクの要素を使用するかのいずれかが強く推奨される。

著者はまた、セクショニングコンテンツの1つの要素に複数の見出しを持つことによって生成される暗黙のセクションに頼る代わりに、セクショニングコンテンツの要素内のセクションを明示的に包むことを推奨される。

たとえば、以下は正しい:

<body>
 <h4>Apples</h4>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

ただし、同じ文書をより明確に表現できるだろう。

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
   <h3>Sweet</h3>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
 </section>
</body>

上記の文書の両方は、セマンティックに同じであり、適合ユーザーエージェントで同じアウトラインを生成する。

この3番目の例はまた、セマンティックに同じであり、(たとえば、セクションが編集で移動される場合)より簡単にメンテナンスできるかもしれない:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
   <h1>Sweet</h1>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

この最後の例は、レガシーブラウザーでレンダリングされるように明示的なスタイル規則が必要になるだろう。CSSのサポートなしでレガシーブラウザーは、トップレベルの見出しとして、すべての見出しをレンダリングするだろう。

4.3.11.1 アウトラインの作成

このセクションは、セクショニングコンテンツ要素またはセクショニングルート要素に対するアウトラインを作成するためのアルゴリズムを定義する。これは、入力される場合かつ歩行中に終了する場合に各ノードが訪問している状態で、ツリー順に、DOMツリーのノード上の歩行に関して定義される。

セクショニングコンテンツ要素またはセクショニングルート要素に対するアウトラインは、1つ以上の潜在的にネストされたセクションのリストで構成される。アウトラインが作成された要素は、アウトラインの所有者であると言われる。

セクションは、元のDOMツリーで一部のノードに対応するコンテナである。各セクションは、セクションに関連付けられた1つの見出しを持つことができ、さらにネストされた任意の数のセクションを含むことができる。アウトラインのためのアルゴリズムはまた、特定のセクションおよび潜在的な見出しをもつDOMツリーにおける各ノードを関連付ける。(アウトラインにおけるセクションは、一部はそのような要素に対応してもよいが、section要素ではない―要素は単に概念的なセクションである。)

次のマークアップ断片で:

<body>
  <hgroup id="document-title">
    <h1>HTML</h1>
    <h2>Living Standard — Last Updated 12 August 2016</h2>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

これはbodyノード(そして、全体の文書)に対して作成されている以下のアウトラインをもたらす:

  1. セクションは、bodyノードに対して作成される。

    Associated with heading <hgroup id="document-title">...</hgroup> consisting of primary heading <h1>HTML</h1> and secondary heading <h2>Living Standard — Last Updated 12 August 2016</h2>.

    Also associated with the paragraph <p>Some intro to the document.</p> (though it likely would not be shown in a rendered view of the outline).

    ネストされたセクション:

    1. セクションは1番目のh2要素を示唆する。

      Associated with heading <h2>Table of contents</h2>.

      Also associated with the ordered list <ol id=toc>...</ol> (though it likely would not be shown in a rendered view of the outline).

      ネストされたセクションはない。

    2. セクションは2番目のh2要素を示唆する。

      Associated with heading <h2>First section</h2>.

      Also associated with the paragraph <p>Some intro to the first section.</p> (though it likely would not be shown in a rendered view of the outline).

      ネストされたセクションはない。

次の画像は、アウトラインのレンダリングされたビューがどのように見えるかを示す。

Top-level section with the
   multi-level heading "HTML: Living Standard — Last Updated 12 August 2016" and two
   subsections; "Table of contents" and "First section".

その要素のアウトラインを決定するためにセクショニングコンテンツ要素またはセクショニングルート要素でルートとするDOMサブツリーの散歩中に従わなければならないアルゴリズムは次のとおりである:

  1. current outline targetをnullにする。(これは、アウトラインが作成されている要素を保持する。)

  2. current sectionをnullにする。(DOMにおける要素はセクションにすべて関連付けすることができるように、セクションへのポインターを保持する。)

  3. ネストを​処理するために使用される、要素を保持するためのスタックを作成する。このスタックを空に初期化する。

  4. アウトラインが作成されるためのサブツリーのルートでセクショニングコンテンツ要素またはセクショニングルート要素で始まる、ツリー順でDOM上を歩き、散歩が入って出るときに、各要素に対して以下の最初の関連する手順をトリガーする。

    その要素がスタックの最上位の要素である場合、要素を終了する際

    終了しようとする要素は、ヘディングコンテンツ要素またはhidden属性をもつ要素である。

    スタックからその要素をポップする。

    スタックの最上位がヘディングコンテンツ要素またはhidden属性をもつ要素である場合

    Do nothing.

    hidden属性をもつ要素を入力する場合

    スタックに入力されている要素をプッシュする。(これは、要素と要素のいずれかの子孫をスキップするためのアルゴリズムをもたらす。)

    セクショニングコンテンツ要素を入力する場合

    次の手順を実行する:

    1. If current outline target is not null, then:

      1. current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

      2. スタックにcurrent outline targetをプッシュする。

    2. current outline targetを入力されている要素にする。

    3. current sectioncurrent outline target要素に対する新たに作成されるセクションとする。

    4. current outline targetcurrent sectionに関連付ける。

    5. アウトラインにおける唯一のセクションとしてちょうど新しいcurrent sectionで初期化される、新しいcurrent outline targetのための新しいアウトラインとする。

    スタックが空でない場合、セクショニングコンテンツ要素を終了する際

    次の手順を実行する:

    1. current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

    2. スタックから先頭要素をポップし、current outline targetをその要素とする。

    3. current sectioncurrent outline target要素のアウトラインにおける最後のセクションとする。

    4. current sectionに終了しようとしているセクショニングコンテンツ要素のアウトラインを追加する。(これは、アウトラインにおける最後のセクションであるセクションを変更しない。)

    セクショニングルート要素を入力する場合

    次の手順を実行する:

    1. current outline targetがnullでない場合、スタックにcurrent outline targetをプッシュする。

    2. current outline targetを入力されている要素にする。

    3. current outline target親セクションcurrent sectionとする。

    4. current sectioncurrent outline target要素に対する新たに作成されるセクションとする。

    5. アウトラインにおける唯一のセクションとしてちょうど新しいcurrent sectionで初期化される、新しいcurrent outline targetのための新しいアウトラインとする。

    スタックが空でない場合、セクショニングルート要素を終了する際

    次の手順を実行する:

    1. current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

    2. current sectioncurrent outline target親セクションにする。

    3. スタックから先頭要素をポップし、current outline targetをその要素とする。

    セクショニングコンテンツ要素またはセクショニングルート要素を終了する場合(スタックが空である場合)

    current outline targetは終了している要素であり、かつアウトラインが生成されているサブツリーのルートでセクショニングコンテンツ要素またはセクショニングルート要素である。

    current sectionが見出しを持たない場合、暗黙の見出しを作成してcurrent sectionの見出しにする。

    手順の全体的なセットで次の手順にスキップする。(散歩は終わった。)

    ヘディングコンテンツ要素を入力する場合

    current sectionが見出しを持たない場合、入力されている要素をcurrent sectionの見出しとする。

    If the element being entered is an hgroup element, that hgroup as a whole is a multi-level heading for the current section, with the highest-ranked h1h6 descendant of the hgroup providing the primary heading for the current section, and with other h1h6 descendants of the hgroup providing secondary headings for the current section.

    そうでなければ、入力されている要素がcurrent outline targetアウトラインの最後のセクションの見出し以上のランクを持つ場合、またはcurrent outline targetアウトラインの最後のセクションの見出しが暗黙の見出しである場合、この新しいセクションがそのアウトラインの新しい最後のセクションであるように、新しいセクションを作成して、current outline target要素のアウトラインに追加する。current sectionを新しいセクションとする。入力されている要素をcurrent sectionのための新しい見出しとする。

    そうでなければ、以下のサブ手順を実行する:

    1. candidate sectioncurrent sectionにする。

    2. Heading loop:入力されている要素がcandidate sectionの見出しのランクよりも低いランクを持つ場合、新しいセクションを作成し、candidate sectionに追加する。(これは、アウトラインにおいて最後のセクションであるセクションを変更しない。)current sectionをこの新しいセクションとする。入力されている要素をcurrent sectionのための新しい見出しとする。次のサブ手順を中止する。

    3. new candidate sectioncurrent outline targetアウトラインにおけるcandidate sectionを含むセクションとする。

    4. candidate sectionnew candidate sectionとする。

    5. heading loopにラベル付けされる手順に戻る。

    スタックに入力されている要素をプッシュする。(これは、要素のいずれかの子孫をスキップするためのアルゴリズムをもたらす。)

    h1最高ランクを持ち、h6が最低ランクを持つということを思い出す。

    そうでなければ

    Do nothing.

    さらに、歩行がノードを終了するたびに、上記の手順を行った後、ノードがまだセクションに関連付けられない場合、セクションcurrent sectionにノードを関連付ける。

  5. アウトラインがその親要素が関連付けられているセクションで作成されているサブツリー内にあるすべての非要素ノードを関連付ける。

  6. もしあれば、ノードが関連付けられるセクションの見出しとサブツリーにおけるすべてのノードを関連付ける。

上記のアルゴリズムによって作成されるセクションのツリー、または適切なサブセットは、文書のアウトラインを生成する際に、たとえばコンテンツのテーブルを生成する際に、使用されなければならない。

Documentbody要素に対して作成されるアウトラインは、文書全体のアウトラインである。

コンテンツのインタラクティブなテーブルを作成する際、セクションが元の文書における実際の要素に対して作成された場合、エントリーは関連するセクショニングコンテンツ要素にユーザーをジャンプすべきであり、またはツリー内のセクションが上記プロセスにおける見出しに対して生成された場合、関連するヘディングコンテンツ要素にジャンプすべきである。

したがって、文書の最初のセクションを選択することは常に、bodyにおける最初の見出しが発見される場合に関係なく、ユーザーを文書の先頭に持っていく。

セクションsectionに関連付けられるヘディングコンテンツ要素のアウトライン深さは、1を足す、Documentの要素のアウトラインが作成される際にsectionが自分自身を見つける最も外側のアウトラインにおけるsectionの祖先であるセクションの数である。セクションに関連付けられるヘディングコンテンツ要素のアウトライン深さは1である。

ユーザーエージェントは、明示的なセクションの見出しを持たないセクションに対するデフォルトの見出しを提供すべきである。

次の断片を考えてみる:

<body>
 <nav>
  <p><a href="/">Home</a></p>
 </nav>
 <p>Hello world.</p>
 <aside>
  <p>My cat is cute.</p>
 </aside>
</body>

見出しを含まないが、このスニペットは3つのセクションを持つ:文書(body)と2つのサブセクション(navおよびaside)。次のようにユーザーエージェントはアウトラインを提示することができる:

  1. Untitled document
    1. Navigation
    2. Sidebar

このデフォルトの見出し("Untitled document"、"Navigation"、"Sidebar")はこの仕様で規定されず、ユーザーの言語、ページの言語、ユーザーの好み、ユーザーエージェント実装者の好みなどによって異なるかもしれない。

次のJavaScript関数は、どのようにツリーウォークが実装されることができるかを示す。root引数は(セクショニングコンテンツ要素またはセクショニングルート要素のいずれかを)歩くためのツリーのルートであり、enterおよびexit引数は、開始および終了されるようにノードと呼ばれているコールバックである。[JAVASCRIPT]

function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node == root) {
        node = null;
      } else if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      } else {
        node = node.parentNode;
      }
    }
  }
}
4.3.11.2 サンプルアウトライン

この節は非規範的である。

以下の文書は、アウトラインアルゴリズムの簡単なアプリケーションを示す。最初に、非常に短い章とサブセクションをもつ本の文書を以下に示す:

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

この本は、以下のアウトラインを形成する:

  1. The Tax Book
    1. Earning money
      1. Getting a job
    2. Spending money
      1. Cheap things
      2. Expensive things
    3. Investing money
    4. Losing money
      1. Poor judgement

title要素はアウトラインに関係しないことに注意する。

これは類似の文書があるが、今回は同じ効果を得るためにsection要素を使用している:

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<section>
 <h1>Earning money</h1>
 <p>Earning money is good.</p>
 <section>
  <h1>Getting a job</h1>
  <p>To earn money you typically need a job.</p>
 </section>
</section>
<section>
 <h1>Spending money</h1>
 <p>Spending is what money is mainly used for.</p>
 <section>
  <h1>Cheap things</h1>
  <p>Buying cheap things often not cost-effective.</p>
 </section>
 <section>
  <h1>Expensive things</h1>
  <p>The most expensive thing is often not the most cost-effective either.</p>
 </section>
</section>
<section>
 <h1>Investing money</h1>
 <p>You can lend your money to other people.</p>
</section>
<section>
 <h1>Losing money</h1>
 <p>If you spend money or invest money, sooner or later you will lose money.
 <section>
  <h1>Poor judgement</h1>
  <p>Usually if you lose money it's because you made a mistake.</p>
 </section>
</section>

この本は、同じアウトラインを形成する:

  1. The Tax Book
    1. Earning money
      1. Getting a job
    2. Spending money
      1. Cheap things
      2. Expensive things
    3. Investing money
    4. Losing money
      1. Poor judgement

文書は、複数のトップレベルの見出しを含めることができる:

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

これは3つのトップレベルのセクションから構成される次のような単純なアウトラインを形成する:

  1. Apples
  2. Bananas
  3. Carambola

事実上、body要素は3つに分割される。

h1h6モデルとsection/h1モデルの両方を混合することは、直感的でない結果をもたらすかもしれない。

正確な前の例だがsectionに包まれた(暗黙の)bodyのコンテンツをもつ、以下の例を考慮してみる:

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h1>Apples</h1>
 <p>Pomaceous.</p>
 <h1>Bananas</h1>
 <p>Edible.</p>
 <h1>Carambola</h1>
 <p>Star.</p>
</section>

アウトラインの結果は次のようになる:

  1. (untitled page)
    1. Apples
    2. Bananas
    3. Carambola

1つのsection要素のみがあるにもかかわらず3つのサブセクションが生じるため、この結果は直感的でないものとして記載される。事実上、直前の例で暗黙のbody要素と同様に、sectionは3つに分かれる。

(この例において、明示的な見出しを持たないため、"(untitled page)"は、body要素に対して暗黙的に指定される。)

見出しは、他のセクションを超えてくることはない。したがって、次の例において、最初のh1は、実際にページヘッダーを記述するのではなく、ページの後半のヘッダーについて説明する。

<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
<section>
 <h1>A plea from our caretakers</h1>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
</section>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

アウトラインの結果は次のようになる:

  1. (untitled page)
    1. A plea from our caretakers
  2. Feathers

このように、article要素がnavブロックで始まりかつ単に後でその見出しを持つ場合、結果はnavブロックがアウトラインで残りのarticle部分と同じセクションの一部ではないものである。たとえば、次の文書を取る:

<!DOCTYPE HTML>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav>
  <h1>We're adopting a child!</h1>
 </header>
 <main>
  <p>As of today, Janine and I have signed the papers to become
  the proud parents of baby Diane! We've been looking forward to
  this day for weeks.</p>
 </main>
</article>
</html>

アウトラインの結果は次のようになる:

  1. Ray's blog
    1. Untitled article
      1. Untitled navigation section
    2. We're adopting a child!

また、この例において、headermain要素が文書のアウトラインに何ら影響を与えないことは注目に値する。

hgroup要素は副見出しに対して使用することができる。たとえば:

<!DOCTYPE HTML>
<html lang="en">
<title>Chronotype: CS Student</title>
<hgroup>
 <h1> The morning </h1>
 <h2> 06:00 to 12:00 </h2>
</hgroup>
<p>We sleep.</p>
<hgroup>
 <h1> The afternoon </h1>
 <h2> 12:00 to 18:00 </h2>
</hgroup>
<p>We study.</p>
<hgroup>
 <h2>Additional Commentary</h2>
 <h3>Because not all this is necessarily true</h3>
 <h6>Ok it's almost certainly not true</h6>
</hgroup>
<p>Yeah we probably play, rather than study.</p>
<hgroup>
 <h1> The evening </h1>
 <h2> 18:00 to 00:00 </h2>
</hgroup>
<p>We play.</p>
<hgroup>
 <h1> The night </h1>
 <h2> 00:00 to 06:00 </h2>
</hgroup>
<p>We play some more.</p>
</html>

アウトラインの結果は次のようになる:

  1. The morning 06:00 to 12:00
  2. The afternoon 12:00 to 18:00
    1. Additional Commentary Because not all this is necessarily true Ok it's almost certainly not true
  3. The evening 18:00 to 00:00
  4. The night 00:00 to 06:00

ほとんどのインターフェイスの問題として、正確にこれはユーザーエージェントによって表される方法は、実装上の好みの問題として残されるが、重要な部分はhgroupの子孫h1h6要素が、要素の見出し由来のものであるということである。したがって、次は同様に妥当になる:

  1. The morning — 06:00 to 12:00
  2. The afternoon — 12:00 to 18:00
    1. Additional Commentary — Because not all this is necessarily true — Ok it's almost certainly not true
  3. The evening — 18:00 to 00:00
  4. The night — 00:00 to 06:00

しかし、次のようになる:

  1. The morning
  2. The afternoon
    1. Additional Commentary
  3. The evening
  4. The night

次はまた、ほとんどのコンテキストであまり実用的ではないが、妥当である:

  1. The morning

    06:00 to 12:00

  2. The afternoon

    12:00 to 18:00

    1. Additional Commentary

      Because not all this is necessarily true

      Ok it's almost certainly not true

  3. The evening

    18:00 to 00:00

  4. The night

    00:00 to 06:00

4.3.11.3 ユーザーにアウトラインを公開する

ユーザーエージェントは、ユーザーにナビゲーションを支援するためにするためにページのアウトラインを公開することを勧める。これは、スクリーンリーダーなどの非視覚的なメディアに対して特に当てはまる。

しかし、セクショニングコンテンツを誤用する著者から生じる困難を緩和するために、ユーザーエージェントは、単独でヘディングコンテンツを使用してページをナビゲートするモードを提供することも勧める。

たとえば、ユーザーエージェントは、次のように矢印キーを対応付けることができる:

Shift+← Left
前のセクションのサブセクションを含め、前のセクションに移動する
Shift+→ Right
現在のセクションのサブセクションを含め、次のセクションに移動する
Shift+↑ Up
現在のセクションの親セクションに移動する
Shift+↓ Down
現在のセクションのサブセクションを飛ばして、次のセクションに移動する

さらに加えて、ユーザーエージェントは、セクションのアウトラインの深さにかかわらずかつ見出しなしのセクションを無視して、ヘディングコンテンツの前または次の要素にナビゲートするjおよびkキーを対応付けることができる。

4.3.12 使用方法の概要

この節は非規範的である。

要素 目的
body 文書の主要コンテンツ。
<!DOCTYPE HTML>
<html lang="en">
 <head> <title>Steve Hill's Home Page</title> </head>
 <body> <p>Hard Trance is My Life.</p> </body>
</html>
article 文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結したもの。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、インタラクティブなウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。
<article>
 <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
 <p>My fave Masif tee so far!</p>
 <footer>Posted 2 days ago</footer>
</article>
<article>
 <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
 <p>Happy 2nd birthday Masif Saturdays!!!</p>
 <footer>Posted 3 weeks ago</footer>
</article>
section 文書またはアプリケーションの一般的セクション。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。
<h1>Biography</h1>
<section>
 <h1>The facts</h1>
 <p>1500+ shows, 14+ countries</p>
</section>
<section>
 <h1>2010/2011 figures per year</h1>
 <p>100+ shows, 8+ countries</p>
</section>
nav 他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部。
<nav>
 <p><a href="/">Home</a>
 <p><a href="/biog.html">Bio</a>
 <p><a href="/discog.html">Discog</a>
</nav>
aside aside要素の周りにコンテンツとわずかに関連し、かつそのコンテンツから分離すると見なすことができるコンテンツで構成されるページのセクション。このようなセクションは、しばしば活版印刷でサイドバーとして表示される。
<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>
h1h6 セクションの見出し
<h1>The Guide To Music On The Playa</h1>
<h2>The Main Stage</h2>
<p>If you want to play on a stage, you should bring one.</p>
<h2>Amplified Music</h2>
<p>Amplifiers up to 300W or 90dB are welcome.</p>
hgroup hgroup要素のすべてのh1h6の子要素で構成する、セクションの見出し。小見出し、代替タイトル、またはキャッチフレーズのような、要素が複数のレベルを持つ場合、見出しは、h1h6要素のグループセットを使用する。
<hgroup>
 <h1>Burning Music</h1>
 <h2>The Guide To Music On The Playa</h2>
</hgroup>
<section>
 <hgroup>
  <h1>Main Stage</h1>
  <h2>The Fiction Of A Music Festival</h2>
 </hgroup>
 <p>If you want to play on a stage, you should bring one.</p>
</section>
<section>
 <hgroup>
  <h1>Loudness!</h1>
  <h2>Questions About Amplified Music</h2>
 </hgroup>
 <p>Amplifiers up to 300W or 90dB are welcome.</p>
</section>
header 前置きまたはナビゲーション補助のグループ。
<article>
 <header>
  <h1>Hard Trance is My Life</h1>
  <p>By DJ Steve Hill and Technikal</p>
 </header>
 <p>The album with the amusing punctuation has red artwork.</p>
</article>
footer その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッター。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。
<article>
 <h1>Hard Trance is My Life</h1>
 <p>The album with the amusing punctuation has red artwork.</p>
 <footer>
  <p>Artists: DJ Steve Hill and Technikal</p>
 </footer>
</article>
4.3.12.1 Articleかsectionか?

この節は非規範的である。

sectionは、何か別のものの一部を形成する。articleは自分自身である。しかし、どっちがどっちか分かるだろうか?たいてい真の答えは"著者の意図に依存する"である。

たとえば、"これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる"とだけ述べた"グラニースミス"の章のある本を想像してみよう。(多分)他のリンゴの種類の章が多数あるため、これはsectionだろう。

一方で、つぶやきやredditのコメント、Tumblrのポストや単に広告に分類される新聞を想像してみよう。"グラニースミス。これはみずみずしく、青リンゴはアップルパイの素晴らしいフィリングになる。"全部があったので、articleだろう。

記事におけるコメントはコメントされているarticleの一部ではなく、したがってarticle自身である。

4.4 グルーピングコンテンツ

4.4.1 p要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
p要素がaddressarticleasideblockquotedetailsdivdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrmainmenunavolppresectiontableul要素の直後に存在する場合、または親要素で追加のコンテンツが存在せずかつ親要素がaaudiodelinsmapnoscriptvideo要素、または自律カスタム要素でないHTML要素である場合、p要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLParagraphElement : HTMLElement {};

p要素は段落表す

段落は通常、空白行を介して隣接するブロックから物理的に分離されるテキストのブロックによって視覚メディアで表現される一方で、スタイルシートまたはユーザーエージェントは、異なる方法で段落の区切りを提示することを同様に正当化するだろう。例としてインライン段落記号(¶)の使用が挙げられる。

次の例は、適合HTML断片である:

<p>The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.</p>
<fieldset>
 <legend>Personal information</legend>
 <p>
   <label>Name: <input name="n"></label>
   <label><input name="anon" type="checkbox"> Hide from other users</label>
 </p>
 <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>
<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

より具体的な要素がより適切である場合、p要素を使用すべきでない。

次の例は、技術的に正しい:

<section>
 <!-- ... -->
 <p>Last modified: 2001-04-23</p>
 <p>Author: fred@example.com</p>
</section>

しかし、より望ましいマークアップは次のようになる:

<section>
 <!-- ... -->
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: fred@example.com</address>
</section>

または:

<section>
 <!-- ... -->
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
 </footer>
</section>

リスト要素(具体的にはolul要素)は、p要素の子になることはできない。したがって、文書が箇条書きのリストを含む場合、これをどのようにマークアップすべきか疑問に思う人がいるかもしれない。

For instance, this fantastic sentence has bullets relating to

and is further discussed below.

その解決法は、HTML用語において段落を理解することである。これは論理的な概念でなく、構造上の概念である。上記の幻想的な例において、この仕様によって定義された、リストの前に1つ、各中黒に対するもの、そしてリストの後に1つの、5つの段落が実際に存在する。

したがって、上記の例のマークアップは、次のようになる:

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

複数の"構造"段落からなる"論理"段落のような便宜的にスタイル付けを望む著者は、p要素の代わりにdiv要素を使うことができる。

したがって、たとえば上記の例は次のようになるかもしれない:

<div>For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
and is further discussed below.</div>

この例は、依然として5つの段落構造を持つが、今では著者は、個々に例の各部分を考慮する代わりに、divのみでスタイル付けできる。

4.4.2 hr要素

カテゴリー
フローコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLHRElement : HTMLElement {};

hr要素は、たとえば、物語の場面変化や、参考書のセクション内で別の話題に移行するなど、段落レベルのテーマの区切りを表す

プロジェクトマニュアルからの以下における架空の引用は、セクション内でトピックを分離するためにhr要素を使用する2つのセクションを示す。

<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>

section要素とh1要素はテーマの変更を意味するため、セクション間のhr要素は必要ない。

ピーター・F・ハミルトン作のPandora's Starからの以下の抜粋は、シーンの変化の前にある2つの段落とそれに続く段落を示す。第2段落と第3段落との間の1つの中央にある星を含むギャップによって書籍で表現されるシーンの変化は、ここにhr要素を使用することで表される。

<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>

hr要素は、文書のアウトラインに影響を与えない。

4.4.3 pre要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLPreElement : HTMLElement {};

pre要素は、構造が要素によってではなく印刷規則によって表される、整形済みテキストのブロックを表す

HTML構文において、pre要素の開始タグの直後にある冒頭の改行文字は取り除かれる。

pre要素を使用できるケースの一部の例:

著者は、音声合成装置、点字ディスプレイなどのユーザーの場合に、書式設定が失われた際に整形済みテキストを体験する方法を検討することが推奨される。アスキーアートのような場合、たとえばテキスト記述などの代替プレゼンテーションは、文書の読者にとって、より普遍的にアクセスできるようになるだろう。

コンピューターコードのブロックを表すために、pre要素は、code要素とともに使用できる。コンピューター出力のブロックを表すために、pre要素は、samp要素とともに使用できる。同様に、kbd要素は、ユーザーが入力するテキストを示すために、pre要素内で使用できる。

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ

次の断片において、コンピューターコードのサンプルが提示される。

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

次の断片において、sampkbd要素は、『ゾークⅠ』のセッションを表示するために、pre要素のコンテンツで混合される。

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>

以下は、詩自体の本質的な部分を形成する、その独特な書式設定を保持するためにpre要素を使用する、現代的な詩を示す。

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

4.4.4 blockquote要素

カテゴリー
フローコンテンツ
セクショニングルート
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
DOMインターフェイス
[HTMLConstructor]
interface HTMLQuoteElement : HTMLElement {
  [CEReactions] attribute USVString cite;
};

HTMLQuoteElementインターフェイスはまた、q要素によっても使用される。

blockquote要素は別のソースから引用されているセクションを表す

blockquote要素内のコンテンツは、別のソースから引用されなければならず、そのアドレスがある場合、cite属性で引用してもよい。

cite属性が存在する場合、潜在的にスペースで囲まれた妥当なURLでなければならない。対応する引用リンクを取得するために、属性値は、要素のノード文書に対して解析されなければならない。ユーザーエージェントは、ユーザーがそのような引用のリンクをたどることを可能にしてもよいが、これは主に読者のためでなく、(たとえば引用のサイトの使用に関する統計を収集するサーバーサイドスクリプトによってなど)私的使用のために意図される。

blockquote要素のコンテンツは短縮されてもよく、またテキストの言語に対する従来の方法でコンテキストを追加していてもよい。

たとえば、英語においてこれは、伝統的に角括弧を使用して行われる。"Jane ate the cracker. He then said he liked apples and fish."という文をもつページを考えてみよう。これは次のように引用されるかもしれない:

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>

引用に対する帰属は、もしあれば、blockquote要素の外側に配置しなければならない。

たとえば、帰属が引用のあとに段落で与えられる:

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
</blockquote>
<p>— Stephen Roberts</p>

以下の例は、帰属を示す他の方法を示す。

cite IDL属性は、要素のciteコンテンツ属性を反映しなければならない。

これは、blockquote要素は、その属性(これは引用の一部ではなく、したがってblockquote要素自身の内部に属さない)への引用を明確に関連付けるfigure要素とそのfigcaptionと組み合わせて使用される:

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

次の例は、blockquoteと同時にciteの使用方法を示す:

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

この例は、フォーラムの投稿で、どの投稿がユーザーが返信しているものかを表示するためにblockquoteを使用する様子を示す。article要素は、スレッドをマークアップするために各投稿に対して使用される。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

この例は、blockquote要素の内部にp要素を使用する必要がないことを説明する、短い断片に対するblockquote要素の用法を示す。

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

会話を表現する方法の例は、後の節で示される。この目的でciteblockquote要素を使用することは適切でない。

4.4.5 ol要素

カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
reversed — リストの逆順の数
start — リストの開始値
type — リストマーカーの種類
DOMインターフェイス
[HTMLConstructor]
interface HTMLOListElement : HTMLElement {
  [CEReactions] attribute boolean reversed;
  [CEReactions] attribute long start;
  [CEReactions] attribute DOMString type;
};

ol要素は、順序を変更することが文書の意味を変更するような、意図的に順序づけられた項目のリストを表す

リストの項目は、ツリー順ol要素のli要素の子ノードである。

reversed属性は、真偽属性である。存在する場合、リストが降順リストであることを示す(..., 3, 2, 1)。属性が省略される場合、リストは昇順リストである(1, 2, 3, ...)。

Support: ol-reversedChrome for Android 57+Chrome 20+UC Browser for Android 11.4+iOS Safari 6.0+Firefox 18+IE NoneSamsung Internet 4+Opera Mini all+Android Browser 4.4+Edge NoneSafari 6.1+Opera 12.1+

Source: caniuse.com

存在する場合、start属性は、妥当な整数でなければならない。これはリストの 開始値を決定するために使用される。

An ol element has a starting value, which is an integer determined as follows:

  1. If the ol element has a start attribute, then:

    1. Let parsed be the result of parsing the value of the attribute as an integer.

    2. If parsed is not an error, then return parsed.

  2. If the ol element has a reversed attribute, then return the number of owned li elements.

  3. Return 1.

type属性は、重要な場合(たとえば、項目が数字または文字によって参照されることがあるためなど)、リストで使用するマーカーの種類を指定するために使用できる。属性を指定する場合、属性は、次表のいずれかの行にある最初のセルに与えられた文字のいずれかに大文字・小文字区別で一致する値を持たなければならない。type属性は、最初のセルが属性の値とマッチする行の2列目のセルで指定される状態を表す。どのセルもマッチしない場合、または属性が省略される場合、その属性はdecimal状態を表す。

キーワード 状態 説明 値1-3および3999-4001に対する例
1 (U+0031) decimal 10進数 1. 2. 3. ... 3999. 4000. 4001. ...
a (U+0061) lower-alpha 小文字のアルファベット a. b. c. ... ewu. ewv. eww. ...
A (U+0041) upper-alpha 大文字のアルファベット A. B. C. ... EWU. EWV. EWW. ...
i (U+0069) lower-roman 小文字のローマ数字 i. ii. iii. ... mmmcmxcix. i̅v̅. i̅v̅i. ...
I (U+0049) upper-roman 大文字のローマ数字 I. II. III. ... MMMCMXCIX. I̅V̅. I̅V̅I. ...

ユーザーエージェントは、ol要素のtype属性の状態と一致する方法で、リストの項目をレンダリングすべきである。0以下の数字は、type属性に関係なく10進法を常に使用すべきである。

CSSユーザーエージェントの場合、'list-style-type' CSSプロパティにこの属性のマッピングは、レンダリング節に記載される(マッピングは簡単である。状態は、上記のその対応するCSSの値と同じ名前を持つ)。

これは、CSSユーザーエージェントにおけるこの属性を実装するために使用されるデフォルトCSSリストスタイルを定義することを可能にする。そうすることは、リスト項目がレンダリングされる方法に影響を与える。

The reversed and type IDL attributes must reflect the respective content attributes of the same name.

The start IDL attribute must reflect the content attribute of the same name, with a default value of 1.

This means that the start IDL attribute does not necessarily match the list's starting value, in cases where the start content attribute is omitted and the reversed content attribute is specified.

次のマークアップは、順序が重要である所でリストを示しており、したがって、ol要素は適切である。ul要素を使用する同じ項目の例を見るにはulセクションで同等のリストとこのリストを比較する。

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>

リストの順序を変更すると、どのように文書の意味が変化するかに注意する。次の例は、最初の2つの項目にある相対順序を変更することで、著者の故郷を変更している:

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>United Kingdom
 <li>Switzerland
 <li>United States
 <li>Norway
</ol>

4.4.6 ul要素

カテゴリー
フローコンテンツ
要素の子が少なくとも1つのli要素を含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
0個以上のli要素およびスクリプトサポート要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLUListElement : HTMLElement {};

ul要素は、項目の順序が重要でない―順序を変更しても、文書の意味を実質的に変えないだろう、項目のリストを表す

リストの項目は、ul要素のli要素の子ノードである。

次のマークアップは、順序が重要でないリストを示しており、したがって、ul要素は適切である。ol要素を使用する同じ項目の例を見るにはolセクションで同等のリストとこのリストを比較する。

<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>

リストの順序を変更することが、文書の意味を変更しないことに注意する。上記の断片内の項目はアルファベット順に記載されるが、下記の断片において、文書の意味を変えることなく、2007年における経常収支の大きさの順に与えられる:

<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>

4.4.7 li要素

カテゴリー
なし。
この要素を使用できるコンテキスト
ol要素の内側。
ul要素の内側。
type属性がツールバー状態であるmenu要素の内部。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
li要素が別のli要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、li要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
要素がulまたはmenu要素の子でない場合:value — リスト項目の順序値
DOMインターフェイス
[HTMLConstructor]
interface HTMLLIElement : HTMLElement {
  [CEReactions] attribute long value;
};

li要素は、リスト項目を表す。親要素がolul、またはmenu要素の場合、要素は、それらの要素に対して定義されるような、親要素のリスト項目である。そうでなければ、リスト項目は、他のli要素にリスト関連の関係を定義されていない。

存在する場合、value属性は、妥当な整数でなければならない。It is used to determine the ordinal value of the list item, when the li's list owner is an ol element.


Any element whose computed value of 'display' is 'list-item' has a list owner, which is determined as follows:

  1. If the element is not being rendered, return null; the element has no list owner.

  2. Let ancestor be the element's parent.

  3. If the element has an ol, ul, or menu ancestor, set ancestor to the closest such ancestor element.

  4. Return the closest inclusive ancestor of ancestor that produces a CSS box.

    Such an element will always exist, as at the very least the document element will always produce a CSS box.

To determine the ordinal value of each element owned by a given list owner owner, perform the following steps:

  1. Let i be 1.

  2. If owner is an ol element, let numbering be owner's starting value. Otherwise, let numbering be 1.

  3. Loop: If i is greater than the number of list items that owner owns, then abort this algorithm; all of owner's owned list items have been assigned ordinal values.

  4. Let item be the ith of owner's owned list items, in tree order.

  5. If item is an li element that has a value attribute, then:

    1. Let parsed be the result of parsing the value of the attribute as an integer.

    2. If parsed is not an error, then set numbering to parsed.

  6. The ordinal value of item is numbering.

  7. If owner is an ol element, and owner has a reversed attribute, decrement numbering by 1; otherwise, increment numbering by 1.

  8. Increment i by 1.

  9. Go to the step labeled loop.


value IDL属性は、valueコンテンツ属性の値を反映しなければならない。

The element's value IDL attribute does not directly correspond to its ordinal value; it simply reflects the content attribute. For example, given this list:

<ol>
 <li>Item 1
 <li value="3">Item 3
 <li>Item 4
</ol>

The ordinal values are 1, 3, and 4, whereas the value IDL attributes return 0, 3, 0 on getting.

次の例は、トップ10の映画が(逆順で)記載される。リストがfigure要素とfigcaption要素を使用して、タイトルを与えられる様子に注意する。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

マークアップはまた、ol要素にreversed属性を使用して、次のように記述できる:

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

li要素の内側の見出し要素(たとえばh1)を含むことは適合するが、それはおそらく著者が意図したセマンティックスを伝えることはない。見出しは新しいセクションを開始し、リストの見出しが暗黙的に複数のセクションにまたがるようにリストを分割する。

4.4.8 dl要素

カテゴリー
フローコンテンツ
要素の子が少なくとも1つの名前-値グループを含む場合:パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
それぞれ1つ以上のdt要素の後に来る1つ以上のdd要素からなり、任意でスクリプトサポート要素と混合される0個以上のグループ。
または:オプションでスクリプトサポート要素と混合される、1つ以上のdiv要素。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLDListElement : HTMLElement {};

dl要素は、0個以上の名前-値グループ(記述リスト)から成る連想リストを表す。名前-値グループは、dtおよびdd要素の子、ならびにdiv要素の子であるdtおよびdd要素以外のすべてのノードを拒否し、1つ以上の名前(dt要素、場合によりdiv要素の子として)に続き1つ以上の値((dd要素、場合によりdiv要素の子として)で構成されなければならない。単一のdl要素内で、それぞれの名前に対して複数のdt要素が存在すべきでない。

名前-値グループは、用語とその定義、メタデータの見出しや値、質問と回答、または名前-値のデータのグループであってもよい。

グループ内の値は、代替手段である。同じ値の一部を形成する複数の段落がすべて同じdd要素内に指定されなければならない。

グループ、および各グループ内の名前と値のリストの順序は、意味があってもよい。

Microdata属性、またはグループ全体に適用される他のグローバル属性または単にスタイル目的でグループに注釈付するために、dl内の各グループは、div要素で包むことができる。これは、dl要素のセマンティクスを変更しない。

The name-value groups of a dl element dl are determined using the following algorithm. A name-value group has a name (a list of dt elements, initially empty) and a value (a list of dd elements, initially empty).

  1. Let groups be an empty list of name-value groups.

  2. Let current be a new name-value group.

  3. Let seenDd be false.

  4. Let child be dl's first child.

  5. Let grandchild be null.

  6. While child is not null:

    1. If child is a div element, then:

      1. Let grandchild be child's first child.

      2. While grandchild is not null:

        1. Process dt or dd for grandchild.

        2. Set grandchild to grandchild's next sibling.

    2. Otherwise, process dt or dd for child.

    3. Set child to child's next sibling.

  7. If current is not empty, then append current to groups.

  8. Return groups.

To process dt or dd for a node node means to follow these steps:

  1. Let groups, current, and seenDd be the same variables as those of the same name in the algorithm that invoked these steps.

  2. If node is a dt element, then:

    1. If seenDd is true, then append current to groups, set current to a new name-value group, and set seenDd to false.

    2. Append node to current's name.

  3. Otherwise, if node is a dd element, then append node to current's value and set seenDd to true.

名前-値グループが名前または値として空のリストを持つ場合、多くの場合dt要素の代わりにdd要素を、またはその逆を誤って使用する原因となる。適合性チェッカーは、そのような間違いを見つけることができ、マークアップを正しく使用する方法を著者に助言することができるかもしれない。

次の例は、1つのエントリー("Authors")が、2つの値("John"と"Luke")にリンクされる。

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

次の例は、1つの定義が2つの用語にリンクされる。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

次の例は、ある種のメタデータをマークアップするdl要素の使用例を示す。例の最後で、1つのグループは、2つのメタデータラベル("Authors"と"Editors")と2つの値("Robert Rothman"と"Daniel Jackson")を持つ。この例はまた、スタイリングを支援するために、dtdd要素のグループの周囲にdiv要素を使う。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

次の例は、一連の命令を与えるために使われるdl要素を示す。ここで、命令の順序が重要である(他の例において、ブロックの順序は重要ではなかった)。

<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
 <dt> If you have exactly five gold coins </dt>
 <dd> You get five victory points </dd>
 <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
 <dd> You get two victory points </dd>
 <dt> If you have one or more silver coins </dt>
 <dd> You get one victory point </dd>
 <dt> Otherwise </dt>
 <dd> You get no victory points </dd>
</dl>

次の断片は、用語集として使用されるdl要素を示す。定義されている単語を示すためのdfnの使用に注意する。

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

この例は、フレンチレストランでアイスクリームデザートを注釈付けするために、div要素と共に、dl要素でmicrodata属性を使用する。

<dl>
 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Café ou Chocolat Liégeois
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
 </div>

 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Américaine
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
 </div>
</dl>

div要素のないマークアップは、次のように、項目をもつdd要素内のデータをリンクするためにitemref属性を使用する必要がある。

<dl>
 <dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
  <span itemprop="name">Café ou Chocolat Liégeois</span>
 <dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="1-description" itemprop="description">
  2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly

 <dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
  <span itemprop="name">Américaine</span>
 <dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="2-description" itemprop="description">
  1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
</dl>

dl要素は、会話をマークアップするのに不適切である。See some examples of how to mark up dialogue.

4.4.9 dt要素

カテゴリー
なし。
この要素を使用できるコンテキスト
dl要素の内部でddまたはdt要素の前。
dl要素の子であるdiv要素内のddまたはdt要素の前。
コンテンツモデル
フローコンテンツ、ただしheaderfooterセクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。
text/htmlにおけるタグ省略
dt要素が別のdt要素またはdd要素の直前に存在する場合、dt要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

dt要素は、記述リスト(dl要素)内の用語・説明グループの一部である、用語あるいは名前を表す

dl要素で使用された場合、dt要素自身は、その内容が定義されている用語であることを示すものではないが、これはdfn要素を用いて示すことができる。

この例では、質問に対するdt要素と回答に対するdd要素を用いてマークアップされるよくある質問(FAQ)のリストを示す。

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

4.4.10 dd要素

カテゴリー
なし。
この要素を使用できるコンテキスト
dl要素の内側でdtまたはddの後。
dl要素の子であるdiv要素内のddまたはdt要素の後。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
dd要素が別のdd要素またはdt要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、dd要素の終了タグは省略してもよい。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

dd要素は、記述リスト(dl要素)内の用語・説明グループの一部である、説明、定義、あるいは値を表す

dlは辞書のように、語彙リストを定義するために使用することができる。以下の例において、dfnとともにdtで与えられる各エントリは、定義の様々な部分を示す、複数のddを持つ。

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

4.4.11 figure要素

Spec bugs: 25552

カテゴリー
フローコンテンツ
セクショニングルート
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
以下のいずれか:1つのfigcaption要素の後に続くフローコンテンツ
または:フローコンテンツの後に続く1つのfigcaption要素。
または:フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

figure要素は、任意でキャプションをもつ(完全な文のような)自己完結型であり、一般に文書の主フローから単独のユニットとして参照されるフローコンテンツ表す

この文脈において自己完結型は、必ずしも独立したものを意味する必要はない。たとえば、段落内の各文は自己完結型である。文の一部である画像は、figureに不適切だろうが、画像で作られた完全な文は適切だろう。

よってこの要素はイラスト、図、写真、コードリストなどに注釈を付けるために使用できる。

figureがキャプションで(たとえば図番号で)figureを識別することによって文書の主要コンテンツから参照する場合、たとえば、文書のフローに影響を与えることなくページの横へ、専用のページへ、または付録へなど、文書の主要コンテンツから容易に離れられるようなコンテンツを可能にする。

たとえば、"次の図が示すように"あるいは"上の写真において"の次に図に移動するなど、figure要素がその相対位置によって参照される場合、ページの意味を混乱させるだろう。著者は、ページがページの意味に影響を与えることなく簡単に再スタイル付けできるように、そのような相対参照を使用するよりもむしろ、図を参照するためのラベルの使用を検討することを推奨する。

もしあれば、要素の子となる最初のfigcaption要素は、figure要素のコンテンツのキャプションを表す。子figcaption要素が存在しない場合、キャプションは存在しない。

figure要素のコンテンツは、周囲のフローの一部である。たとえば画像共有サイト上の写真など、ページの目的が数字を表示することである場合、figureおよびfigcaption要素は明示的にその図のキャプションを提供するために使用できる。わずかに関連する、あるいは周囲のフローよりも分離する目的を提供するコンテンツに対しては、aside要素が使用されるべきである(そしてそれ自体にfigureを包むことができる)。たとえば、articleからのコンテンツを繰り返すリード文は、figureに比べ、asideがより適切であろう。リード文はコンテンツの一部ではないので、読者を魅了するまたは重要なトピックを強調する目的に対してコンテンツの繰り返しである。

この例は、コードリストをマークアップするためのfigure要素を示す。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

これは(ギャラリー内のような)ページの主コンテンツである写真をマークアップするfigure要素である。

<!DOCTYPE HTML>
<html lang="en">
<title>Bubbles at work — My Gallery™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>

この例において、figureにない画像にくわえて、figureにある画像と動画が見られる。自己完結型のユニットではないので、最初の画像はリテラルに例の第2文の一部である。したがって、figureは不適切であろう。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

ここでは、詩の一部にfigureを用いてマークアップしている。

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

この例において、それは城を取り扱うより大きな作品の一部である可能性があり、ネストされたfigure要素は、グループ内の各図に対してグループのキャプションと個々のキャプションの両方を提供するために使用される:

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

前の例は、次のようにより簡潔に書くこともできる(ネストされたfigure/figcaptionペアの場所でtitle属性を用いて):

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

図は、時にはコンテンツからのみ、暗黙的に参照される:

<article>
 <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
  <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption>
 </figure>
 <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country's borrowing authority with a
 Thursday deadline drawing near.</p>
 ...
</article>

4.4.12 figcaption要素

カテゴリー
なし。
この要素を使用できるコンテキスト
figure要素の最初または最後の子として。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

figcaption要素は、もしあれば、figcaption要素の親figure要素に属する残りのコンテンツのキャプションまたは凡例を表す

4.4.13 main要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
コンテンツモデル
フローコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

main要素は、もう1つの要素の文書コンテンツに対するコンテナとして使用することができる。この要素は、要素の子を表す

main要素は、main要素が文書のアウトラインに寄与しないという点においてsectionおよびarticle要素とは区別される。

文書でmain要素の数についての制限はない。確かに、複数のmain要素を持つことが理にかなう場合が多い。たとえば、複数のarticle要素をもつページは、そのような各要素の支配的な内容を示すために必要があるかもしれない。

この例において、著者は、ページの各構成要素がボックス内にレンダリングされるプレゼンテーションを使用している。(ヘッダー、フッター、ナビゲーションバー、およびサイドバーとは対照的に)ページの主要コンテンツを包むために、main要素が使用される。

<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
 }
 h1, h2, p { margin: 0; }
 nav, main { float: left; }
 aside { float: right; }
 footer { clear: both; }
</style>
<header>
 <h1>System Eighteen</h1>
</header>
<nav>
 <a href="../16/">← System 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
 <h2>Character creation</h2>
 <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
 <h2>Rolls</h2>
 <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
 <p>Copyright © 2013
</footer>
</html>

4.4.14 div要素

カテゴリー
フローコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フローコンテンツが期待される場所。
As a child of a dl element.
コンテンツモデル
If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
If the element is not a child of a dl element: Flow content.
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLDivElement : HTMLElement {};

div要素は、一切特別な意味を持たない。この要素は、要素の子を表す。この要素は、classlang、および連続した要素のグループに共通のセマンティックスをマークアップするtitle属性とともに使用できる。It can also be used in a dl element, wrapping groups of dt and dd elements.

他の要素が適切でない場合、著者は最後の手段の要素としてdiv要素を検討することを強く推奨する。div要素の代わりにより適切な要素を使用することは、読者に対してより良いアクセシビリティーと著者に対するより容易なメンテナンス性につながる。

たとえば、ブログの投稿はarticle、章にsection、ページのナビゲーションの目的にnav、フォームコントロールのグループにfieldsetを使用してマークアップされるだろう。

一方、div要素は、文体上の目的のため、すなわち類似の方法で注釈をつけたすべてのセクション内の複数段落を包むために有用であるかもしれない。次の例は、別々な2つの段落要素に言語の設定を一度に設定する代わりに、一度に2つの段落の言語を設定する方法として使用されるdiv要素である:

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

4.5 テキストレベルセマンティックス

4.5.1 a要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
要素がhref属性を持つ場合:インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的、ただしインタラクティブコンテンツまたは子孫となるa要素が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
hrefハイパーリンクのアドレス
targetハイパーリンクナビゲーションに対するブラウジングコンテキスト
download — リソースをナビゲートする代わりにダウンロードし、その場合リソースのファイル名にするかどうか
pingURLへのping
rel — Relationship between the location in the document containing the hyperlink and the destination resource
hreflang — リンクされたリソースの言語
type — 参照されるリソースタイプのヒント
referrerpolicyReferrer policy for fetches initiated by the element
DOMインターフェイス
[HTMLConstructor]
interface HTMLAnchorElement : HTMLElement {
  [CEReactions] attribute DOMString target;
  [CEReactions] attribute DOMString download;
  [CEReactions] attribute USVString ping;
  [CEReactions] attribute DOMString rel;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString hreflang;
  [CEReactions] attribute DOMString type;

  [CEReactions] attribute DOMString text;

  [CEReactions] attribute DOMString referrerPolicy;
};
HTMLAnchorElement implements HTMLHyperlinkElementUtils;

a要素がhref属性を持つ場合、要素はそのコンテンツにラベル付けされたハイパーリンク(ハイパーテキストアンカー)を表す

a要素がhref属性を持たない場合、要素が関連していたならば、要素は、要素のコンテンツからなる、リンクが別の方法で置かれているかもしれない場所に対するプレースホルダーを表す

href属性が存在しない場合、targetdownloadpingrel、およびhreflangtypeおよびreferrerpolicy属性は省略しなければならない。

a要素でitempropが指定される場合、href属性も指定されなければならない。

サイトがすべてのページに一貫性のあるナビゲーションツールバーを使用する場合、通常ページ自身へリンクするリンクは、a要素を使ってマークアップできる:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

The href, target, download, ping, and referrerpolicy attributes affect what happens when users follow hyperlinks or download hyperlinks created using the a element. The rel, hreflang, and type attributes may be used to indicate to the user the likely nature of the target resource before the user follows the link.

The activation behavior of a elements that create hyperlinks is to run the following steps:

  1. If the a element's node document is not fully active, then abort these steps.

  2. If the user has not indicated a specific browsing context for following the link, and the element's target attribute is present, and applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute as the browsing context name, would result in there not being a chosen browsing context, then:

    1. If there is an entry settings object, throw an "InvalidAccessError" DOMException.

    2. Abort these steps without following the hyperlink.

  3. If the target of the click event is an img element with an ismap attribute specified, then server-side image map processing must be performed, as follows:

    1. Let x and y be zero.
    2. If the click event was a real pointing-device-triggered click event on the img element, then set x to the distance in CSS pixels from the left edge of the image to the location of the click, and set y to the distance in CSS pixels from the top edge of the image to the location of the click.
    3. If x is negative, set x to zero.
    4. If y is negative, set y to zero.
    5. Let hyperlink suffix be a U+003F QUESTION MARK character, the value of x expressed as a base-ten integer using ASCII digits, a U+002C COMMA character (,), and the value of y expressed as a base-ten integer using ASCII digits.
  4. Finally, the user agent must follow the hyperlink or download the hyperlink created by the a element, as determined by the download attribute and any expressed user preference, passing hyperlink suffix, if the steps above defined it.

a . text

textContentと同じ。

IDL属性downloadpingtargetrelhreflangおよびtypeは、同じ名前のそれぞれのコンテンツ属性を反映しなければならない。

IDL属性relListは、relコンテンツ属性を反映しなければならない。

Support: rellistChrome for Android (limited) 57+Chrome (limited) 50+UC Browser for Android NoneiOS Safari 9.0+Firefox 30+IE NoneSamsung Internet NoneOpera Mini NoneAndroid Browser (limited) 56+Edge NoneSafari 9+Opera (limited) 37+

Source: caniuse.com

IDL属性referrerPolicyは、既知の値に制限されreferrerpolicyコンテンツ属性を反映しなければならない。

取得時に、text IDL属性は、要素上のtextContent IDL属性として同じ値を返さなければならず、設定時に、あたかも要素上のtextContent IDL属性が新しい値を設定されているかのように、振る舞わなければならない。

a要素は、全体のセクションであっても、インタラクティブコンテンツ内(たとえばボタンや他のリンク)に存在しない限り、全体の段落、リスト、テーブルなどの周りを包んでもよい。この例は、これがリンクに全体の広告ブロックを作るために使用できる様子を示す:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

4.5.2 em要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

em要素は、要素のコンテンツの強調を表す

コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。

強調の設置は、文の意味を変更する。このように要素は、コンテンツの不可欠な部位を形成する。強調が使用される正確な方法は、言語によって異なる。

以下の例は、強調を変更することで意味がどのように変化するかを示す。まず、強調のない、事実である一般文:

<p>Cats are cute animals.</p>

最初の単語を強調することによって、発言は、議論される動物の種類(おそらく誰かが犬はかわいいと主張している)が問題であることを意味する:

<p><em>Cats</em> are cute animals.</p>

動詞に強調を移動することで、文全体の真偽が問題である(おそらく誰かが猫はかわいくないと言っている)ことを強調する:

<p>Cats <em>are</em> cute animals.</p>

形容詞に移動することで、猫の的確な性質を断言する(おそらく誰かが猫は平均な動物だとほのめかした):

<p>Cats are <em>cute</em> animals.</p>

同様に、誰かが猫は野菜であったと主張した場合も、誰かが最後の単語を強調することでこれを修正する:

<p>Cats are cute <em>animals</em>.</p>

文全体を強調することによって、話者が言いたいことを伝えるために懸命に戦っていることが明らかになる。この種の強調はまた、ここでは感嘆符に、典型的には句読点に影響を与える。

<p><em>Cats are cute animals!</em></p>

かわいらしさを強調するともに怒りが、次のようなマークアップにつながるかもしれない:

<p><em>Cats are <em>cute</em> animals!</em></p>

em要素は、包括的な"イタリック"要素ではない。時として、あたかも異なる気分や声であったかのように、テキストが残りの段落から目立つことを意図する。このためには、i要素がより適切である。

em要素はまた、重要性を伝えることを意図しない。そのためには、strong要素がより適切である。

4.5.3 strong要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

strong要素は、そのコンテンツに対する強力な重要性、深刻性、または緊急性を表す

Importance: the strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. (これはhgroup要素が適切である、小見出しのマークアップとは区別される。)

たとえば、1つ前の段落の最初の単語は、残りの段落においてより詳細なテキストと区別するために、strongとともにマークアップされる。

Seriousness: the strong element can be used to mark up a warning or caution notice.

Urgency: the strong element can be used to denote contents that the user needs to see sooner than other parts of the document.

コンテンツの一部の相対的な重要性のレベルは、祖先strong要素の数によって与えられる。各strong要素が、その内容の重要性を増大する。

strong要素を持つテキストの一部の重要性を変更は、文の意味を変更しない。

ここでは、単語"chapter"および実際の章番号は、単なる定型文であり、かつ章の実際の名前は、strongでマークアップされている:

<h1>Chapter 1: <strong>The Praxis</strong></h1>

次の例において、キャプションにおける図の名前は、定型句(前)と描写(後)とを区別するために、strongでマークアップされている:

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

次の例において、実際の見出しは"Flowers, Bees, and Honey"であるが、著者は見出しに陽気な付け足しを追加している。したがって、strong要素は、後半から見出しを区別しようとして前半をマークアップするために使用される。

<h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>

これは、どの程度重要であるかによってマークアップした様々な部分をもつ、ゲーム内の警告通知の例である:

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

この例において、strong要素は、ユーザーが最初に読むことを意図するテキストの一部を示すために使用される。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

4.5.4 small要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

small要素は、小さな活字体などの副次的なコメントを表す

小さな活字体は通常、免責事項、警告、法的制約、または著作権を取り上げる。小さな活字体はまた、時として帰属に対して、またはライセンス要件を満たすために使用される。

small要素は、"非強調"、またはem要素によって強調されたテキストの重要性を低くする、strong要素を持つ重要としてマークされるものでない。強調または重要ではないものとしてテキストをマークするには、単にそれぞれemまたはstrong要素を使ってマークアップしない。

small要素は、複数の段落、リスト、またはテキストのセクションのような幅のあるテキストの長さに使用すべきでない。この要素は、短いテキストのみを対象とする。たとえば、利用規約を記載するページのテキストは、small要素に適した候補ではない。このような場合、テキストは副次的なコメントではなく、ページの主要コンテンツである。

small要素は副見出しに対して使用されてはならない。この目的のために、hgroup要素を使用する。

この例において、small要素は、付加価値税がホテルの部屋の料金に含まれないことを示すために使用される:

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

この2番目の例において、small要素は記事で付随するコメントに対して使用される。

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

次は、長く複数の段落かもしれず、かつ主要なテキストフローから削除される、サイドバーとは別個のものである。次の例において、同じ記事由来のサイドバーが見られる。このサイドバーはまた、サイドバーの中に情報のソースを示す、小さな活字体を持つ。

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

この最後の例において、small要素は、重要な小さな活字体であるものとしてマークされる。

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.5.5 s要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

s要素は正確ではないか、もはや関連しないコンテンツを表す

文書の編集を示す場合、s要素は適切ではない。文書から削除されているものとしてテキスト範囲をマークするためには、del要素を使用する。

この例において、新たな販売価格を持つ問題の製品がもはや関連しないものとして、推奨小売価格がマークされている。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

4.5.6 cite要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

cite要素は、作品(たとえば、本、新聞、エッセイ、詩、楽譜、歌、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、映画、演劇、オペラ、ミュージカル、展示、訴訟事例報告、コンピュータープログラムなど)のタイトルを表す。これは、引用されるまたは詳細に参照される(すなわち引用文)作品かもしれず、またはそれは単に通りがかりに記載される作品かもしれない。

人名は作品のタイトルではない―たとえ人々がその人を作品の一部とみなすとしても―したがって要素は人名をマークアップするために使用してはならない。(一部の場合、b要素が名前に対して適切であるかもしれない。たとえば、有名人の名前が注意を引くために別のスタイルを使用してレンダリングされるキーワードであるようなゴシップ記事において。他の例では、要素が本当に必要である場合、span要素を使用できる。)

次の例は、cite要素の典型的な使用例を示す:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

これは正しい使い方である:

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

しかし、ここでcite要素が作品のタイトルよりもより多くを含むので、次は誤った使用方法である:

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

cite要素は明らかに参考文献の任意の引用の重要な部分であるが、それはタイトルをマークするためのみに使用される:

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>

引用は、引用文ではない(q要素が適切である)。

citeは引用文のためのものでないので、これは間違った使い方である:

<p><cite>This is wrong!</cite>, said Ian.</p>

人は作品ではないので、これも誤った使い方である:

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

正しい使用法は、cite要素を使用しない。

<p><q>This is correct</q>, said Ian.</p>

前述したように、b要素は、文書の特定の種類においてのキーワードであるような名前をマークに対して関連するかもしれない:

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

4.5.7 q要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
DOMインターフェイス
HTMLQuoteElementを使用する。

q要素は、別のソースから引用されたフレージングコンテンツ表す

要素のコンテンツを引用している引用句読点(たとえば引用符など)は、直前、直後、またはq要素の内部に現れてはならない。これらは、ユーザーエージェントによってレンダリング時に挿入される。

qの要素内のコンテンツは、別のソースから引用されなければならず、そのアドレスがある場合は、cite属性に引用してもよい。ソースは小説や脚本中の文字を引用するときのように、架空のものであってよい。

cite属性が存在する場合、潜在的にスペースで囲まれた妥当なURLでなければならない。対応する引用リンクを取得するために、属性値は、要素のノード文書に対して解析されなければならない。ユーザーエージェントは、ユーザーがそのような引用のリンクをたどることを可能にしてもよいが、これは主に読者のためでなく、(たとえば引用のサイトの使用に関する統計を収集するサーバーサイドスクリプトによってなど)私的使用のために意図される。

q要素は、引用文を表さない引用符の代わりに使用してはならない。たとえば、風刺文をマークアップするためにq要素を使用するのは不適切である。

引用文をマークアップするためのq要素の使用は完全に任意である。q要素なしで明示的に引用句読点を使用は同様に正しい。

ここで、q要素の用法の簡単な例を示す:

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

これは、q要素で明示的な引用リンクと、外部への明示的な引用の両方を持つ例である:

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

次の例は、引用文自身が引用文を含む:

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

次の例において、引用符はq要素の代わりに使用される:

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

次の例では、引用文が存在しない―引用符は、単語を明示するために使用される。この場合のq要素の使用は不適切であろう。

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

4.5.8 dfn要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしdfn要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、title属性は、この要素で特別なセマンティックスを持つ:完全な用語または略語の展開。
DOMインターフェイス
HTMLElementを使用する。

dfn要素は、用語の定義実体を表すdfn要素の最も近い祖先である段落説明リストのグループ、またはセクションはまた、dfn要素によって与えられる用語の定義を含まなければならない。

Defining term: if the dfn element has a title attribute, then the exact value of that attribute is the term being defined. そうでなければ、要素が正確に1つの要素の子ノードおよび子Textノードを含み、その子要素がtitle属性を持つabbr要素である場合、その属性の正確な値は、定義されている用語である。そうでなければ、定義されている用語を与えるdfn要素の正確なtextContentである。

dfn要素のtitle属性が存在する場合、属性は定義されている用語のみを含まなければならない。

先祖要素のtitle属性はdfn要素に影響しない。

dfn要素へリンクするa要素は、dfn要素によって定義される用語の実体を表す。

次の断片において、用語"Garage Door Opener"が第1段落で最初に定義され、第2段落で使用される。どちらの場合も、その略語は、実際に表示されるものである。

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

a要素を追加することで、参照は明示的にできる:

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

4.5.9 abbr要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、title属性は、この要素で特別なセマンティックスを持つ:完全な用語または略語の展開。
DOMインターフェイス
HTMLElementを使用する。

abbr要素は、任意でその完全表記を伴う、略語や頭字語を表すtitle属性は、略語の完全表記を提供するために使用されてもよい。属性が指定される場合は、略語の完全表記を含まなければならず、他には何も持たない。

下記の段落はabbr要素でマークアップされた略語を含む。この段落は、"Web Hypertext Application Technology Working Group"という用語を定義する

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

これを記述する別の方法は、次のようになる:

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of Web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

この段落は、2つの略語を持つ。一方がどのように定義されるかのみに注目する。他方は、それに関連付けられている完全表記を持たず、abbr要素を使用しない。

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

この段落は、その定義に略語をリンクする。

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

この段落は、おそらく略語のスタイル(たとえば、スモールキャップ)を適用するためのフックとして、完全表記を与えずに略語をマークアップする。

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

略語が複数形の場合、完全表記の文法的な数(複数形対単数形)は、要素のコンテンツの文法的な数と一致しなければならない。

ここでは、複数形は要素の外にあるので、完全表記は単数形である:

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

ここでは、複数形は要素の内にあるので、完全表記は複数形である:

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

略語は、この要素を使用してマークアップする必要はない。それは次のような場合に有用であることが期待される:

一度title属性で完全表記を提供しても、同じコンテンツをもつがあたかもコンテンツが同じ完全表記を持つかのように機能するためのtitle属性をもたない同じ文書における他のabbrをもたらすとは必ずしも限らない。すべてのabbr要素は独立である。

4.5.10 ruby要素

Spec bugs: 25555

Support: rubyChrome for Android (limited) 57+Chrome (limited) 5+UC Browser for Android (limited) 11.4+iOS Safari (limited) 5.0+Firefox 38+IE (limited) 5.5+Samsung Internet (limited) 4+Android Browser (limited) 3+Edge (limited) 12+Safari (limited) 5+Opera (limited) 15+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
文参照。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

ruby要素は、ルビ注釈をマークする1つ以上のフレージングコンテンツの範囲を与える。ルビ注釈は、発音の案内または他の注釈を含むものとして東アジアの活版印刷で主に使用される、ベーステキストと並んで表示される短いテキストである。日本語において活版印刷のこの形式は、振り仮名としても知られる。

ruby要素の内容モデルは、以下の順序の1つ以上で構成される:

  1. 次のどれか一方:
  2. 次のどれか一方:

rubyrt要素は、特に(特定の意味に限らず)以下で説明するように、注釈のさまざまな種類に対して使用できる。より具体的な日本語ルビの詳細、およびどのように日本語ルビをレンダリングするのかについては、日本語組版処理の要件を参照のこと。[JLREQ]

執筆時点において、CSSはまだ完全にHTML ruby要素のレンダリングを制御する方法を提供しない。CSSがやがて後述のスタイルをサポートするように拡張されることが望まれる。

日本語で個々のベース文字に対するモノルビ

1つ以上のひらがなまたはカタカナ(ルビ注釈)が、各表意文字(親文字)で配置される。これは漢字の読みを提供するために使用される。

<ruby>B<rt>annotation</ruby>

この例において、各注釈が単一の親文字に対応していることにも注目する。

<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

くんしてどうぜず。

この例もまた、1つの親文字セグメントとルビ注釈をもつ2つの連続的なruby要素(上記マークアップ内のような)よりもむしろ、親文字の2つのセグメントと2つのルビ注釈(それぞれについて1つ)をもつ1つのruby要素を使用して、次のように書くことができる:

<ruby>君<rt>くん</rt>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
複合語(熟語)に対するモノルビ

これは、前の場合と同様である。複合語(親文字)内の各表意文字は、ひらがなまたはカタカナ文字(ルビ注釈)で与えられるその読みを持つ。違いは、親文字の文節が互いから離れるのではなく、複合語を形成することである。

<ruby>B<rt>annotation</rt>B<rt>annotation</ruby>

この例において、各注釈が単一の親文字に対応していることに再び注目する。この例において、各複合語(熟語)は、単一のruby要素に対応する。

ここでレンダリングは、隣接する文字のいずれにも上にかからない注釈とともに、各注釈が対応する親文字の上(または、縦書きテキストでは隣)に配置されることが期待される。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

もんほうがくぎょうする

熟語ルビ

これは前の場合(ベース複合語内の個々の表意文字が、ひらがなまたはカタカナ文字の注釈で指定される読みを持つ)とセマンティックに同じであるが、レンダリングは、より複雑な熟語ルビレンダリングである。

これは、上記の複合語に対するモノルビと同じ例となる。異なるレンダリングが異なるスタイリング(たとえばCSS)を用いて達成することが期待されるので、ここでは示されない。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

詳細については日本語組版処理の要件の附属書F、熟語ルビの配置方法を参照のこと。[JLREQ]

意味の記述に対するグループルビ

注釈は、発音ではなく(またはそれに加えて)親文字の意味を説明する。このように、親文字と注釈の両方は、複数の文字長にできる。

<ruby>BASE<rt>annotation</ruby>

ここで、複合表意語は、注釈として与えられる対応したカタカナを持つ。

<ruby>境界面<rt>インターフェース</ruby>

境界面インターフェース

ここで、複合表意語は、注釈として与えられる対応した英訳を持つ。

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

編集者editor

熟字の読みに対するグループルビ

1対1の対応付けが困難なため、複数の親文字に対応するふりがな。(英語において、単語"Colonel"と"Lieutenant"は、いくつかの方言ではなく、はっきりしない個々の文字へ発音の直接的な対応付けがある単語の例である。)

この例では、花の種の名前はグループルビを使用して提供される発音どおりのク読みを持つ。

<ruby>紫陽花<rt>あじさい</ruby>

紫陽花あじさい

表音とセマンティック両方の注釈をもつテキスト(両側ルビ)

時に、上記のルビスタイルが結合される。

これが同じ単一ベースセグメントをカバーする2つのルビ注釈をもたらす場合、注釈のみが連続的に配置できる。

<ruby>BASE<rt>annotation 1<rt>annotation 2</ruby>
<ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>

この不自然な例において、一部のシンボルが英語とフランス語で名前を与えられる。

<ruby>
 ♥ <rt> Heart <rt lang=fr> Cœur </rt>
 ☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
 ✶ <rt> Star <rt lang=fr> Étoile </rt>
</ruby>

以下の例のようにより複雑化する状況において、ネストされたruby要素が内側の注釈を与えるために使用され、全体のrubyが、"外側"レベルで注釈を与える。

<ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby>

ここで表音の読みと意味の両方がルビ注釈に記載されている。外側のruby要素の子であるrt要素内の注釈はひらがなを使って意味を与える一方、ネストされたruby要素上の注釈は、各親文字のモノルビ表音注釈を与える。

<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角

とうなんたつみの方角

これは同じ例であるが、意味は日本語の代わりに英語で与えられる:

<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角

とうなんSoutheastの方角


ruby要素の祖先を持たないruby要素内で、コンテンツはセグメント化され、セグメントは3つのカテゴリーに置かれる:ベーステキストセグメント、注釈セグメント、無視セグメント。無視されるセグメントは文書のセマンティックスの一部を形成しない(それらは要素間の空白rp要素で構成され、後者は全くルビをサポートしないレガシーユーザーエージェントに使用される)。ベーステキストセグメントは重複可能である(DOMで任意の位置と重複する2つのセグメントの制限とともに、重複するセグメントより前の始点を有する任意のセグメントはまた、同等またはそれ以降の終点を持ちつつ、そして、任意のセグメントが同等またはそれ以前の始点を持つ重複セグメントよりも後に終点を持つ)。注釈セグメントは、rt要素に対応する。各注釈セグメントは、ベーステキストセグメントに関連付けることができ、それぞれのベーステキストセグメントは、関連付けられる注釈セグメントを持つことができる。(適合文書において、各ベーステキストセグメントは、少なくとも1つの注釈セグメントに関連付けられており、各注釈セグメントは1つのベーステキストセグメントに関連付けられている。)ruby要素は、注釈セグメントにこれらのベーステキストセグメントからマッピングと一緒に、それに含まれるベーステキストセグメントの結合を表す。セグメントは、DOMの範囲の観点から説明され、注釈セグメントの範囲は常に正確に1つの要素で構成される。[DOM]

任意の特定の時点における、ruby要素のコンテンツのセグメンテーションと分類は、以下のアルゴリズムを実行して得られたであろう結果である:

  1. base text segmentsをベーステキストセグメントの空のリストにする。

  2. Let annotation segmentsを注釈セグメントの空のリストにし、それぞれが潜在的にベーステキストセグメントまたはサブセグメントに関連付ける。

  3. アルゴリズムが実行しているものに対してrootruby要素とする。

  4. rootruby要素の祖先を持つ場合、ステップラベルendにジャンプする。

  5. current parentrootにする。

  6. indexを0にする。

  7. start indexをnullにする。

  8. parent start indexをnullにする。

  9. current base textをnullにする。

  10. Start modeindexcurrent parentで子ノードの数以上の場合、ステップラベルend modeにジャンプする。

  11. current parentindex番目のノードがrtまたは rp要素の場合、annotation modeのラベルが付いたステップへジャンプする。

  12. start indexindexの値に設定する。

  13. Base modecurrent parentでのindex番目のノードがruby要素の場合、かつcurrent parentrootと同じ要素の場合、rubyレベルをプッシュし、ラベルstart modeのステップにジャンプする。

  14. current parentindex番目のノードがrtまたは rp要素の場合、現在のベーステキストを設定し、ラベルannotation modeのステップにジャンプする。

  15. indexを1でインクリメントする。

  16. Base mode post-incrementindexcurrent parentで子ノードの数以上の場合、ステップラベルend modeにジャンプする。

  17. base modeにラベル付けされたステップにジャンプする。

  18. Annotation modecurrent parentindex番目のノードがrt要素の場合、ルビ注釈をプッシュし、ラベルannotation mode incrementにジャンプする。

  19. current parentindex番目のノードがrp要素の場合、 ラベルannotation mode incrementのステップにジャンプする。

  20. current parentindex番目のノードがTextノードでない、または要素間空白でないTextノードの場合、ラベルbase modeのステップにジャンプする。

  21. Annotation mode incrementlookahead indexindexに1加えるものにする。

  22. Annotation mode white-space skipperlookahead indexcurrent parentで子ノードの数以上の場合、ラベルend modeのステップにジャンプする。

  23. current parentでのlookahead index番目のノードがrt要素またはrp要素である場合、indexlookahead indexを設定し、ラベルannotation modeのステップにジャンプする。

  24. current parentでのlookahead index番目のノードがTextノードでない、または要素内空白でないTextノードでなる場合、ラベルbase modeのステップにジャンプする(さらにindexをインクリメントせず、要素内空白が見られる範囲では次のベーステキストセグメントの一部になる)

  25. lookahead indexを1でインクリメントする。

  26. ラベルannotation mode white-space skipperのステップにジャンプする。

  27. End modecurrent parentrootと同じ要素でない場合、ルビレベルをポップし、ラベルbase mode post-incrementのステップにジャンプする。

  28. Endbase text segmentsおよびannotation segmentsを返す。これらリストのいずれかのセグメントによって説明されないruby要素の任意のコンテンツは、暗黙のうちにignored segmentである。

上記のステップで現在のベーステキストを設定するという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する:

  1. text range境界ポイントcurrent parentstart index)で開始し境界ポイント(current parent, index)で終了するDOM範囲にする。

  2. new text segmentを範囲annotation rangeで記述されるベーステキストセグメントにする。

  3. new text segmentbase text segmentsに加える。

  4. current base textnew text segmentにする。

  5. start indexをnullにする。

上記のステップでルビレベルをプッシュするという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する:

  1. current parentcurrent parentindex番目のノードにする。

  2. indexを0にする。

  3. saved start indexstart indexの値に設定する。

  4. start indexをnullにする。

上記のステップでルビレベルをポップするという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する:

  1. indexrootcurrent parentの位置にする。

  2. current parentrootにする。

  3. indexを1でインクリメントする。

  4. start indexsaved start indexの値に設定する。

  5. saved start indexをnullにする。

上記のステップでルビ注釈をプッシュするという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する:

  1. rtcurrent parentindex番目のノードであるrt要素にする。

  2. annotation range境界ポイントcurrent parentstart index)で開始し境界ポイント(current parent, indexに1を加える)(すなわちrtのみを含む)で終了するDOM範囲にする。

  3. new annotation segmentを範囲annotation rangeで記述される注釈セグメントにする。

  4. current base textがnullでない場合、new annotation segmentcurrent base textを結びつけて考える。

  5. new annotation segmentannotation segmentsに加える。

この例において、日本語テキスト漢字での各表意文字は、そのひらがなでの読みに結びつけられる。

...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

これはこのようにレンダリングされるだろう:

2つの主表意文字の各ひらがなでの注釈は、上に小さなフォントでレンダリングされる。

この例において、繁体字テキスト漢字での各表意文字は、その注音符号での読みに結びつけられる。

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

これはこのようにレンダリングされるだろう:

2つの主表意文字の各注音符号での注釈は、横に小さなフォントでレンダリングされる。

この例において、簡体字テキスト汉字での各表意文字は、そのピンインでの読みに結びつけられる。

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

これはこのようにレンダリングされるだろう:

2つの主表意文字の各ピンインでの注釈は、上に小さなフォントでレンダリングされる。

このより計画的な例において、頭字語"HTML"は4つの注釈を持つ。1つは頭字語全体に対するもので、これが何であるかを簡単に説明し、1つは文字"HT"を展開した"Hypertext"、1つは文字Mを展開した"Markup"、1つは文字"L"を展開した"Language"である。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

4.5.11 rt要素

カテゴリー
なし。
この要素を使用できるコンテキスト
ruby要素の子として。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
rt要素が別のrtまたはrp要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、rt要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

rt要素は、ルビ注釈のルビテキストコンポーネントをマークする。要素がruby要素の子である場合、要素は何らそれ自身を表さないが、ruby要素はそれが何を表すかを決定するものの一部として使用する。

ruby要素の子でないrt要素は、その子と同じものを表す

4.5.12 rp要素

カテゴリー
なし。
この要素を使用できるコンテキスト
直前または直後のrt要素のいずれかで、ruby要素の子として。
コンテンツモデル
Text
text/htmlにおけるタグ省略
rp要素が別のrtまたはrp要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、rp要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

rp要素は、ルビ注釈をサポートしないユーザーエージェントによって示される、ルビ注釈のルビテキストコンポーネントを囲む括弧または別のコンテンツを提供するために使用できる。

ruby要素の子であるrp要素は何も表さない。親要素がruby要素でないrp要素は、その子を表す

テキスト漢字での各表意文字はその読みふりがなの注釈をもつ上記の例は、レガシーユーザーエージェントでの読みは括弧内にあるので、rpを使用するように拡張できる:

...
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
...

適合ユーザーエージェントでのレンダリングは前述のようになるが、ルビがサポートされないユーザーエージェントにおいて、レンダリングは次のようになるだろう:

... 漢(かん)字(じ)...

セグメントに複数の注釈がある場合、rp要素はまた注釈の間に配置できる。これは英語とフランス語で与えられた名前を持つ一部のシンボルを示す以前の不自然な例の別のコピーだが、今回は同様にrp要素をもつ:

<ruby>
♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rt lang=fr>Cœur</rt><rp>.</rp>
☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rt lang=fr>Trèfle</rt><rp>.</rp>
✶<rp>: </rp><rt>Star</rt><rp>, </rp><rt lang=fr>Étoile</rt><rp>.</rp>
</ruby>

これは、たとえばレンダリングが非ルビ対応のユーザーエージェントでは次のようになるだろう:

♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.

4.5.13 data要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 機械可読な値
DOMインターフェイス
[HTMLConstructor]
interface HTMLDataElement : HTMLElement {
  [CEReactions] attribute DOMString value;
};

data要素は、value属性でコンテンツの機械可読形式に沿って、そのコンテンツを表す

value属性が存在しなければならない。その値は、機械可読形式での要素コンテンツの表現でなければならない。

値が日付または時刻に関連する場合、より具体的なtime要素を代わりに使用できる。

要素はいくつかの目的に使用できる。

この仕様で定義されるマイクロフォーマットまたはマイクロデータ属性と組み合わせた場合、要素は、データプロセッサの目的のために機械可読な値、およびウェブブラウザーでレンダリング目的のために人間可読な値の両方を提供する役割を果たす。この場合、value属性で使用されるフォーマットは、使用中のマイクロフォーマットまたはマイクロデータ語彙によって決定される。

しかし、要素はまた、人間可読な値と一緒に格納するリテラルな値を持つ際に、ページ内でスクリプトと併せて使用される。このような場合、使用されるフォーマットは、スクリプトの要求に依存する。(data-*属性もそのような状況において有用でありうる。)

value IDL属性は、同じ名前のコンテンツ属性を反映しなければならない。

ここでは、短いテーブルが、1列のテキスト形式でかつ別に分解された形式で提示された数字にもかかわらず、テーブルソートJavaScriptライブラリーは各列のソートメカニズムを提供することができるようにdataを用いてエンコードされた数値を持つ。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

4.5.14 time要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
要素がdatetime属性をもつ場合:フレージングコンテンツ
そうでなければ:Text。ただし、本文で与えられる要件にマッチしなければならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
datetime — 機械可読な値
DOMインターフェイス
[HTMLConstructor]
interface HTMLTimeElement : HTMLElement {
  [CEReactions] attribute DOMString dateTime;
};

time要素は、datetime属性でコンテンツの機械可読形式に沿って、そのコンテンツを表す。コンテンツの種類は、以下に説明するような、日付、時刻、タイムゾーンのオフセット、および期間の様々な種類に限定される。

datetime属性は存在してもよい。存在する場合、その値は、機械可読形式での要素コンテンツの表現でなければならない。

datetime型のコンテンツ属性を持たないtime要素は、任意の要素の子孫を持ってはならない。

もし持つ場合、time要素の日付時刻値は要素のdatetimeコンテンツ属性値であり、そうでなければ、time要素の子テキストコンテンツである。

time要素の日付時刻値は以下の構文のいずれかと一致しなければならない。

妥当な月文字列
<time>2011-11</time>
妥当な日付文字列
<time>2011-11-18</time>
妥当な年のない日付文字列
<time>11-18</time>
妥当な時刻文字列
<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.929</time>
妥当なローカル日付および時刻文字列
<time>2011-11-18T14:54</time>
<time>2011-11-18T14:54:39</time>
<time>2011-11-18T14:54:39.929</time>
<time>2011-11-18 14:54</time>
<time>2011-11-18 14:54:39</time>
<time>2011-11-18 14:54:39.929</time>

タイムゾーンオフセットのない日付は、終日、各タイムゾーンに同じ特定の時刻で観察されるイベントを指定するのに便利である。たとえば、2020年の新年は、すべてのタイムゾーンで同一の正確な瞬間ではなく、それぞれのタイムゾーンで2020年1月1日0時0分に祝われる。すべてのタイムゾーンで同時に発生したイベントの場合、たとえばテレビ会議の会議において、妥当なグローバル日付および時刻文字列は、おそらくより有用である。

妥当なタイムゾーンオフセット文字列
<time>Z</time>
<time>+0000</time>
<time>+00:00</time>
<time>-0800</time>
<time>-08:00</time>

日付なしの時刻(または複数日で繰り返されるイベントを参照する時刻)について、地理的な位置がサマータイムとともにタイムゾーンオフセットを変更するため、時刻を制御する地理的な位置を指定することは、通常タイムゾーンオフセットを指定するよりも有用である。一部の場合、たとえば、これらのタイムゾーンの境界を再描画する場合、2011年末にサモアで起きたように、地理的な場所でもタイムゾーンを変更する。タイムゾーンの境界およびどのような規則が各ゾーン内で適用されるのかを説明する、タイムゾーンデータベースとして知られるものが存在する。[TZDATABASE]

妥当なグローバル日付および時刻文字列
<time>2011-11-18T14:54Z</time>
<time>2011-11-18T14:54:39Z</time>
<time>2011-11-18T14:54:39.929Z</time>
<time>2011-11-18T14:54+0000</time>
<time>2011-11-18T14:54:39+0000</time>
<time>2011-11-18T14:54:39.929+0000</time>
<time>2011-11-18T14:54+00:00</time>
<time>2011-11-18T14:54:39+00:00</time>
<time>2011-11-18T14:54:39.929+00:00</time>
<time>2011-11-18T06:54-0800</time>
<time>2011-11-18T06:54:39-0800</time>
<time>2011-11-18T06:54:39.929-0800</time>
<time>2011-11-18T06:54-08:00</time>
<time>2011-11-18T06:54:39-08:00</time>
<time>2011-11-18T06:54:39.929-08:00</time>
<time>2011-11-18 14:54Z</time>
<time>2011-11-18 14:54:39Z</time>
<time>2011-11-18 14:54:39.929Z</time>
<time>2011-11-18 14:54+0000</time>
<time>2011-11-18 14:54:39+0000</time>
<time>2011-11-18 14:54:39.929+0000</time>
<time>2011-11-18 14:54+00:00</time>
<time>2011-11-18 14:54:39+00:00</time>
<time>2011-11-18 14:54:39.929+00:00</time>
<time>2011-11-18 06:54-0800</time>
<time>2011-11-18 06:54:39-0800</time>
<time>2011-11-18 06:54:39.929-0800</time>
<time>2011-11-18 06:54-08:00</time>
<time>2011-11-18 06:54:39-08:00</time>
<time>2011-11-18 06:54:39.929-08:00</time>

日付とタイムゾーンオフセットを持つ時刻は、特定のイベント、または時刻が特定の地理的な位置に固定されない定期的な仮想のイベントを指定するのに便利である。たとえば、世界の任意の特定部分がサマータイムを観察するかどうかにかかわらず、小惑星衝突または、毎日1400 UTCに開催されるある一連の会議の正確な時刻。特定の地理的位置のローカルタイムゾーンオフセットによって正確な時間が異なるイベントにおいて、その地理的位置と組み合わせた妥当なローカルの日付および時刻文字列がより便利だろう。

妥当な週文字列
<time>2011-W47</time>
4つ以上のASCII数字で、少なくとも1つはU+0030 DIGIT ZERO(0)でない。
<time>2011</time>
<time>0001</time>
妥当な期間文字列
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>

要素のコンテンツの機械可読な等価物は、次のアルゴリズムを使用することで要素の日付時刻値から取得しなければならない:

  1. 要素の日付時刻値から月文字列を解析することでを返す場合、それは機械可読な等価物であり、この手順を中止する。

  2. 要素の日付時刻値から日付文字列を解析することで日付を返す場合、それは機械可読な等価物であり、この手順を中止する。

  3. 要素の日付時刻値から年なし日付文字列を解析することで年なし日付を返す場合、それは機械可読な等価物であり、この手順を中止する。

  4. 要素の日付時刻値から時刻文字列を解析することで時刻を返す場合、それは機械可読な等価物であり、この手順を中止する。

  5. 要素の日付時刻値からローカル日付および時刻文字列を解析することでローカル日付および時刻を返す場合、それは機械可読な等価物であり、この手順を中止する。

  6. 要素の日付時刻値からタイムゾーンオフセット文字列を解析することでタイムゾーンオフセットを返す場合、それは機械可読な等価物であり、この手順を中止する。

  7. 要素の日付時刻値からグローバル日付および時刻文字列を解析することでグローバル日付および時刻を返す場合、それは機械可読な等価物であり、この手順を中止する。

  8. 要素の日付時刻値から週文字列を解析することでを返す場合、それは機械可読な等価物であり、この手順を中止する。

  9. 要素の日付時刻値が少なくとも1つがU+0030 DIGIT ZERO(0)でないASCII数字のみで構成される場合、機械可読な等価物は年を表す、基数10の解釈となり、この手順を中止する。

  10. 要素の日付時刻値から期間文字列を解析することで期間を返す場合、それは機械可読な等価物であり、この手順を中止する。

  11. 機械可読な等価物は存在しない。

上記で参照したアルゴリズムは、アルゴリズムの1つのみが値を返すよう、任意の文字列sに対して設計されるよう意図される。より効率的なアプローチは、一つのパス内のすべてのこのデータ型を解析する単一のアルゴリズムを作成することかもしれない。そのようなアルゴリズムを開発することは読者への課題として残される。

dateTime IDL属性は、要素のdatetimeコンテンツ属性を反映しなければならない。

time要素は、たとえばマイクロフォーマットの中で、日付をエンコードするために使用できる。以下は、time要素を使用するhCalendarの変種を使ったイベントをエンコードするための仮想的方法を示す:

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

ここでは、Atom語彙に基づく架空のマイクロデータ語彙が、ブログ記事の発行日をマークアップするtime要素で使用される。

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">Big tasks</h1>
 <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer>
 <p itemprop="content">Today, I went out and bought a bike for my kid.</p>
</article>

この例において、もう1つの記事の出版日は、schema.orgのマイクロデータ語彙を使用して、timeを使ってマークアップされる。

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

次の断片において、time要素は、後でスクリプトによって処理するために、ISO8601形式で日付をエンコードして使用される:

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

この2つ目の断片では、値は時間を含む:

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

ページ(およびtime要素を使用して日付と時刻をマークアップするのページの内部規則に関係するもの)によってロードされたスクリプトは、ページをスキャンして、その中に日付と時刻のインデックスを作成するためにすべてのtime要素を見るかもしれない。

たとえば、この要素は2011年11月18日が"金曜日"に相当する意味であることを追加のセマンティックを持つ文字列"Friday"に伝える:

Today is <time datetime="2011-11-18">Friday</time>.

この例では、太平洋標準時で特定の時間を指定する:

Your next meeting is at <time datetime="2011-11-18T15:00-08:00">3pm</time>.

4.5.15 code要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

code要素は、コンピューターコードの断片を表す。これは、XML要素名、ファイル名、コンピュータープログラム、またはコンピューターが認識するだろう文字列であるかもしれない。

マークアップされているコンピューターコードの言語を示すための、正式な方法はない。使用される言語と一緒にcode要素をマークしたい著者は、たとえば構文強調表示スクリプトが正しい規則を使用できるように、たとえば要素に"language-"で始まるクラスを追加することによって、classを使用できる。

次の例は、句読点を含む、要素名とコンピューターコードをマークアップするために段落で要素が使用できる様子を示す。

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

次の例は、コードのブロックがpreおよびcode要素を用いてマークアップする方法を示す。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

クラスは、使用される言語を示すためにこの例で使用されている。

詳細については、pre要素を参照のこと。

4.5.16 var要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

var要素は変数を表す。これは、数式やプログラミングコンテキスト、定数を表す識別子、物理量を識別する記号、関数パラメーター、または単に文のプレースホルダーとして使用される用語で、実際に変数であるかもしれない。

次の段落で、文字"n"が文で変数として使用される:

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

数学について、具体的には最も簡潔な式の範囲を越えるすべてのものに対して、MathMLはより適切である。しかし、var要素は依然としてMathMLの表現で言及される特定の変数を参照するために使用できる。

この例において、式の中で変数を参照する説明とともに、式が示される。式そのものはMathMLでマークアップされるが、変数はvarを使用してfigureの凡例に記載される。

<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>

ここで、質量とエネルギーの等価性を記述する方程式は文中で使用され、そしてvar要素は、その式の変数と定数をマークするために使用される:

<p>Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.17 samp要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

samp要素は、サンプルまたは別のプログラムまたはコンピューティングシステムからの引用出力を表す

詳細については、preおよびkbd要素を参照のこと。

この要素は、ウェブアプリケーションで即時出力を提供するために使用できる、output要素と対比できる。

この例はインラインで使用されているsamp要素を示す:

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>

この2番目の例は、コンソールプログラム由来のサンプル出力のブロックを示す。ネストされたsampkbd要素は、スタイルシートを使用するサンプル出力の特定要素のスタイリングを可能にする。非常に正確なスタイリングを可能にするために、さらに詳細なマークアップ注釈を付けるsampの部分もある。これを達成するために、span要素が使用される。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

この3番目の例は、入力およびそのそれぞれの出力のブロックを示す。この例では、codesamp要素の両方を使用する。

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

4.5.18 kbd要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

kbd要素は、ユーザーの入力(この要素はまた、音声コマンドなど、他の入力を表すために使用されるかもしれないが、通常はキーボード入力)を表す

kbd要素がsamp要素内にネストされる場合、この要素はシステムによってエコーされたような入力を表す。

kbd要素がsamp要素を含む場合、この要素はメニュー項目を呼び出す例に対して、システムの出力に基づく入力を表す。

kbd要素が他のkbd要素内にネストされる場合、入力機構に応じて、実際のキーまたは入力の他の単独装置を表す。

ここで、kbd要素は押すべきキーを示すために使用される:

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

この2番目の例において、ユーザーは特定のメニュー項目を選択するように告げられる。外側のkbd要素は、入力のそれぞれ個別の手順を表す内側のkbd要素とともに、入力のブロックをマークアップし、それらの内側のsamp要素は、メニューラベルの場合では、手順がシステムによって表示されているものに基づいて入力されることを示す:

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

このような精密さは必要ない。以下で十分である。

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

4.5.19 subおよびsup要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

sup要素は、上付き文字を表しsub要素は、下付き文字を表す

これらの要素は、プレゼンテーションの目的に対する表記規則のためでなく、明確な意味を伴う表記規則をマークアップするためのみに使用しなければならない。たとえば、subおよびsup要素にLaTeX文書作成システムの名前に使用することは不適切だろう。一般に、これら要素の不在がコンテンツの意味を変更するような場合にのみ、著者はこれらの要素を使用すべきである。

特定の言語において、上付き文字は略語の表記規則の一部である。

<p>The most beautiful women are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

下付き文字を持つ変数に対して、sub要素はvar要素内で使用できる。

ここで、sub要素は変数群で変数を識別する添え字を表すために使用される:

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

数式は、しばしば上付き文字と下付き文字を使用する。著者は、数学的表現をマークアップするためにMathMLを使用するよう推奨されるが、詳細な数学的マークアップを望まない場合、著者はsubおよびsupを使用することを選んでもよい。[MATHML]

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>
f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

4.5.20 i要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

i要素は、代わりの声やムードでテキストの範囲を表すか、またはそうでなければ、たとえば分類学上の名称、専門用語、他言語の慣用句、意見、または西洋のテキストで船名など、異なる品質のテキストを示す方法で通常の文からのオフセットを表す。

主テキストと異なる言語の用語はlang属性(または、XMLでXML名前空間lang属性)で注釈を付けるべきである。

以下の例は、i要素の用法を示す:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

次の例において、夢の順序はi要素を用いてマークアップされる。

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

特定の用途のスタイル(たとえば、分類学上の用語でないものとしての夢の順序)が後日変更される場合、著者が各用途の注釈を文書全体(または関連する一連の文書)を検討する必要がないよう、著者は要素が使用されている理由を識別するためのi要素にclass属性を使用できる。

著者は、i要素よりもより適切な他の要素があるかどうか、たとえば、強調をマークアップするためのem要素、または用語の定義例をマークアップするためのdfn要素などを検討することを推奨する。

スタイルシートは、任意の要素が再スタイル付けできるように、i要素の書式を設定するために使用できる。したがって、この場合においてi要素のコンテンツが、必ずしもイタリック体であるとは限らない。

4.5.21 b要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

b要素は、たとえば、文書の概要でのキーワード、レビューでの製品名、対話的なテキスト駆動型ソフトウェアでの使用可能語、または記事リードなど、特別な重要性を伝えることなく、代わりの声やムードの意味合いなしに、実用的な目的に対して描かれている注目すべきテキストの範囲を表す

次の例は、重要なものとしてマークせずにキーワードを強調するためのb要素の使用方法を示す:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

次の例において、テキストアドベンチャー内のオブジェクトは、b要素を使用することにより、特別なものとして強調される。

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

b要素が適切であるもう一つのケースは、リード文または段落をマークアップである。次の例は、ウサギを養子にする子猫に関するBBCの記事をマークアップする様子を示す:

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

i要素と同様に、著者は、特定の用途のスタイルが後日変更される場合、著者が各用途の注釈を検討する必要がないよう、著者は要素が使用されている理由を識別するためのb要素にclass属性を使用できる。

他により適切な要素がない場合に、b要素は最後の手段として使用すべきである。具体的には、見出しはh1からh6までの要素を使用すべきであり、強調はem要素を使うべきであり、重要性はstrong要素で表されるべきであり、テキストのマークまたは強調は、mark要素を使用すべきである。

以下は、間違った使用法になる:

<p><b>WARNING!</b> Do not frob the barbinator!</p>

上の例において、使用すべき適切な要素はbではなく、strongだろう。

スタイルシートは、任意の要素が再スタイル付けできるように、b要素の書式を設定するために使用できる。したがって、この場合においてb要素のコンテンツが、必ずしも太字であるとは限らない。

4.5.22 u要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

u要素は、明示的にレンダリングされるが、非テキストの注釈、たとえば中国語のテキストで固有名詞(中国語の固有名詞のマーク)としてテキストを分類する、またはスペルミスとしてテキストを分類するような、明瞭に発音されないテキストの範囲を表す

ほとんどの場合、別の要素がより適切である可能性が高い。強調のマークアップに対してem要素を使用すべきであり、キーワードやフレーズに対して、コンテキストに応じてb要素かmark要素のいずれかを使用すべきであり、本のタイトルのマークアップに対してcite要素を使用すべきであり、明示的なテキスト注釈をもつテキストのラベル付けに対してruby要素を使用すべきであり、技術用語、分類学上の名称、音訳、意図、または西洋の文書で船名を標識するためにi要素を使用すべきである。

視覚プレゼンテーションでu要素の既定のレンダリングは、ハイパーリンク(下線)の慣習的なレンダリングと衝突する。著者は、ハイパーリンクと混同するかもしれないu要素を使用しないよう推奨する。

この例において、u要素は綴り間違いとして単語をマークするために使用される:

<p>The <u>see</u> is full of fish.</p>

4.5.23 mark要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

mark要素は、別のコンテキストにおいて関連性のために、参照目的でマークまたは強調表示されるある文書内の一連のテキストを表す。引用文または文から参照されるテキストのブロック内で使用される場合、ブロックが元々書かれた際に、元々存在しないが、オリジナルの著者によって重要だと考えられていないかもしれないだろう、テキストの一部に読者の注意を喚起するために追加されたハイライトを示す。この追加は、事前に予期しない精査である。文書の本文で使用した場合、ユーザーの現在のアクティビティーに関連性が高いために強調されている文書の一部を示す。

この例は、mark要素が引用の特定の部分に注意を喚起するために使用する様子を示す:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

(しかし、対象がスペルミスとして要素をマークしていた場合、おそらくclassをもつu要素がより適切だろう。)

mark要素のもう一つの例は、検索文字列に一致している文書の部分を強調することである。誰かが文書を見て、ユーザーが単語"kitten"を探していたことをサーバーが知っていた場合、サーバーは以下のような段落の変更とともに文書を返すかもしれない。

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

次の断片において、テキストの段落はコード断片の特定部分に言及する。

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

spanがより適切なため、これは構文の強調表示と区別される。両方組み合わせることで、次のようになるだろう:

<p>The highlighted part below is where the error lies:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
   <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

これは、オリジナルでは強調されない引用テキストの一部を強調するためにmarkの用途を示すもう一つの例である。この例において共通の表記規則は、イタリック体でレンダリングする引用文で明示的にmark要素で著者にスタイル付けをもたらす。

<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

ちなみに、この例においてem要素との区別は、引用されている元のテキストの一部であり、かつコメント部分を強調しているmark要素であることに注意する。

次の例は、テキストの範囲(mark)の関連性を示すことと対照的に、テキストの範囲(strong)の重要性を示すこととの違いを示す。これは、抽出物が試験の強調に関連する部分を持っていた教科書からの抜粋である。安全上の警告は重要であるかもしれないが、明らかに試験に関連しない。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.5.24 bdi要素

Spec bugs: 27475

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、dirグローバル属性は、この要素で特別なセマンティックスを持つ。
DOMインターフェイス
HTMLElementを使用する。

bdi要素は、双方向テキスト書式設定の意図に対してその周囲から分離されるべきテキストの範囲を表す[BIDI]

dirグローバル属性は、この要素上でデフォルトでautoとなる(他の要素と同様に、親要素から継承しない)。

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ

未知の方向とともにユーザー生成コンテンツを組み込む場合、この要素は特に便利である。

この例において、ユーザー名はユーザーが送信したポストの数とともに表示される。bdi要素が使用されなかった場合、アラビア語ユーザーのユーザー名は、テキストの区別がつかないことになるだろう(双方向アルゴリズムは、コロンと数字"3"の次に単語"posts"よりむしろ単語"User"を置くだろう)。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>
bdi要素を使用する場合、期待どおりにユーザー名が働く。
bdi要素がb要素で置換された場合、ユーザー名は双方向アルゴリズムを混乱させる可能性があり、3つ目の黒丸は、言って終わるだろう、アラビア語の名前(右から左)に続いて、"posts"に続き、"User 3 :"と言って終了する。

4.5.25 bdo要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、dirグローバル属性は、この要素で特別なセマンティックスを持つ。
DOMインターフェイス
HTMLElementを使用する。

bdo要素は、その子に対する明示的なテキスト方向の書式設定コントロールを表す。この要素は、作者が明示的に方向の上書きを指定することによって、Unicode双方向アルゴリズムを上書きできる。[BIDI]

著者は、左から右への上書きを指定する値ltrと、右から左への上書きを指定する値rtlとともに、この要素のdir属性を指定しなければならない。auto値は指定されてはならない。

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ

4.5.26 span要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLSpanElement : HTMLElement {};

span要素はそれ自身では何の意味もないが、たとえばclasslang、またはdirなどのグローバル属性とともに使用する場合に役立つ。この要素は、要素の子を表す

この例において、コード断片は、そのキーワードと識別子がCSSで色分けできるように、span要素とclass属性を使ってマークアップされる:

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>

4.5.27 br要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
DOMインターフェイス
[HTMLConstructor]
interface HTMLBRElement : HTMLElement {};

br要素は改行を表す

改行は通常、後続のテキストを新しい行へ物理的に移動することによって視覚メディアで表現される一方で、スタイルシートまたはユーザーエージェントは、たとえば緑のドットとして、または余分な物として、異なる方法でレンダリングされるために改行しつつ均等に割り付けるかもしれない。

br要素は、詩やアドレスのように、実際にコンテンツの一部である改行のためにのみに使用されなければならない。

次の例は、br要素の正しい使い方である:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br要素は、段落でテーマ別グループを分離するために使用してはならない。

これらはbr要素を濫用するので、次の例は非適合である:

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

これは、上記の代わりに正しいものである:

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

段落が単一のbr要素を除いて何も構成しない場合、プレースホルダーの空白行を(たとえば、テンプレート内)を表す。そのような空白行は、プレゼンテーションの目的に対して使用してはならない。

br要素内部のすべてのコンテンツは、周囲のテキストの一部とみなされてはならない。

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ

4.5.28 wbr要素

Support: wbr-elementChrome for Android 57+Chrome 4+UC Browser for Android 11.4+iOS Safari 5.0+Firefox 2+IE NoneSamsung Internet 4+Opera Mini all+Android Browser 2.3+Edge 12+Safari 3.2+Opera 9.5+

Source: caniuse.com

カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
DOMインターフェイス
HTMLElementを使用する。

wbr要素は改行の機会を表す

次の例において、効果があるように一つの長い単語として書かれる発言としてある人が引用される。しかし、テキストが読める形に包まれることを保証するために、引用内の個別の単語はwbr要素を使用して分離される。

<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

wbr要素内部のすべてのコンテンツは、周囲のテキストの一部とみなされてはならない。

var wbr = document.createElement("wbr");
wbr.textContent = "This is wrong";
document.body.appendChild(wbr);

この要素は、双方向アルゴリズムに関わる要件をレンダリングを持つ

4.5.29 使用方法の概要

この節は非規範的である。

要素 目的
a ハイパーリンク
Visit my <a href="drinks.html">drinks</a> page.
em 強調
I must say I <em>adore</em> lemonade.
strong 重要
This tea is <strong>very hot</strong>.
small サイドコメント
These grapes are made into wine. <small>Alcohol is addictive.</small>
s 正確でないテキスト
Price: <s>£4.50</s> £2.00!
cite 作品のタイトル
The case <cite>Hugo v. Danielle</cite> is relevant here.
q 引用文
The judge said <q>You can drink water from the fish tank</q> but advised against it.
dfn 定義例
The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.
abbr 略語
Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.
ruby, rt, rp ルビ注釈
<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>
data 等価な機械可読形式
Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>
time 日付または時間関連データの等価な機械可読形式
Available starting on <time datetime="2011-11-18">November 18th</time>!
code コンピューターコード
The <code>fruitdb</code> program can be used for tracking fruit production.
var 変数
If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.
samp コンピューター出力
The computer said <samp>Unknown error -3</samp>.
kbd ユーザー入力
Hit <kbd>F1</kbd> to continue.
sub 下付き文字
Water is H<sub>2</sub>O.
sup 上付き文字
The Hydrogen in heavy water is usually <sup>2</sup>H.
i 代替音声
Lemonade consists primarily of <i>Citrus limon</i>.
b キーワード
Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.
u 注釈
The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.
mark ハイライト
Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.
bdi テキスト方向の分離
The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>.
bdo テキスト方向形式
The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>"
span その他
In French we call it <span lang="fr">sirop de sureau</span>.
br 改行
Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A.
wbr 改行の機会
www.simply<wbr>orange<wbr>juice.com

4.6.1 導入

リンクは、aarealink要素で作成される概念的な構造で、2つのリソース(このうち1つは現在のDocument)の関係りを表す。HTMLには2種類のリンクがある:

外部リソースへのリンク

これは、現在の文書を補足する他のリソースへのリンクであり、多くの場合、ユーザーエージェントによって自動的に処理される。

ハイパーリンク

これは、通常ユーザーエージェントによってユーザーに向けて示されるリンクである。これによりユーザーは、たとえばブラウザーでのアクセスやダウンロードのような、ユーザーエージェントにリンクのリソースをナビゲートさせることができる。

href属性とrel属性を同時に持つlink要素に対しては、リンクタイプの節における定義に従って、rel属性のキーワードが示す関係に見合ったリンクが作られなければならない。

href属性とrel属性を同時に持つa要素、area要素に対しても同様に、リンクタイプの節における定義に従って、rel属性のキーワードが示す関係に見合ったリンクが作られなければならない。ただし、link要素と異なり、 rel属性を持たず、rel属性がハイパーリンクを生成すると定義される値も持たない、href属性を持つa要素やarea要素もまた、ハイパーリンクを作成しなければならない。このように暗黙の内に生成されるハイパーリンクは、リンク元の文書をhref属性によって示されるノード文書と結びつけること以上の意味を持たない(リンクタイプを持たない)。

ハイパーリンクは、そのハイパーリンクのセマンティックスの処理を修正するハイパーリンク注釈を1つ以上つけることができる。

aおよびarea要素のhref属性は、潜在的にスペースで囲まれた妥当なURLである値でなければならない。

aおよびarea要素のhrefは必要としない。要素がhref属性を持たない場合、ハイパーリンクを作成しない。

target属性が存在する場合、その値は妥当なブラウジングコンテキスト名かキーワードでなければならない。これは、使用されるブラウジングコンテキストの名前を表す。ハイパーリンクを辿る場合にユーザーエージェントはこの名前を使用する。

aまたはarea要素の活性化挙動が呼び出される場合、ユーザーエージェントは、ユーザーにハイパーリンクがナビゲーションに対して使用されるかどうか、または要素が指定するリソースをダウンロードするかどうかについての好みを示すことを可能にする。

ユーザー設定が存在しない限り、デフォルトは、要素がdownload属性を持たない場合、ナビゲーションであるべきであり、属性を持つ場合、指定されたリソースをダウンロードするべきである。

ユーザーの好みによって決定されるか属性の有無を介してか属性の不在かどうか、判定がナビゲーションのハイパーリンクを使用する場合、ユーザーエージェントはハイパーリンクをたどらなければならず、決定がリソースをダウンロードするためにハイパーリンクを使用する場合、ユーザーエージェントはハイパーリンクをダウンロードしなければならない。これらの用語は、後続のセクションで定義される。

download属性が存在する場合、著者はリソースをダウンロードするために使用されるハイパーリンクを意図することを示す。属性は値を持ってもよい。値が存在する場合、ローカルファイルシステムでリソースの標識付けに使用するための著者に推奨されるデフォルトのファイル名を指定する。許可される値に制限はないが、ほとんどのファイルシステムが句読点をファイル名にサポートするものに関して制限があるため、ユーザーエージェントはそれに応じてファイル名を調整する可能性を著者に警告する。

ping属性が存在する場合は、ユーザーがハイパーリンクを辿る場合に、通知されることに興味を持つリソースのURLを与える。値は、それぞれのschemeHTTP(S) スキーマとなる妥当な空でないURLでなければならない、スペース区切りトークンのセットでなければならない。値は、ハイパーリンク監査に対してユーザーエージェントによって使用される。

Support: pingChrome for Android 57+Chrome 15+UC Browser for Android 11.4+iOS Safari 5.0+Firefox NoneIE NoneSamsung Internet 4+Opera Mini NoneAndroid Browser 4.4+Edge NoneSafari 6+Opera 15+

Source: caniuse.com

a要素およびarea要素が作成するリンクタイプはrel属性値によって決定される。その属性値は、スペース区切りのトークンのセットでなければならない。使用できるキーワードと値が持つ意味は後述する。

relサポートトークンは、aおよびarea要素で許可されるHTMLリンクタイプで定義されるキーワードであり、処理モデルに影響を与え、ユーザーエージェントによってサポートされる。可能性のあるサポートされるトークンは、noreferrerおよびnoopenerである。relサポートされるトークンは、ユーザーエージェントが処理モデルを実装する、このリスト由来のトークンのみを含めなければならない。

Other specifications may add HTML link types as defined in Other link types, with the following additional requirements:

rel属性は初期値を持たない。そのため、rel属性が省略される、またはrel属性がユーザーエージェントに認識される属性値を持たない場合、文書は、リンク先リソースとの間にハイパーリンクが存在すること以外に特別な関係を持たない。

存在する場合、ハイパーリンクを作成するa要素のhreflang属性は、リンク先リソースの言語を与える。これは単なる助言である。値は、妥当なBCP 47言語タグでなければならない。[BCP47] ユーザーエージェントは、この属性を権威あるものと見なしてはならない―リソースを取得する際に、ユーザーエージェントは、リソースへのリンクに含まれるメタデータでない、その言語を判断するためにリソースに関連付けられる言語情報のみを使用しなければならない。

type属性が存在する場合、この属性はリンク先のリソースのMIMEタイプを表す。これは単なる助言である。値は妥当なMIMEタイプでなければならない。ユーザーエージェントは、typeを権威あるものと見なしてはならない―リソースを取得する際に、ユーザーエージェントは、そのタイプを決定するためにリソースへのリンクに含まれるメタデータを使用してはならない。

referrerpolicy属性は、リファラポリシー属性である。その目的は、ハイパーリンクを辿る際に使用されるリファラポリシーを設定することにある。[REFERRERPOLICY]

4.6.3 aおよびarea要素に対するAPI

[NoInterfaceObject]
interface HTMLHyperlinkElementUtils {
  [CEReactions] stringifier attribute USVString href;
  readonly attribute USVString origin;
  [CEReactions] attribute USVString protocol;
  [CEReactions] attribute USVString username;
  [CEReactions] attribute USVString password;
  [CEReactions] attribute USVString host;
  [CEReactions] attribute USVString hostname;
  [CEReactions] attribute USVString port;
  [CEReactions] attribute USVString pathname;
  [CEReactions] attribute USVString search;
  [CEReactions] attribute USVString hash;
};
hyperlink . toString()
hyperlink . href

ハイパーリンクのURLを返す。

URLを変更する設定が可能である。

hyperlink . origin

ハイパーリンクのURLの生成元を返す。

hyperlink . protocol

ハイパーリンクのURLのスキームを返す。

URLのスキームを変更する設定が可能である。

hyperlink . username

ハイパーリンクのURLのユーザー名を返す。

URLのユーザー名を変更する設定が可能である。

hyperlink . password

ハイパーリンクのパスワードのユーザー名を返す。

URLのパスワードを変更する設定が可能である。

hyperlink . host

ハイパーリンクのURLのホストおよびポート(スキームに対するデフォルトのポートと異なる場合)を返す。

URLのホストおよびポートを変更する設定が可能である。

hyperlink . hostname

ハイパーリンクのURLのホストを返す。

URLのホストを変更する設定が可能である。

hyperlink . port

ハイパーリンクのURLのポートを返す。

URLのポートを変更する設定が可能である。

hyperlink . pathname

ハイパーリンクのURLのパスを返す。

URLのパスを変更する設定が可能である。

hyperlink . search

ハイパーリンクのURLのクエリー(空でない場合先頭の"?"を含む)を返す。

URLのクエリー(先頭の"?"を無視する)を変更する設定が可能である。

hyperlink . hash

ハイパーリンクのURLのフラグメント(空でない場合先頭の"#"を含む)を返す。

URLのフラグメント(先頭の"?"を無視する)を変更する設定が可能である。

An element implementing the HTMLHyperlinkElementUtils mixin has an associated url (null or a URL). It is initially null.

An element implementing the HTMLHyperlinkElementUtils mixin has an associated set the url algorithm, which runs these steps:

  1. If this element's href content attribute is absent, set this element's url to null.

  2. Otherwise, parse this element's href content attribute value relative to this element's node document. If parsing is successful, set this element's url to the result; otherwise, set this element's url to null.

When elements implementing the HTMLHyperlinkElementUtils mixin are created, and whenever those elements have their href content attribute set, changed, or removed, the user agent must set the url.

This is only observable for blob: URLs as parsing them involves a Blob URL Store lookup.

An element implementing the HTMLHyperlinkElementUtils mixin has an associated reinitialize url algorithm, which runs these steps:

  1. If element's url is non-null, its scheme is "blob", and its cannot-be-a-base-URL flag is set, terminate these steps.

  2. Set the url.

To update href, set the element's href content attribute's value to the element's url, serialized.


The href attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null and this element has no href content attribute, return the empty string.

  4. Otherwise, if url is null, return this element's href content attribute's value.

  5. Return url, serialized.

The href attribute's setter must set this element's href content attribute's value to the given value.

The origin attribute's getter must run these steps:

  1. Reinitialize url.

  2. If this element's url is null, return the empty string.

  3. Return the Unicode serialization of this element's url's origin.

It returns the Unicode rather than the ASCII serialization for compatibility with MessageEvent.

The protocol attribute's getter must run these steps:

  1. Reinitialize url.

  2. If this element's url is null, return ":".

  3. Return this element's url's scheme, followed by ":".

The protocol attribute's setter must run these steps:

  1. Reinitialize url.

  2. If this element's url is null, terminate these steps.

  3. Basic URL parse the given value, followed by ":", with this element's url as url and scheme start state as state override.

    Because the URL parser ignores multiple consecutive colons, providing a value of "https:" (or even "https::::") is the same as providing a value of "https".

  4. Update href.

The username attribute's getter must run these steps:

  1. Reinitialize url.

  2. If this element's url is null, return the empty string.

  3. Return this element's url's username.

The username attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null or url cannot have a username/password/port, then return.

  4. Set the username, given url and the given value.

  5. Update href.

The password attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null, then return the empty string.

  4. Return url's password.

The password attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null or url cannot have a username/password/port, then return.

  4. Set the password, given url and the given value.

  5. Update href.

The host attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url or url's host is null, return the empty string.

  4. If url's port is null, return url's host, serialized.

  5. Return url's host, serialized, followed by ":" and url's port, serialized.

The host attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null or url's cannot-be-a-base-URL flag is set, terminate these steps.

  4. Basic URL parse the given value, with url as url and host state as state override.

  5. Update href.

The hostname attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url or url's host is null, return the empty string.

  4. Return url's host, serialized.

The hostname attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null or url's cannot-be-a-base-URL flag is set, terminate these steps.

  4. Basic URL parse the given value, with url as url and hostname state as state override.

  5. Update href.

The port attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url or url's port is null, return the empty string.

  4. Return url's port, serialized.

The port attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null or url cannot have a username/password/port, then return.

  4. If the given value is the empty string, then set url's port to null.

  5. Otherwise, basic URL parse the given value, with url as url and port state as state override.

  6. Update href.

The pathname attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null, return the empty string.

  4. If url's cannot-be-a-base-URL flag is set, return the first string in url's path.

  5. If url's path is empty, then return the empty string.

  6. Return "/", followed by the strings in url's path (including empty strings), separated from each other by "/".

The pathname attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null or url's cannot-be-a-base-URL flag is set, terminate these steps.

  4. Set url's path to the empty list.

  5. Basic URL parse the given value, with url as url and path start state as state override.

  6. Update href.

The search attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null, or url's query is either null or the empty string, return the empty string.

  4. Return "?", followed by url's query.

The search attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null, terminate these steps.

  4. If the given value is the empty string, set url's query to null.

  5. Otherwise:

    1. Let input be the given value with a single leading "?" removed, if any.

    2. Set url's query to the empty string.

    3. Basic URL parse input, with url as url and query state as state override, and this element's node document's document's character encoding as encoding override.

  6. Update href.

The hash attribute's getter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null, or url's fragment is either null or the empty string, return the empty string.

  4. Return "#", followed by url's fragment.

The hash attribute's setter must run these steps:

  1. Reinitialize url.

  2. Let url be this element's url.

  3. If url is null, then return.

  4. If the given value is the empty string, set url's fragment to null.

  5. Otherwise:

    1. Let input be the given value with a single leading "#" removed, if any.

    2. Set url's fragment to the empty string.

    3. Basic URL parse input, with url as url and fragment state as state override.

  6. Update href.

Spec bugs: 28925

When a user follows a hyperlink created by an element subject, optionally with a hyperlink suffix, the user agent must run the following steps:

  1. Let replace be false.

  2. Let source be subject's node document's browsing context.

  3. If the user indicated a specific browsing context when following the hyperlink, or if the user agent is configured to follow hyperlinks by navigating a particular browsing context, then let target be that browsing context. If this is a new top-level browsing context (e.g. when the user followed the hyperlink using "Open in New Tab"), then source must be set as the new browsing context's one permitted sandboxed navigator.

    Otherwise, if subject is an a or area element that has a target attribute, then let target be the browsing context that is chosen by applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute as the browsing context name. If these rules result in the creation of a new browsing context, set replace to true.

    Otherwise, if target is an a or area element with no target attribute, but the Document contains a base element with a target attribute, then let target be the browsing context that is chosen by applying the rules for choosing a browsing context given a browsing context name, using the value of the target attribute of the first such base element as the browsing context name. If these rules result in the creation of a new browsing context, set replace to true.

    Otherwise, let target be source.

  4. If subject's link types include the noreferrer or noopener keyword, and replace is true, then disown target's opener.

  5. Parse the URL given by subject's href attribute, relative to subject's node document.

  6. If that is successful, let URL be the resulting URL string.

    Otherwise, if parsing the URL failed, the user agent may report the error to the user in a user-agent-specific manner, may queue a task to navigate the target browsing context to an error page to report the error, or may ignore the error and do nothing. In any case, the user agent must then abort these steps.

  7. If there is a hyperlink suffix, append it to URL.

  8. Let resource be a new request whose url is URL and whose referrer policy is the current state of subject's referrerpolicy content attribute.

  9. Queue a task to navigate the target browsing context to resource. If replace is true, the navigation must be performed with replacement enabled. The source browsing context must be source.

The task source for the tasks mentioned above is the DOM manipulation task source.

4.6.5 リソースのダウンロード

Support: downloadChrome for Android 57+Chrome 14+UC Browser for Android 11.4+iOS Safari NoneFirefox 20+IE NoneSamsung Internet 4+Opera Mini NoneAndroid Browser 4.4+Edge 13+Safari 10.1+Opera 15+

Source: caniuse.com

リソースには、すぐに閲覧されるのではなく、後に使用されることが意図されているものもある。そのような意図を示すために、問題のリソースへのハイパーリンクを作成するa要素やarea要素にdownload属性を指定できる。

また、この属性は、ユーザーエージェントがファイルシステムにリソースを保存する際に用いるファイル名を値として持つことができる。この値は`Content-Disposition` HTTPヘッダーのfilenameパラメーターによって上書きされることがある。[RFC6266]

クロスオリジンの場合、ユーザーに悪意があるだろう挙動の警告を回避するために、download属性は`Content-Disposition` HTTPヘッダー(具体的にはattachmentディスポジションタイプ)と組み合わせる必要がある。(これは、重要な個人情報や機密情報の意図しないダウンロードからユーザーを保護するものである。)


When a user downloads a hyperlink created by an element subject, optionally with a hyperlink suffix, the user agent must run the following steps:

  1. Parse the URL given by subject's href attribute, relative to subject's node document.

  2. If parsing the URL fails, the user agent may report the error to the user in a user-agent-specific manner, may navigate to an error page to report the error, or may ignore the error and do nothing. In either case, the user agent must abort these steps.

  3. Otherwise, let URL be the resulting URL string.

  4. If there is a hyperlink suffix, append it to URL.

  5. Return to whatever algorithm invoked these steps and continue these steps in parallel.

  6. Let request be a new request whose url is URL, client is entry settings object, initiator is "download", destination is the empty string, and whose synchronous flag and use-URL-credentials flag are set.

  7. Handle the result of fetching request as a download.

When a user agent is to handle a resource obtained from a fetch as a download, it should provide the user with a way to save the resource for later use, if a resource is successfully obtained; or otherwise should report any problems downloading the file to the user.

ユーザーエージェントがダウンロードとして処理されているリソースに対するファイル名を必要とする場合、ユーザーエージェントは以下のアルゴリズムを使用して1つを選択すべきである。

このアルゴリズムは、信頼できないサイトからファイルをダウンロードすることに関与するセキュリティー危険性を軽減するために意図され、そしてユーザーエージェントはアルゴリズムに追従するように強く促される。

  1. filenameをvoidの値にする。

  2. リソースが`Content-Disposition`ヘッダーを持ち、そのヘッダーがattachment dispositionタイプを指定し、かつヘッダーがファイル名情報を含む場合、filenameにヘッダーで指定される値を持たせ、かつ以下のサニタイズで標識されるステップにジャンプする。[RFC6266]

  3. もしあれば、interface originを、開始されたダウンロードをもたらすダウンロードするまたはナビゲートする行動で、ダウンロードDocument生成元にする。

  4. もしあれば、resource origininterface originと同じにする場合に、そのURLのスキームコンポーネントがdataである場合を除き、resource originをダウンロードされていたリソースのURLの生成元にする。

  5. interface originがない場合、trusted operationをtrueにする。そうでなければ、resource origininterface origin同一生成元である場合にtrusted operationをtureにし、そうでなければfalseにする。

  6. trusted operationがtrueでありかつリソースが`Content-Disposition`ヘッダーを持ちかつそのヘッダーがファイル名情報を含む場合、filenameはヘッダーで指定される値を持たせ、かつ以下のサニタイズで標識されるステップにジャンプする。[RFC6266]

  7. ダウンロードがaまたはarea要素によって作成されるハイパーリンクから開始されなかった場合、またはダウンロードが開始された際にダウンロードが開始されたハイパーリンクの要素がdownload属性を持っていなかった場合、またはダウンロードが開始された際にそのような属性があったがその値が空文字列であった場合、提案されるファイル名なしのラベルが付けられたステップにジャンプする。

  8. proposed filenameにダウンロードが開始された時点でダウンロードを開始したハイパーリンクの要素のdownload属性の値を持たせる。

  9. trusted operationがtrueである場合、filenameproposed filenameの値を持たせ、かつ以下のサニタイズで標識されるステップにジャンプする。

  10. リソースが`Content-Disposition`ヘッダーを持ちかつそのヘッダーがattachment dispositionタイプを指定する場合、filenameproposed filenameの値を持たせ、かつ以下のサニタイズで標識されるステップにジャンプする。[RFC6266]

  11. 提案ファイル名なしtrusted operationがtrueである場合、またはユーザーがダウンロードする問題のリソースを持つための好みを示す場合、filenameをユーザーエージェント定義の方法でリソースのURLから得られる値を持たせ、かつ以下のサニタイズで標識されるステップにジャンプする。

  12. ユーザーエージェント定義の方法の動作は、潜在的に敵対的なクロスオリジンのダウンロードからユーザーを保護する。ダウンロードが中断されるようにされない場合、filenameを、ユーザーの好みのファイル名またはユーザーエージェントによって選択されるファイル名に設定させ、かつ以下のサニタイズで標識されるステップにジャンプする。

    アルゴリズムがこのステップに到達する場合、ダウンロードはダウンロードされているリソースとは異なる生成元から始まり、生成元はダウンロードするために適切なファイルとしてマークされず、そしてダウンロードはユーザーによって開始されなかった。これは、download属性がダウンロードをトリガするために使用されたため、または問題のリソースがユーザーエージェントがサポートする形式ではないためである。

    たとえば、敵対的なサーバーが、ユーザーをだまして敵対的なサーバーに由来するデータを考えさせることで、知らないうちに個人情報をダウンロードして敵対的なサーバーに再アップロードするために、ユーザーを取得しようとしている可能性があるため、これは危険であるかもしれない。

    したがって、何らかの形で、問題のリソースが全く異なるソースから来て、混乱を防ぐために、潜在的に敵対的なinterface originからの推奨されるファイル名は無視されるべきであることがユーザーに通知されることは、ユーザーの利益になる。

  13. サニタイズ:必要に応じて、ユーザーにfilenameに影響を与えることを可能にする。たとえば、ユーザーエージェントは、デフォルト値として上記で決定されるようなfilenameの値を潜在的に提供する、ファイル名をユーザーに促すことができる。

  14. ローカルファイルシステムに適するようにfilenameを調整する。

    たとえば、これはファイル名で正当でない文字を削除する、または先頭と末尾の空白をトリミングすることを伴う可能性がある。

  15. プラットフォームの規約がファイルシステム上のファイルの種類を決定するために一切拡張子を使用しない場合、ファイル名としてfilenameを返し、この手順を中止する。

  16. いずれかがわかっている場合は記載のタイプは、リソースのContent-Typeメタデータによってclaimed typeとする。いずれかが既知である場合、named typefilename拡張子によって指定された種類とする。この手順の目的のために、タイプ拡張子へのMIMEタイプのマッピングである。

  17. (たとえば、filenameがユーザーにメッセージを表示することによって決定されるなど)named typeがユーザーの好みと一致する場合、ファイル名としてfilenameを返し、この手順を中止する。

  18. claimed typenamed typeが同じ型である(すなわちリソースのContent-Typeメタデータによって与えられる型がfilename拡張子によって与えられる型と一致する)場合、ファイル名としてfilenameを返し、この手順を中止する。

  19. claimed typeが既知である場合、claimed typeに対応する拡張子を追加するためにfilenameを変更する。

    そうでなければ、named typeが潜在的に危険であることが既知である(たとえば、ネイティヴ実行可能ファイル、シェルスクリプト、HTMLアプリケーション、または実行可能なマクロ対応文書としてプラットフォームの規則によって処理される)場合、既知の安全な拡張子を追加するために必要に応じてfilenameを変更する(たとえば、".txt")。

    この最後の手順は、望ましくないかもしれない、実行可能ファイルをダウンロードすることを不可能にする。いつものように、実装者は、この問題でセキュリティーとユーザビリティーのバランスをとることを余儀なくされる。

  20. ファイル名としてfilenameを返す。

このアルゴリズムのために、ファイル拡張子は、ファイルの種類を識別するために使用されるプラットフォームの規則が指示するファイル名のいずれかの部分で構成される。たとえば、多くのオペレーティングシステムは、ファイルの種類およびファイルを開くまたは実行する方法を決定するためにファイル名でファイル名の後に最後のドット(".")の部分を使用する。

ユーザーエージェントは、ユーザーのファイルシステム内のもたらされるファイルを格納する場所を決定する際に、リソース自身、リソースのURL、および任意のdownload属性によって提供される任意のディレクトリーまたはパスの情報を無視すべきである。

Spec bugs: 24137

If a hyperlink created by an a or area element has a ping attribute, and the user follows the hyperlink, and the value of the element's href attribute can be parsed, relative to the element's node document, without failure, then the user agent must take the ping attribute's value, split that string on ASCII whitespace, parse each resulting token relative to the element's node document, and then run these steps for each resulting URL record ping URL, ignoring tokens that fail to parse:

  1. If ping URL's scheme is not an HTTP(S) scheme, then abort these steps.

  2. Optionally, abort these steps. (For example, the user agent might wish to ignore any or all ping URLs in accordance with the user's expressed preferences.)

  3. Let request be a new request whose url is ping URL, method is `POST`, body is `PING`, client is the environment settings object of the Document containing the hyperlink, destination is the empty string, credentials mode is "include", referrer is "no-referrer", and whose use-URL-credentials flag is set.

  4. Let target URL be the resulting URL string obtained from parsing the value of the element's href attribute and then:

    If the URL of the Document object containing the hyperlink being audited and ping URL have the same origin
    If the origins are different, but the HTTPS state of the Document containing the hyperlink being audited is "none"
    request must include a `Ping-From` header with, as its value, the URL of the document containing the hyperlink, and a `Ping-To` HTTP header with, as its value, the target URL.
    そうでなければ
    request must include a `Ping-To` HTTP header with, as its value, target URL. request does not include a `Ping-From` header.
  5. Fetch request.

This may be done in parallel with the primary fetch, and is independent of the result of that fetch.

User agents should allow the user to adjust this behavior, for example in conjunction with a setting that disables the sending of HTTP `Referer` (sic) headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the list (e.g. ignoring any third-party URLs); this is explicitly accounted for in the steps above.

User agents must ignore any entity bodies returned in the responses. User agents may close the connection prematurely once they start receiving a response body.

When the ping attribute is present, user agents should clearly indicate to the user that following the hyperlink will also cause secondary requests to be sent in the background, possibly including listing the actual target URLs.

For example, a visual user agent could include the hostnames of the target ping URLs along with the hyperlink's actual URL in a status bar or tooltip.

ping属性は、オフサイトのリンクが最も人気のあるウェブページに追跡させる、または広告主にクリックスルー率を追跡させる、HTTPリダイレクトやJavaScriptなどの既存の技術と冗長である。

しかし、ping属性は、ユーザーにこれらの代替以上の利点を提供する:

このように、pingはこの機能をもたないユーザーを追跡することが可能である一方で、著者はユーザーエージェントがユーザーエクスペリエンスをより透明にすることができるようにping属性を使用することを勧める。

4.6.6 リンクタイプ

次の表は、対応するキーワードで、この仕様書で定義されるリンクタイプを要約したものである。この表は規範的なものではない。リンクタイプに対する実際の定義は、次節以降に示されている。

この節において、参照される文書とは、リンクを表す要素によって識別されるリソースを指し、現在の文書とは、リンクを表す文書自身のリソースを指す。

To determine which link types apply to a link, a, or area element, the element's rel attribute must be split on ASCII whitespace. 得られたトークンは、その要素に適用されるリンクタイプに対するキーワードである。

別の方法で指定されない限り、1つのrel属性に対してキーワードを複数指定してはならない。

下記テーブルに続くセクションの一部は、特定のキーワードのためのシノニムを列挙する。指示されたシノニムは、ユーザーエージェントによって指定されるように処理されるが、文書で使用されてはならない(たとえば、キーワード"copyright")。

キーワードは常にASCII大文字・小文字不区別であり、そのように比較されなければならない。

つまり、rel="next"rel="NEXT"は同義である。

body-okであるキーワードは、link要素がbody内で許可されるかどうかに影響を与える。この仕様によって定義されるbody-okキーワードは、pingbackpreconnectprefetchpreloadprerender、およびstylesheetである。他の仕様もbody-okキーワードを定義することができる。

リンクタイプ効果body-ok概要
linkaarea
alternateハイパーリンクハイパーリンク · 現在の文書の代替表現を与える。
canonicalハイパーリンク使用不可 · Gives the preferred URL for the current document.
authorハイパーリンクハイパーリンク · 現在の文書または記事の著者へのリンクを与える。
bookmark使用不可ハイパーリンク · 最も近い祖先セクションへのパーマリンクを与える。
dns-prefetch外部リソース使用不可 Yes ユーザーエージェントがターゲットリソースの生成元のDNS解決を先制して実行するように指定する。
external使用不可注釈 · 参照される文書が現在の文書と同じサイトの一部でないことを示す。
helpハイパーリンクハイパーリンク · コンテキストに応じたヘルプへのリンクを提供する。
icon外部リソース使用不可 · 現在の文書を表現するアイコンを取り込む。
licenseハイパーリンクハイパーリンク · 参照される文書で説明される著作権許諾で保護される現在の文書のメインコンテンツを示す。
nextハイパーリンクハイパーリンク · 現在の文書があるシリーズの一部であり、かつそのシリーズの次の文書が参照される文書であることを示す。
nofollow使用不可注釈 · 現在の文書の原作者や発行者が参照される文書を推奨しないことを示す。
noopener使用不可注釈 · Requires any browsing context created by following the hyperlink to disown its opener.
noreferrer使用不可注釈 · ユーザーがハイパーリンクをたどる際にユーザーエージェントがHTTP `Referer`ヘッダーを送信しないよう要求する。
pingback外部リソース使用不可 Yes 現在の文書にpingbackを扱うpingbackサーバーのアドレスを与える。
preconnect外部リソース使用不可 Yes ユーザーエージェントがターゲットリソースの生成元に先制して接続すべきであると指定する。
prefetch外部リソース使用不可 Yes ユーザーエージェントが先制してフェッチし、フォローアップナビゲーションに必要とされる可能性があるとして、ターゲットリソースをキャッシュすべきであると指定する。
preload外部リソース使用不可 Yes ユーザーエージェントが先制フェッチし、as属性(およびその宛先に関連付けられた優先度)によって与えられた宛先に応じて、現在のナビゲーションに対するターゲットリソースをキャッシュすべきであると指定する。
prerender外部リソース使用不可 Yes ユーザーエージェントがターゲットリソースを先制フェッチし、将来的により高速な応答を提供するのに役立つように処理すできであると指定する。
prevハイパーリンクハイパーリンク · 現在の文書があるシリーズの一部であり、かつそのシリーズの前の文書が参照される文書であることを示す。
searchハイパーリンクハイパーリンク · 現在の文書と関連する文書を通して検索に使用できるリソースへのリンクを与える。
serviceworkerハイパーリンク使用不可 · Declares a service worker registration.
stylesheet外部リソース使用不可 Yes スタイルシートを取り込む。
tag使用不可ハイパーリンク · 現在の文書に適用される(与えられたアドレスにより識別される)タグを与える。
4.6.6.1 リンクタイプ"alternate"

alternateキーワードは、linkaarea要素で使用してもよい。

このキーワードの意味は、他の属性値に依存する。

要素がlinkでありrel属性がまたstylesheetキーワードを含む場合

alternateキーワードはstylesheetキーワードの意味を定められた方法で書き換える。alternateキーワード自身はリンクを生成しない。

ここで、link要素のセットは、スタイルシートを提供する:

<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">
alternateキーワードがapplication/rss+xmlまたはapplication/atom+xmlを値に持つtype属性とともに用いられている場合

配信フィードへのハイパーリンクを作成する(ただし現在のページと全く同じものが配信されるとは限らない)。

For the purposes of feed autodiscovery, user agents should consider all link elements in the document with the alternate keyword used and with their type attribute set to the value application/rss+xml or the value application/atom+xml. If the user agent has the concept of a default syndication feed, the first such element (in tree order) should be used as the default.

次のlink要素は、ブログにシンジケーションフィードを提供する:

<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">
<link rel="alternate" type="application/atom+xml" href="posts.xml?category=robots" title="Cool Stuff Blog: robots category">
<link rel="alternate" type="application/atom+xml" href="comments.xml" title="Cool Stuff Blog: Comments">

そのようなlink要素は、(該当する場合に)最初のデフォルトであるものをもつ、フィード自動検出に従事するユーザーエージェントによって使用される。

次の例は、a要素を使用して、ユーザーにさまざまな異なるシンジケーションフィードを提案する:

<p>You can access the planets database using Atom feeds:</p>
<ul>
 <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
 <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
 <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
</ul>

これらのリンクは、フィードの自動検出に使用されない。

そうでなければ

現在の文書の代替表現を参照するハイパーリンクを作成する。

参照される文書の性質は、hreflang属性、およびtype属性で与えられる。

alternateキーワードがhreflang属性とともに用いられ、かつその属性の値が文書要素言語と異なる場合、参照される文書が翻訳であることを示す。

alternateキーワードがtype属性とともに用いられる場合、参照される文書は現在の文書を指定されたフォーマットに変換したものであることを示す。

hreflang、およびtype属性は、alternateキーワードとともに指定される場合、組み合わせて使用できる。

次の例は、別の形式を使用する、他言語向け、他のメディアのために意図されているページのバージョンをどのように指定できるかを示す:

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

このキーワードが示す関係は、遷移的である。つまり、ある文書が他の2つの文書にリンクタイプ"alternate"でリンクする場合、2つの文書が最初の文書の代替表現を意味することに加えて、2つの文書もまた互いに代替表現の関係にあることを示す。

authorキーワードはlinkaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

aareaの各要素に対して、authorキーワードは、参照される文書が著者に関するより詳しい情報の提供を示す。ここでの著者とは、存在する場合、ハイパーリンクを定義する要素の先祖要素にあたる直近のarticle要素の著者であり、存在しない場合はその文書全体の著者である。

link要素に対して、authorキーワードは、参照される文書がページ全体の著者に関するより詳しい情報の提供を示す。

"参照される文書"には、著者のメールアドレスを指示するmailto: URLを用いることが可能である。多くの場合、この形態が用いられる。[MAILTO]

シノニム:歴史的な理由により、ユーザーエージェントはまた、リンクの関係として指定されるauthorキーワードを持つものとして値を"made"を伴うrev属性を持つlinkaおよびarea要素を扱わなければならない。

bookmarkキーワードはaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

bookmarkキーワードは、問題の要素のリンクを生成する直近の祖先article要素、または祖先article要素が存在しない場合はリンクを生成する要素が最も深く関与している節へのパーマリンクを生成する。

以下の例には、3つのハイパーリンクがある。ユーザーエージェントはパーマリンクが与えられている場所を見ることにより、問題のパーマリンクがどの仕様に適合するかを判断するかもしれない。

 ...
 <body>
  <h1>Example of permalinks</h1>
  <div id="a">
   <h2>First example</h2>
   <p><a href="a.html" rel="bookmark">This permalink applies to
   only the content from the first H2 to the second H2</a>. The DIV isn't
   exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">This permalink applies to
   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">This permalink applies to
    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
   </article>
  </article>
 </body>
 ...

The canonical keyword may be used with link element. This keyword creates a hyperlink.

The canonical keyword indicates that URL given by the href attribute is the preferred URL for the current document. That helps search engines reduce duplicate content, as described in more detail in The Canonical Link Relation specification. [RFC6596]

dns-prefetchキーワードはlink要素と共に使用してもよい。このキーワードは外部リソースへのリンクを生成する。このキーワードはbody-okである。

dns-prefetchキーワードは、ユーザーがその生成元に位置するリソースを必要とする可能性が高く、かつ、ユーザーエクスペリエンスがDNS解決に関連する待ち時間コストを先取りすることによって改善されるので、指定されたリソースの生成元のDNS解決を先制実行することが、有益である可能性が高いことを示す。ユーザーエージェントは、Resource Hints仕様に記載されたdns-prefetchキーワードの処理モデルを実装しなければならない。[RESOURCEHINTS]

dns-prefetchキーワードによって与えられるリソースにデフォルトタイプは存在しない。

externalキーワードは、aおよびarea要素とともに使用されてもよい。このキーワードはハイパーリンクを生成しないが、要素によって作成される他のハイパーリンク(他のキーワードがハイパーリンクを生成しない場合は暗黙のハイパーリンク)の注釈をつける

externalキーワードは、リンクが現在の文書が一部を形成するサイトの一部ではない文書へ導くことを示す。

helpキーワードはlinkaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

aareaの各要素について、helpキーワードは、参照される文書がハイパーリンクを定義する要素の親要素およびその子要素のより詳しいヘルプ情報を提供することを示す。

以下の例では、フォームコントロールはこれに対応したヘルプと関連付けられている。ユーザーエージェントはこの情報を用いるかもしれない。たとえば、ユーザーが"ヘルプ"や"F1"を押す際にいつでも参照される文書を表示できる。

 <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

link要素について、helpキーワードは参照される文書がページ全体のヘルプを提供することを示す。

aareaの各要素について、ブラウザーはhelpキーワードがリンクに異なるカーソルを表示することがある。

4.6.6.8 リンクタイプ"icon"

Support: link-icon-pngChrome for Android 57+Chrome 4+UC Browser for Android 11.4+iOS Safari NoneFirefox 2+IE 11+Samsung Internet 4+Opera Mini NoneAndroid Browser 2.1+Edge 12+Safari 3.1+Opera 9+

Source: caniuse.com

iconキーワードはlink要素で使用してもよい。このキーワードは外部リソースへのリンクを生成する。

指定されるリソースは、ページまたはサイトを表すアイコンであり、かつユーザーインターフェイスにおけるページを示す際にユーザーエージェントによって使用されるべきである。

アイコンは、聴覚アイコン、視覚アイコン、または他の種類のアイコンかもしれない。複数のアイコンが提供される場合、ユーザーエージェントは typemedia、およびsizes属性に応じて最も適切なアイコンを選択しなければならない。複数の均等に適切なアイコンがある場合、ユーザーエージェントは、ユーザーエージェントは、アイコンのリストを収集した時点で、ツリー順で宣言された最後のものを使用する必要がある。ユーザーエージェントがアイコンを使用しようと試みるが、綿密に検討すると、そのアイコンが実際には不適切であると判定される場合(たとえば、アイコンがサポートされない形式を使用するため)、ユーザーエージェントは属性によって決定されるように次の最も適切なアイコンを試みなければならない。

ユーザーエージェントは、アイコンのリストが変更する場合にアイコンを更新するよう要求されないが、更新することを奨励する。

iconキーワードで指定されるリソースに対するデフォルトタイプは存在しない。しかし、リソースの種類を決定するために、ユーザーエージェントは、リソースが、画像であることを期待しなければならない。

The sizes keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

CSSピクセルあたり2デバイスピクセルのデバイス画素密度(2x, 192dpi)をもつディスプレイを意図する50 CSSピクセル幅であるアイコンは、100生ピクセルの幅を持つだろう。この機能は、異なるリソースが小さな高解像度アイコン対大きな低解像度のアイコン(たとえば50×50 2x 対100×100 1×)に対して使用されることを示すものをサポートしない。

To parse and process the attribute's value, the user agent must first split the attribute's value on ASCII whitespace, and must then parse each resulting keyword to determine what it represents.

anyキーワードは、たとえばSVG画像で提供されるなど、リソースがスケーラブルなアイコンであることを表す。

キーワードが何を表すかを決定するために、以下のように他のキーワードをさらに解析しなければならない:

sizes属性に指定されたキーワードは、リンクされたリソースで実際に利用可能でないアイコンのサイズを表してはならない。

In the absence of a link with the icon keyword, for Document objects whose URL's scheme is an HTTP(S) scheme, user agents may instead run these steps in parallel:

  1. Let request be a new request whose url is the URL record obtained by resolving the URL "/favicon.ico" against the Document object's URL, client is the Document object's relevant settings object, type is "image", destination is "image", synchronous flag is set, credentials mode is "include", and whose use-URL-credentials flag is set.

  2. Let response be the result of fetching request.

  3. Use response's unsafe response as an icon as if it had been declared using the icon keyword.

次の例は、複数のアイコンを持つアプリケーションの冒頭部を示している。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

歴史的な経緯により、iconキーワードは、"shortcut"キーワードが先行してもよい。If the "shortcut" keyword is present, the rel attribute's entire value must be an ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and no other ASCII whitespace).

licenseキーワードはlinkaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

licenseキーワードは、参照される文書が、現在の文書のメインコンテンツを規定する著作権許諾の条項を提供することを示す。

この仕様は、主要コンテンツの一部であるとみなされない文書の主要なコンテンツとコンテンツとを区別する方法を指定しない。区別は、ユーザーにとってわかりやすいように行われるべきである。

写真共有サイトについて考えてみる。そのサイトのあるページは、写真を掲載し、その写真について説明するかもしれない。そして、そのページは、以下のようにマークアップされるかもしれない:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>

このケースでは、licenseはこの文書のメインコンテンツである写真にのみ適用され、文書全体には適用されない。具体的には、ページのデザインそのものには適用されないということである。これらは文書の末尾に示されているとおりの著作権により保護される。これは、(たとえば、ページの下部に淡い小さなテキストでページの著作権を持つ一方、目立つ写真の近くに配置ライセンスのリンクを作成する)スタイリングでより明確に作成することができる。

同義語:歴史的な理由により、ユーザーエージェントはまた、licenseキーワードのようなキーワード"copyright"を扱わなければならない。

nofollowキーワードはaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成しないが、要素によって作成される他のハイパーリンク(他のキーワードがハイパーリンクを生成しない場合は暗黙のハイパーリンク)の注釈をつける

nofollowキーワードは、ページの原著者や発行者がリンクを保証しないか、2つのページに関係する人々の商業的関係のために参照される文書が主として含まれていることを示す。

Support: rel-noopenerChrome for Android 57+Chrome 49+UC Browser for Android NoneiOS Safari 10.3+Firefox 52+IE NoneSamsung Internet NoneOpera Mini NoneAndroid Browser 56+Edge NoneSafari 10.1+Opera 36+

Source: caniuse.com

noopenerキーワードは、aおよびarea要素とともに使用されてもよい。このキーワードはハイパーリンクを生成しないが、要素によって作成される他のハイパーリンク(他のキーワードがハイパーリンクを生成しない場合は暗黙のハイパーリンク)の注釈をつける

The keyword indicates that any newly created browsing context which results from following the hyperlink will have disowned its opener, which means that its window.opener property will be null.

Support: rel-noreferrerChrome for Android 57+Chrome 16+UC Browser for Android 11.4+iOS Safari 4.0+Firefox 33+IE (limited) 11+Samsung Internet 4+Opera Mini NoneAndroid Browser 2.3+Edge 13+Safari 5+Opera 15+

Source: caniuse.com

noreferrerキーワードはaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成しないが、要素によって作成される他のハイパーリンク(他のキーワードがハイパーリンクを生成しない場合は暗黙のハイパーリンク)の注釈をつける

このキーワードは、リンクを辿る際に、リファラ情報が一切漏らされないことを示す。

ユーザーエージェントがnoreferrerキーワードを持つaまたはarea要素によって定義されたリンクをたどる場合、ユーザーエージェントは""no-referrer"へのリクエスト参照元を設定しなければならない。

歴史的な理由により、noreferrerキーワードは新しいブラウジングコンテキスト作成するハイパーリンク上に存在する場合に、noopenerキーワードに関連付けられた動作を意味する。つまり、<a href="..." rel="noreferrer" target="_blank"><a href="..." rel="noreferrer noopener" target="_blank">と同じ作用を持つ。

stylesheetキーワードは、link要素とともに使用されてもよい。このキーワードは外部リソースへのリンクを生成する。このキーワードはbody-okである。

pingbackキーワードの意味については、Pingback 1.0仕様を参照のこと。[PINGBACK]

preconnectキーワードはlink要素で使用してもよい。このキーワードは外部リソースへのリンクを生成する。このキーワードはbody-okである。

preconnectキーワードは、ユーザーがその生成元に位置するリソースを必要とする可能性が高く、かつ、ユーザーエクスペリエンスが接続を確立するとともに関連する待ち時間コストを先取りすることによって改善されるので、指定されたリソースの生成元に接続を先制初期化することが、有益である可能性が高いことを示す。ユーザーエージェントは、Resource Hintsに記載されたpreconnectキーワードの処理モデルを実装しなければならない。[RESOURCEHINTS]

preconnectキーワードで指定されるリソースに対するデフォルトタイプは存在しない。

prefetchキーワードはlink要素と共に使用してもよい。このキーワードは外部リソースへのリンクを生成する。このキーワードはbody-okである。

prefetchキーワードは、ユーザーが指定されたリソースを必要とすることが高く見込まれるため、事前にそのリソースをフェッチしキャッシュすることが有益であることを示す。ユーザーエージェントは、Resource Hintsに記載されたprefetchキーワードの処理モデルを実装しなければならない。[RESOURCEHINTS]

prefetchキーワードにより与えられたリソースにデフォルトタイプは存在しない。

preloadキーワードはlink要素で使用してもよい。このキーワードは外部リソースへのリンクを生成する。このキーワードはbody-okである。

preloadキーワードは、ユーザーが現在のナビゲーションにこのリソースを必要とする可能性が高いように、ユーザーエージェントがas属性(およびその宛先に関連付けられた優先度)によって与えられる宛先に応じて指定されたリソースを先制フェッチしキャッシュしなければならないことを示す。ユーザーエージェントは、Preloadで説明されるpreload属性の処理モデルを実装しなければならない。[PRELOAD]

preloadキーワードで指定されるリソースに対するデフォルトタイプは存在しない。

prerenderキーワードはlink要素で使用してもよい。このキーワードは外部リソースへのリンクを生成する。このキーワードはbody-okである。

prerenderキーワードは、指定されたリソースが次のナビゲーションによって必要とされるかもしれず、そこで、先制リソースを先制フェッチするだけでなく、たとえば、そのサブリソースをフェッチまたはいくつかのレンダリングを行うことで、リソースを処理することを示す。ユーザーエージェントは、Resource Hintsに記載されたprerenderキーワードの処理モデルを実装しなければならない。[RESOURCEHINTS]

prerenderキーワードで指定されるリソースに対するデフォルトタイプは存在しない。

searchキーワードはlinkaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

searchキーワードは、参照された文書が、現在の文書と関連するリソースを検索するためのインターフェイスを提供することを示す。

ユーザーエージェントが自動的に検索用インターフェイスを発見できるよう、OpenSearch記述文書をlink要素およびsearchリンクタイプに使用できる。[OPENSEARCH]

The serviceworker keyword may be used with link elements. This keyword creates an external resource link that is used to declare a service worker registration and its script url, scope url, type, and use cache setting.

User agents must implement the processing model for link-element serviceworker links described in Service Workers, using the href, scope, workertype, and usecache attributes. [SW]

stylesheetキーワードはlink要素で使用してもよい。このキーワードは、スタイル処理モデルに寄与する外部リソースへのリンクを生成する。このキーワードはbody-okである。

指定されたリソースは、文書がどのように表示されるべきかを記述するリソースである。リソースが処理される厳密な方法は、実際のリソースの種類に依存する。

alternateキーワードがlink要素で併せて指定される場合、リンクは代替スタイルシートである。この場合、空でない値とともに、link要素でtitle属性が指定されなければならない。

stylesheetキーワードで与えられるリソースのデフォルトタイプはtext/cssである。

The appropriate times to obtain the resource are:

Quirk: If the document has been set to quirks mode, has the same origin as the URL of the external resource, and the Content-Type metadata of the external resource is not a supported style sheet type, the user agent must instead assume it to be text/css.

Once a resource has been obtained, if its Content-Type metadata is text/css, the user agent must run these steps:

  1. Let element be the link element that created the external resource link.

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

  3. If element no longer creates an external resource link that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be invoked again for a newly obtained resource), then abort these steps.

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

    type

    text/css

    location

    The resulting URL string determined during the obtain algorithm.

    This is before any redirects get applied.

    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. The CSSOM specification 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.

    This is similarly a reference to the attribute, rather than a copy of the attribute's current value.

    alternate flag

    Set if the link is an alternative stylesheet; unset otherwise.

    origin-clean flag

    Set if the resource is CORS-same-origin; unset otherwise.

    parent CSS style sheet
    owner CSS rule

    null

    disabled flag

    Left at its default value.

    CSS rules

    Left uninitialized.

    The CSS environment encoding is the result of running the following steps: [CSSSYNTAX]

    1. If the element has a charset attribute, get an encoding from that attribute's value. If that succeeds, return the resulting encoding and abort these steps. [ENCODING]

    2. Otherwise, return the document's character encoding. [DOM]

tagキーワードはaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

tagキーワードは、参照される文書に代表されるタグが現在の文書適用されることを示す。

これはタグが現在の文書に適用されることを示すものであるから、このキーワードをタグクラウドのマークアップに用いるのは不適切である。なお、タグクラウドとは、あるページの集合に対してよく使われるタグを一覧にしたものである。

この文書は、宝石に関するページで、"https://en.wikipedia.org/wiki/Gemstone"にタグ付けされている。これにより、たとえば、アメリカの街やRubyのパッケージフォーマット、スイスの機関車種別ではなく、"宝石"の一種であるgemに明確にカテゴライズされる。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Precious</title>
 </head>
 <body>
  <header><h1>My precious</h1> <p>Summer 2012</p></header>
  <p>Recently I managed to dispose of a red gem that had been
  bothering me. I now have a much nicer blue sapphire.</p>
  <p>The red gem had been found in a bauxite stone while I was digging
  out the office level, but nobody was willing to haul it away. The
  same red gem stayed there for literally years.</p>
  <footer>
   Tags: <a rel=tag href="https://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
  </footer>
 </body>
</html>

この文書には2つの記事が存在する。しかし、"tag"リンクはページ全体に適用される。(そして、どこに配置されるかに関係なく適用される。article要素内に配置する場合も同様である。)

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Gem 4/4</title>
 </head>
 <body>
  <article>
   <h1>801: Steinbock</h1>
   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
  </article>
  <article>
   <h1>802: Murmeltier</h1>
   <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
         alt="The 802 was red with pantographs and tall vents on the side.">
    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
   </figure>
   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
  </article>
  <p class="topic"><a rel=tag href="https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
 </body>
</html>

文書によっては、連続する文書の一部を構成する。

連続する文書は、各文書がおよびを持つことができる。兄を持たない文書は文書の最初であり、弟を持たない文書は文書の末尾である。

文書は複数シーケンスの一部であってもよい。

nextキーワードはlinkaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

nextキーワードは、文書がシーケンスの一部であり、かつリンクがシーケンスにおいて次の論理的な文書に導くリンクであることを示す。

When the next keyword is used with a link element, user agents should implement one of the processing models described in Resource Hints, i.e. should process such links as if they were using one of the dns-prefetch, preconnect, prefetch, or prerender keywords. Which resource hint the user agent wishes to use is implementation-dependent; for example, a user agent may wish to use the less-costly preconnect hint when trying to conserve data, battery power, or processing power, or may wish to pick a resource hint depending on heuristic analysis of past user behavior in similar scenarios. [RESOURCEHINTS]

prevキーワードはlinkaareaの各要素で使用してもよい。このキーワードはハイパーリンクを生成する。

prevキーワードは、文書がシーケンスの一部であり、かつリンクがシーケンスにおいて前の論理的な文書に導くリンクであることを示す。

同義語:歴史的な理由により、ユーザーエージェントはまた、prevキーワードのようなキーワード"previous"を扱わなければならない。

あらかじめ定義されたリンクタイプ群に対する拡張は、microformats wikiのexisting-rel-valuesページにおいて登録してもよい。[MFREL]

microformats wikiのexisting-rel-valuesページには、いつでも、誰でも、自由に新たなリンクタイプを追加できる。拡張されたリンクタイプは以下の情報と共に定義されなければならない:

キーワード

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

値にU+003A COLON文字(:)を含む場合、その値は絶対URLでなければならない。

linkへの効果

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

使用不可
キーワードはlink要素で指定されてはならない。
ハイパーリンク
キーワードをlink要素で指定してもよい。ハイパーリンクを生成する。
外部リソース
キーワードをlink要素で指定してもよい。外部リソースへのリンクを生成する。
aおよびareaへの効果

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

使用不可
キーワードはaおよびarea要素で指定されてはならない。
ハイパーリンク
キーワードをaおよびarea要素で指定してもよい。ハイパーリンクを生成する。
外部リソース
キーワードをaおよびarea要素で指定してもよい。外部リソースへのリンクを生成する。
ハイパーリンク注釈
キーワードをaおよびarea要素で指定してもよい。要素によって作成される他のハイパーリンク補足する
概要

キーワードが何を意味するかについての規範的でない短い説明。

Specification(仕様)

キーワードのセマンティックスと要件についてのより詳細な説明へのリンク。それはWiki上の別のページかもしれないし、外部ページへのリンクかもしれない。

Synonyms(類義語)

全く同じ処理要件を持つキーワードの一覧。著者は、同義語であると定義された値を使用すべきではなく、同義語はユーザーエージェントがレガシーコンテンツをサポートするためだけのものである。誰もが実際に使用されてない同義語を削除できる。レガシーコンテンツとの互換性のために同義語として処理する必要がある名前のみが、この方法で登録されているのである。

Status(状態)

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

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

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

キーワードが、使用するまたは指定することなく一月以上の期間"proposed"(提案)状態で登録されている場合、レジストリーから削除されることがある。

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

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

適合性チェッカーは、値が許容されるかどうかを確立するためにmicroformats wikiのexisting-rel-valuesページで指定される情報を使用してもよい:この仕様で定義されるまたは"proposed"(提案)または"ratified"(承認)としてマークされる値は、"Effect on..."フィールドに記載されるように適用するものに対する要素上で使用される場合に受け入れなければならない。ところが、"discontinued"(中止)としてマークされる値またはこの仕様または前述のページのいずれかで記載されない値は、不正として拒否されなければならない。適合性チェッカーは、この情報をキャッシュしてもよい(たとえば、パフォーマンス上の理由から、または信頼性の低いネットワーク接続を使用することを避けるためなど)。

著者がこの仕様またはWikiページのいずれかで定義されない新しいタイプを使用する場合、適合性チェッカーは詳細は、上記で説明される詳細とともに、"proposed"(提案)状態をもつWikiに値を追加するために提供すべきである。

状態"proposed"また"ratified"とともにmicroformats wikiのexisting-rel-valuesページで拡張として定義されるリンクタイプは、"効果"の定めるところに従って、linkaareaの各要素のrel属性とともに使用してもよい。[MFREL]

4.7 編集

insおよびdel要素は文書への編集を表す。

4.7.1 ins要素

Spec bugs: 28555

カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
datetime — 変更日付および(任意の)時刻
DOMインターフェイス
HTMLModElementインターフェイスを使用する。

ins要素は、文書への追加を表す

以下は1つの段落の追加を表す:

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

ここでaside要素内のすべてがフレージングコンテンツとしてカウントされるため、以下において、ただ1つの段落がある:

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins要素は、暗黙の段落の境界を越えるべきでない。

次の例は、2つの段落、2つの部分に挿入される第2段落の追記を表す。この例において最初のins要素は、貧弱な形式と考えられる段落の境界をこのように横切る。

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

次は、このマークアップのより良い方法である。このマークアップはより多くの要素を使用するが、どの要素も暗黙の段落の境界を越えない。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 del要素

カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
datetime — 変更日付および(任意の)時刻
DOMインターフェイス
HTMLModElementインターフェイスを使用する。

del要素は、文書からの削除を表す

del要素は、暗黙の段落の境界を越えるべきでない。

以下は、実施済み項目が完了した日付と時刻を線で消される"to do"リストを示す。

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 insdel要素の共通属性

cite属性は、変更を説明する文書のURLを指定するために使用してもよい。たとえば会議の議事録など、その文書が長い場合、著者は変更について説明するその文書の特定の部分を指す断片を含めることを勧める。

cite属性が存在する場合、変更を説明する潜在的にスペースで囲まれた妥当なURLでなければならない。対応する引用リンクを取得するために、属性値は、要素のノード文書に対して解析されなければならない。ユーザーエージェントは、ユーザーがそのような引用のリンクをたどることを可能にしてもよいが、これは主に読者のためでなく、(サイトの編集に関する統計を収集するサーバーサイドスクリプトによってなど)私的使用のために意図される。

datetime属性は、変更の日付と時刻を指定するために使用してもよい。

存在する場合、datetime属性値は、任意の時間で有効な日付文字列でなければならない。

ユーザーエージェントは、構文解析日付または時刻文字列アルゴリズムに従ってdatetime属性を解析しなければならない。それが日付またはグローバル日付および時刻を返さない場合、修正は関連するタイムスタンプを持たない(値は不適合であり、値は任意の時間をもつ妥当な日付文字列ではない)。そうでなければ、変更は指定した日付またはグローバル日付および時刻で行われたものとしてマークされる。指定される値がグローバル日付および時刻である場合、ユーザーエージェントは、与えられる日時を提示するためにどの時間帯で決定するかの関連するタイムゾーンオフセット情報を使用すべきである。

この値はユーザーに示してもよいが、値は主に私的使用のために意図される。

insおよびdel要素はHTMLModElementインターフェイスを実装しなければならない:

[HTMLConstructor]
interface HTMLModElement : HTMLElement {
  [CEReactions] attribute USVString cite;
  [CEReactions] attribute DOMString dateTime;
};

cite IDL属性は、要素のciteコンテンツ属性を反映しなければならない。dateTime IDL属性は、要素のdatetimeコンテンツ属性を反映しなければならない。

4.7.4 編集と段落

この節は非規範的である。

insおよびdel要素は、段落付けに影響しないので、段落が暗黙的に定義される(明示的なp要素のない)一部の場合において、insdel要素にとって、全体の段落または他の非フレージングコンテンツ要素と別段落の一部の両方にまたがることが可能である。たとえば:

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

p要素でいくつかの段落を包むことによってのみ、段落は第1段落の終わり、第2段落全体、insまたはdel要素によって包まれる第3段落の始まりを得る(以下は非常に紛らわしく、よく考えたグッドプラクティスでない):

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

しかし、暗黙の段落が定義される方法のために、同じinsまたはdel要素を使用する、段落の終わりおよび次の段落の始まりをマークアップできない。代わりに、たとえば次のように、1つ(もしくは2つ)のp要素と2つのinsまたはdel要素を使用する必要がある:

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

上記で説明した一部の混乱のために、暗黙の段落の境界を越えるinsまたdel要素を持つ代わりに、著者は、常にp要素を持つすべての段落をマークアップすることが強く推奨される。

4.7.5 編集とリスト

この節は非規範的である。

olおよびul要素のコンテンツモデルは、子としてinsおよびdel要素を許可しない。リストは常に、他の場合に削除済みとしてマークされているだろうアイテムを含む、すべての項目を表す。

項目が挿入または削除されたことを示すために、insまたはdel要素はli要素のコンテンツの周囲に配置できる。項目が別のものに置き換えられていることを示すために、1つのli要素は、1つ以上のdel要素の後に1つ以上のins要素を持つことができる。

次の例において、空の状態で出発したリストが項目を持ち、時間をかけてリストから追加および削除される。強調された例における部分は、リストの"current"状態となる部分を表示する。しかし、リスト項目の番号は、編集を考慮しない。

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

次の例において、ちょうどフルーツで始まるリストは色のリストに置き換えられた。

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

4.7.6 編集とテーブル

この節は非規範的である。

編集をテーブルに示すことが困難になるかもしれないので、テーブルモデルの一部を形成する要素は、insdel要素に対して許可しない複雑なコンテンツモデルの要件を持つ。

行全体または列全体が追加または削除されたことを示すために、その行または列の各セルの内容全体がinsまたはdel要素で(めいめいに)包むことができる。

ここでは、テーブルの行が追加されている:

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> Verdict
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
  <tr> <td> Portal              <td> Valve            <td> 10/10
  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
</table>

ここでは、列が削除されている(削除された時刻がまた指定され、理由を説明するページへのリンクがある):

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
</table>

一般的に言えば、より複雑な編集(たとえば、セルが削除され、後続のすべてのセルが上または左に移動するなど)を示す良い方法はない。