訳注: この文書はSuperseded Recommendationとして廃止された仕様です。この日本語訳は歴史的な意味しか持ちません。WHATWGによる最新のHTML仕様を参照ください。

WHATWG HTML日本語訳も参照することができます。

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

4.5.1 a要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
インタラクティブコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
透過的、ただしインタラクティブコンテンツの子孫が存在してはならない。
コンテンツ属性：
グローバル属性
href — ハイパーリンクのアドレス
target — ハイパーリンクナビゲーションおよびフォーム送信に対するブラウジングコンテキスト
download - リソースをナビゲートする代わりにダウンロードし、その場合リソースのファイル名にするかどうか
rel — ハイパーリンクと宛先のリソースを含む文書の関係
hreflang — リンクされたリソースの言語
type — 参照されるリソースタイプのヒント
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
link（デフォルト - 設定しない）、button、checkbox、menuitem、menuitemcheckbox、menuitemradio、tabまたはtreeitem
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
interface HTMLAnchorElement : HTMLElement {
           attribute DOMString target;
           attribute DOMString download;

           attribute DOMString rel;
           attribute DOMString rev;
  readonly attribute DOMTokenList relList;
           attribute DOMString hreflang;
           attribute DOMString type;

           attribute DOMString text;
};
HTMLAnchorElement implements URLUtils;

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

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

href属性が存在しない場合、target、hreflang、およびtype属性は省略しなければならない。

サイトがすべてのページに一貫性のあるナビゲーションツールバーを使用する場合、通常ページ自身へリンクするリンクは、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, and 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 Document is not fully active, then abort these steps.

  2. If either the a element has a download attribute and the algorithm is not allowed to show a popup, or 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 run these substeps:

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

    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. If the click event was a real pointing-device-triggered click event on the img element, then let x be the distance in CSS pixels from the left edge of the image's left border, if it has one, or the left edge of the image otherwise, to the location of the click, and let y be the distance in CSS pixels from the top edge of the image's top border, if it has one, or the top edge of the image otherwise, to the location of the click. Otherwise, let x and y be zero.
    2. Let the 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) 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. If the steps above defined a hyperlink suffix, then take that into account when following or downloading the hyperlink.

a . text

textContentと同じ。

The IDL attributes download, target, rel, rev, hreflang, and type, must reflect the respective content attributes of the same name.

The IDL attribute relList must reflect the rel content attribute.

The text IDL attribute, on getting, must return the same value as the textContent IDL attribute on the element, and on setting, must act as if the textContent IDL attribute on the element had been set to the new value.

The a element also supports the URLUtils interface. [URL]

When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, as the given value.

The element's URLUtils interface's get the base algorithm must simply return the element's base URL.

The element's URLUtils interface's query encoding is the document's character encoding.

When the element's URLUtils interface invokes its update steps with a string value, the user agent must set the element's href content attribute to the string value.

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

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://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="http://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におけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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におけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

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

重要性：strong要素は、より詳細な、より陽気な、または単に常用文かもしれない部分から本当に重要である部分を区別するために、見出し、キャプション、または段落で使用できる。

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

深刻性：strong要素は警告または注意の通知をマークアップするために使用できる。

緊急性：strong要素は、ユーザーが文書の他の部分よりも早く確認する必要があるコンテンツを示すために使用できる。

コンテンツの一部の相対的な重要性のレベルは、祖先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におけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

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

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

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

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

この例において、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="http://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におけるタグ省略
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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におけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

cite要素は、創造的な作品への参照を表す。要素は、作品のタイトルや著者の名前（個人や組織）、またはURL参照を含めなければならない。これは、引用メタデータの付加のために使用される規則に従い省略されてもよい。

創造的な作品は、本、新聞、エッセイ、詩、楽譜、歌、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、映画、演劇、オペラ、ミュージカル、展示、訴訟事例報告などを含む。

cite要素を使用して参照引用の著者の例は次のとおり：

  
  <p>In the words of <cite>Charles Bukowski</cite> -  
  <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>

2つ目の例は、cite要素を使用して作家名を参照することにより、ツイートの著者を識別する：

  
  <blockquote class="twitter-tweet">
  <p>♥ Bukowski in <a href="https://twitter.com/search?q=%23HTML5&src=hash">#HTML5</a> spec examples
  <a href="http://t.co/0FIEiYN1pC">http://t.co/0FIEiYN1pC</a></p><cite>— karl dubost (@karlpro) 
  <a href="https://twitter.com/karlpro/statuses/370905307293442048">August 23, 2013</a></cite>
  </blockquote>

この例において、cite要素は参考文献の作品のタイトルを参照するために使用される：

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>

この例において、cite要素はテレビ番組のタイトルを参照するために使用される：

<p>Who is your favorite doctor (in <cite>Doctor Who</cite>)?</p>

cite要素に対する非常に一般的な用途は、この例のように、ブログの記事やフォーラムでのコメントの著者を識別することである：

  <article id="comment-1"> 
  Comment by <cite><a href="http://oli.jp">Oli Studholme</a></cite> 
  <time datetime="2013-08-19T16:01">August 19th, 2013 at 4:01 pm</time>
  <p>Unfortunately I don't think adding names back into the definition of <code>cite</code>
  solves the problem: of the 12 blockquote examples in
  <a href="http://oli.jp/example/blockquote-metadata/">Examples of block quote metadata</a>,
  there's not even one that's <em>just</em> a person’s name.</p>
  <p>A subset of the problem, maybe…</p>
  </article>

cite要素に対するもう1つの一般的な用途は、以下の例のように、検索結果のURLを参照することである。

  <div id="resultStats">About 416,000,000 results 0.33 seconds) </div>
  ...
  <p><a href="http://www.w3.org/html/wg/">W3C <i>HTML Working Group</i></a></p>
  <p><cite>www.w3.org/<b>html</b>/wg/</cite></p>
  <p>15 Apr 2013 - The <i>HTML Working Group</i> is currently chartered to continue its 
  work through 31 December 2014. A Plan 2014 document published by the...</p>
  ...

引用は、引用文ではない（q要素が適切である）。

citeは引用文のためのものでないので、これは間違った使い方である：

<p><cite>This is wrong!, said Hillary.</cite> is a quote from the 
   popular daytime TV drama When Ian became Hillary.</p>

これは正しい使い方の例である：

<p><q>This is correct, said Hillary.</q> is a quote from the 
   popular daytime TV drama <cite>When Ian became Hillary</cite>.</p>

4.5.7 q要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
cite - 編集に関する引用またはより多くの情報源へのリンク
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLQuoteElementを使用する。

q要素は、別のソースから引用されたフレージングコンテンツを表す。

要素のコンテンツを引用している引用句読点（たとえば引用符など）は、直前、直後、またはq要素の内部に現れてはならない。これらは、ユーザーエージェントによってレンダリング時に挿入される。

qの要素内のコンテンツは、別のソースから引用されなければならず、そのアドレスがある場合は、cite属性に引用してもよい。ソースは小説や脚本中の文字を引用するときのように、架空のものであってよい。

cite属性が存在する場合、潜在的にスペースで囲まれた妥当なURLでなければならない。To obtain the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g. by server-side scripts collecting statistics about a site's use of quotations), not for readers.

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="http://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要素の子孫が存在してはならない。
コンテンツ属性：
グローバル属性
また、この要素上のtitle属性は特別なセマンティックを持つ。
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

dfn要素は、用語の定義実体を表す。dfn要素の最も近い祖先である段落、説明リストのグループ、またはセクションはまた、dfn要素によって与えられる用語の定義を含まなければならない。

用語の定義：dfn要素がtitle属性を持つ場合、その属性の正確な値が定義されている用語である。そうでなければ、要素が正確に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要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
また、この要素上のtitle属性は特別なセマンティックを持つ。
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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 data要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
value - 機械可読な値
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
interface HTMLDataElement : HTMLElement {
           attribute DOMString value;
};

data要素は、value属性でコンテンツの機械可読形式に沿って、そのコンテンツを表す。

value属性が存在しなければならない。その値は、機械可読形式での要素コンテンツの表現でなければならない。

値が日付または時刻に関連する場合、より具体的なtime要素を代わりに使用できる。

要素はいくつかの目的に使用できる。

When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. この場合、value属性で使用されるフォーマットは、使用中のマイクロフォーマットまたはマイクロ語彙によって決定される。

しかし、要素はまた、人間可読な値と一緒に格納するリテラルな値を持つ際に、ページ内でスクリプトと併せて使用される。このような場合、使用されるフォーマットは、スクリプトの要求に依存する。（data-*属性もそのような状況において有用でありうる。）

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

4.5.11 time要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
datetime - 機械可読な値
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
interface HTMLTimeElement : HTMLElement {
           attribute DOMString dateTime;
};

time要素は、datetime属性でコンテンツの機械可読形式に沿って、そのコンテンツを表す。コンテンツの種類は、以下に説明するような、日付、時刻、タイムゾーンのオフセット、および期間の様々な種類に限定される。

datetime属性は存在してもよい。存在する場合、その値は、機械可読形式での要素コンテンツの表現でなければならない。

datetime型のコンテンツ属性を持たないtime要素は、任意の要素の子孫を持ってはならない。

もし持つ場合、time要素の日付時刻値は要素のdatetimeコンテンツ属性値であり、そうでない場合、要素のtextContentである。

time要素の日付時刻値は以下の構文のいずれかと一致しなければならない。

妥当な月文字列
<time>2011-11</time>
妥当な日付文字列
<time>2011-11-12</time>
妥当な年のない日付文字列
<time>11-12</time>
妥当な時刻文字列
<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.929</time>
妥当な浮動日付および時刻文字列
<time>2011-11-12T14:54</time>
<time>2011-11-12T14:54:39</time>
<time>2011-11-12T14:54:39.929</time>
<time>2011-11-12 14:54</time>
<time>2011-11-12 14:54:39</time>
<time>2011-11-12 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-12T14:54Z</time>
<time>2011-11-12T14:54:39Z</time>
<time>2011-11-12T14:54:39.929Z</time>
<time>2011-11-12T14:54+0000</time>
<time>2011-11-12T14:54:39+0000</time>
<time>2011-11-12T14:54:39.929+0000</time>
<time>2011-11-12T14:54+00:00</time>
<time>2011-11-12T14:54:39+00:00</time>
<time>2011-11-12T14:54:39.929+00:00</time>
<time>2011-11-12T06:54-0800</time>
<time>2011-11-12T06:54:39-0800</time>
<time>2011-11-12T06:54:39.929-0800</time>
<time>2011-11-12T06:54-08:00</time>
<time>2011-11-12T06:54:39-08:00</time>
<time>2011-11-12T06:54:39.929-08:00</time>
<time>2011-11-12 14:54Z</time>
<time>2011-11-12 14:54:39Z</time>
<time>2011-11-12 14:54:39.929Z</time>
<time>2011-11-12 14:54+0000</time>
<time>2011-11-12 14:54:39+0000</time>
<time>2011-11-12 14:54:39.929+0000</time>
<time>2011-11-12 14:54+00:00</time>
<time>2011-11-12 14:54:39+00:00</time>
<time>2011-11-12 14:54:39.929+00:00</time>
<time>2011-11-12 06:54-0800</time>
<time>2011-11-12 06:54:39-0800</time>
<time>2011-11-12 06:54:39.929-0800</time>
<time>2011-11-12 06:54-08:00</time>
<time>2011-11-12 06:54:39-08:00</time>
<time>2011-11-12 06:54:39.929-08:00</time>

日付とタイムゾーンオフセットを持つ時刻は、特定のイベント、または時刻が特定の地理的な位置に固定されない定期的な仮想のイベントを指定するのに便利である。たとえば、世界の任意の特定部分がサマータイムを観察するかどうかにかかわらず、小惑星衝突または、毎日1400 UTCに開催されるある一連の会議の正確な時刻。特定の地理的位置のローカルタイムゾーンオフセットによって正確な時間が異なるイベントにおいて、その地理的位置と組み合わせた妥当な浮動日付および時刻文字列がより便利だろう。

妥当な週文字列
<time>2011-W46</time>
4つ以上のASCII数字で、少なくとも1つは"0"（U+0030）でない。
<time>2011</time>
<time>0001</time>
妥当な期間文字列
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>

前の妥当な構文の多くは、（タイムゾーンオフセットを含まない）"浮動"日付および/または時刻値を説明する。浮動時間値をグローバル（"増分"）時間値（たとえば、JavaScriptのDateオブジェクト）に変換する際に注意が必要である。多くの場合、暗黙の時刻とタイムゾーンが変換に使用され、日付の値自体への予期しない変化をもたらすだろう。[TIMEZONES]

The machine-readable equivalent of the element's contents must be obtained from the element's datetime value by using the following algorithm:

  1. If parsing a month string from the element's datetime value returns a month, that is the machine-readable equivalent; abort these steps.

  2. If parsing a date string from the element's datetime value returns a date, that is the machine-readable equivalent; abort these steps.

  3. If parsing a yearless date string from the element's datetime value returns a yearless date, that is the machine-readable equivalent; abort these steps.

  4. If parsing a time string from the element's datetime value returns a time, that is the machine-readable equivalent; abort these steps.

  5. If parsing a floating date and time string from the element's datetime value returns a floating date and time, that is the machine-readable equivalent; abort these steps.

  6. If parsing a time-zone offset string from the element's datetime value returns a time-zone offset, that is the machine-readable equivalent; abort these steps.

  7. If parsing a global date and time string from the element's datetime value returns a global date and time, that is the machine-readable equivalent; abort these steps.

  8. If parsing a week string from the element's datetime value returns a week, that is the machine-readable equivalent; abort these steps.

  9. If the element's datetime value consists of only ASCII digits, at least one of which is not "0" (U+0030), then the machine-readable equivalent is the base-ten interpretation of those digits, representing a year; abort these steps.

  10. If parsing a duration string from the element's datetime value returns a duration, that is the machine-readable equivalent; abort these steps.

  11. There is no machine-readable equivalent.

The algorithms referenced above are intended to be designed such that for any arbitrary string s, only one of the algorithms returns a value. A more efficient approach might be to create a single algorithm that parses all these data types in one pass; developing such an algorithm is left as an exercise to the reader.

The dateTime IDL attribute must reflect the element's datetime content attribute.

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="http://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 his 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月12日が"火曜日"に相当する意味であることを追加のセマンティックを持つ文字列"Tuesday"に伝える：

Today is <time datetime="2011-11-12">Tuesday</time>.

この例では、太平洋標準時で特定の時間を指定する：

Your next meeting is at <time datetime="2011-11-12T15:00-08:00">3pm</time>.

4.5.12 code要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.13 var要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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 he turned to the blackboard and picked up the chalk. After a few moment's
thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.14 samp要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

samp要素は、プログラムまたはコンピューティングシステムからの（サンプル）出力を表す。

詳細については、preおよびkbd要素を参照のこと。

この例はインラインで使用されているsamp要素を示す：

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>

この2番目の例は、サンプル出力のブロックを示す。ネストされたsampとkbd要素は、スタイルシートを使用するサンプル出力の特定要素のスタイリングを可能にする。非常に正確なスタイリングを可能にするために、さらに詳細なマークアップ注釈を付ける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>

4.5.15 kbd要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.16 subおよびsup要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.17 i要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.18 b要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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.19 u要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

u要素は、明示的にレンダリングされるが、非テキストの注釈、たとえば中国語のテキストで固有名詞（中国語の固有名詞のマーク）としてテキストを分類する、またはスペルミスとしてテキストを分類するような、明瞭に発音されないテキストの範囲を表す。

In most cases, another element is likely to be more appropriate: for marking stress emphasis, the em element should be used; for marking key words or phrases either the b element or the mark element should be used, depending on the context; for marking book titles, the cite element should be used; for labeling text with explicit textual annotations, the ruby element should be used; for labeling ship names in Western texts, the i element should be used.

視覚プレゼンテーションでu要素の既定のレンダリングは、ハイパーリンク（下線）の慣習的なレンダリングと衝突する。著者は、ハイパーリンクと混同するかもしれないu要素を使用しないよう推奨する。

4.5.20 mark要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
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要素で著者にスタイル付けをもたらす。

<article>
 <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>
 <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.21 ruby要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
文参照。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

ruby要素は、ルビ注釈をマークする1つ以上のフレージングコンテンツの範囲を与える。ルビ注釈は、発音の案内または他の注釈を含むものとして東アジアの活版印刷で主に使用される、ベーステキストと並んで表示される短いテキストである。日本語において活版印刷のこの形式は、振り仮名としても知られる。ルビテキストは、どちらの側にも出現でき、時にはベーステキストの両側に出現でき、そしてCSSを使用してその位置を制御できる。ルビへのより完全な導入はUse Cases & Exploratory Approaches for Ruby Markup文書と同様にCSS Ruby Module Level 1で見つけることができる。[RUBY-UC] [CSSRUBY]

ruby要素の内容モデルは、以下の順序の1つ以上で構成される：

  1. 1つ以上のフレージングコンテンツノードまたはrb要素。
  2. rp要素の直前または直後のいずれかの、1つ以上のrtまたはrtc要素。

ruby,、rb、rtcおよびrt要素は、特に（特定の意味に限らず）以下で説明するように、注釈のさまざまな種類に対して使用できる。より具体的な日本語ルビの詳細、およびどのように日本語ルビをレンダリングするのかについては、日本語組版処理の要件を参照のこと。[JLREQ]ルビレンダリングがサポートされない場合、rp要素はフォールバックコンテンツとして使用できる。

個々のベース文字に対するのモノルビ

注釈（ルビテキスト）は、各表意文字（親文字）に個別に関連づけられる。日本語において、これは典型的に漢字の読みを提供するために使用されるひらがなまたはカタカナである。 

<ruby>base<rt>annotation</ruby>

rb要素を使用しない場合、ベースは上記のように、暗黙的に指定される。しかし、ベースを明示的に指定もできる。これは特にスタイリングに役立つ。言い換えると、熟語ルビの下記の例のように、連続したベースがグループとして扱われる場合。 

<ruby><rb>base<rt>annotation</ruby>

以下の例において、各注釈が単一の親文字に対応していることにも注目する。 

<ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby>
<ruby>語<rt>ご</rt></ruby>で<ruby>書<rt>か</rt></ruby>
いた<ruby>作<rt>さく</rt></ruby><ruby>文<rt>ぶん</rt></ruby>です。

通常テキストに点在するルビテキストは、以下の画像に類似の構造を提供する：

通常のテキストと混合されるルビテキストの例。

この例もまた、1つの親文字セグメントとルビ注釈をもつ2つの連続的なruby要素（上記マークアップ内のような）よりもむしろ、親文字の2つのセグメントと2つのルビ注釈（それぞれについて1つ）をもつ1つのruby要素を使用して、次のように書くことができる： 

<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>
で<ruby>書<rt>か</rt></ruby>
いた<ruby>作<rt>さく</rt>文<rt>ぶん</rt></ruby>です。
グループルビ

グループルビは多くの場合、音声注釈が目立たない親文字に対応づけしない場合、または全体のベーステキストにまたがるセマンティックな注釈に対して使用される。たとえば、単語"today"は文字通り"this day"として、今日という文字で書かれる。しかし、これはきょう（kyou）と発音され、"this"の部分と"day"の部分に分けることができない。典型的なレンダリングにおいて、グループルビで注釈されたテキストを分割することはできない。ルビテキストは隣の行に単一ユニットとして包む必要がある。ルビテキスト注釈が複数の文字で構成されたベースに対応づける場合、そのベースはグループ化される。

以下のグループルビは：

Group ruby example with きょう annotating 今日

以下のようにマークアップできる： 

<ruby>今日<rt>きょう</ruby>
熟語ルビ

熟語は、日本の複合名詞、すなわち複数の漢字で構成された単語を指す。熟語ルビは、熟語テキストの上にルビ注釈を記述するのではなく、モノルビまたはグループルビと若干異なる挙動をもつルビを記述するために使用される用語である。熟語ルビは、ルビテキストと個々の親文字の間に強い関連があるという点でモノルビに似ているが、ルビテキストは一般に親文字が同一行上にある場合、複数の表意文字の上に一緒にグループとしてレンダリングされる。

区別は、この例で捕捉される：

熟語ルビの例

以下のようにマークアップできる： 

<ruby>法<rb>華<rb>経<rt>ほ<rt>け<rt>きょう</ruby>

この例において、各rt要素は、それぞれのrb要素とペアになっている。交互に扱われたrb/rtアプローチとの違いは、グループ化情報が捕捉されるために、ベーステキストとルビ注釈の両方のシーケンスは暗黙的に共通のコンテナに収納されている、というところにある。

熟語ルビのレンダリングの詳細については、日本語組版処理の要件の付録FおよびUse Cases & Exploratory Approaches for Ruby MarkupのUse Case Cを参照のこと。[JLREQ] [RUBY-UC]

インラインルビ

文脈によっては、たとえば、フォントサイズまたは行の高さがルビの読みやすさに対して小さすぎる場合、ルビが注釈するテキストの後の括弧内にルビが表示されるように、ルビをインライン化することが望ましい。これはまた、ルビ注釈のレンダリングをサポートしないユーザエージェントに対する手頃なフォールバック戦略を提供する。

インライン化はグループ化を考慮に入れる。たとえば、Tokyoは、「とう」と発音される東と「きょう」と発音される京の2つの漢字で書かれる。各親文字は個別に注釈を付けられるべきだが、フォールバックは東（とう）京（きょう）ではなく東京（とうきょう）となるべきである。以下のようにマークアップできる： 

<ruby>東<rb>京<rt>とう<rt>きょう</ruby>

上記のマークアップは、挿入句フォールバックを提供するために失敗する際に、ルビレイアウトをサポートするブラウザに対してでなく、サポートしないブラウザに対するインライン化が、括弧の使用を可能にすることに注意する。これは、rp要素が有用である場合である。ルビレイアウトがサポートされない場合、適切なフォールバックを提供するために、上記の例の中に挿入できる： 

<ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby>
表音とセマンティック両方の注釈をもつテキスト（両側ルビ）

ルビはベースに二度注釈を付けるためにも使用できる。

次の例において、サンフランシスコに対する中国語の単語（旧金山、すなわち「古い金の山」）は、発音を与えるためにピンインを使用するものと元の英語の両方を注釈付けられている。

San Francisco in Chinese, with both pinyin and the original English as annotations.

次のようにマークアップできる： 

<ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby>

この例において、3つのベース文字の続く単一ベースは、最初の（暗黙の）コンテナで3つのピンインのルビテキストセグメントで注釈付けられ、rtc要素は、都市の英語名である第二の単一ルビテキスト注釈を提供するために導入されている。

また、ベースと注釈グループ化情報への組み合わせを同時に維持しつつ、熟語が仮名とローマ字発音の両方で注釈付けできる方法を示すために上手（"skill"）について上記の熟語の例を再検討することができる。

上手 ("skill") annotated in both kana and romaji, shown in both jukugo and mono styles.

次のようにマークアップできる： 

<ruby><rb>上<rb>手<rt>じよう<rt>ず<rtc><rt>jou<rt>zu</ruby>

あたかもテキストがrtc要素に含まれているかのように、rt要素の直接の子であるテキストは、暗黙のうちにルビテキストセグメントを生成する。以下の作為的な例において、これは、ベースシンボルの両側に表示されるよう意図される注釈をもつ英語とフランス語の名前を与えられる複数の記号で示されている。 

<ruby>
  ♥<rt>Heart<rtc lang=fr>Cœur</rtc>
  ☘<rt>Shamrock<rtc lang=fr>Trèfle</rtc>
  ✶<rt>Star<rtc lang=fr>Étoile
</ruby>

同様に、あたかもテキストがrb要素に含まれていたかのように、ruby要素内のテキストは直接、暗黙のルビベースを生成し、rubyのrtの子は、暗黙的にrtcコンテナに含まれる。実際には、（DOMで生成しないものの、意味として）上の例は次と等価である： 

<ruby>
  <rb>♥</rb><rtc><rt>Heart</rt></rtc><rtc lang=fr><rt>Cœur</rt></rtc>
  <rb>☘</rb><rtc><rt>Shamrock</rt></rtc><rtc lang=fr><rt>Trèfle</rt></rtc>
  <rb>✶</rb><rtc><rt>Star</rt></rtc><rtc lang=fr><rt>Étoile</rt></rtc>
</ruby>

Within a ruby element, content is parcelled into a series of ruby segments. Each ruby segment is described by:

Each ruby text container is described by zero or more ruby text annotations each of which is a DOM range that may contain phrasing content or an rt element, and an annotations range that is a range including all the annotations for that container. A ruby text container is also known (primarily in a CSS context) as a ruby annotation container.

Furthermore, a ruby element contains ignored ruby content. Ignored ruby content does not form part of the document's semantics. It consists of some inter-element whitespace and rp elements, the latter of which are used for legacy user agents that do not support ruby at all.

The process of annotation pairing associates ruby annotations with ruby bases. Within each ruby segment, each ruby base in the ruby base container is paired with one ruby text annotation from the ruby text container, in order. If there are not enough ruby text annotations in a ruby annotation container, the last one is associated with any excess ruby bases. (If there are not any in the ruby annotation container, an anonymous empty one is assumed to exist.) If there are not enough ruby bases, any remaining ruby text annotations are assumed to be associated with empty, anonymous bases inserted at the end of the ruby base container.

Note that the terms ruby segment, ruby base, ruby text annotation, ruby text container, ruby base container, and ruby annotation container have their equivalents in CSS Ruby Module Level 1. [CSSRUBY]

Informally, the segmentation and categorisation algorithm below performs a simple set of tasks. First it processes adjacent rb elements, text nodes, and non-ruby elements into a list of bases. Then it processes any number of rtc elements or sequences of rt elements that are considered to automatically map to an anonymous ruby text container. Put together these data items form a ruby segment as detailed in the data model above. It will continue to produce such segments until it reaches the end of the content of a given ruby element. The complexity of the algorithm below compared to this informal description stems from the need to support an author-friendly syntax and being mindful of inter-element white space.

At any particular time, the segmentation and categorisation of content of a ruby element is the result that would be obtained from running the following algorithm:

  1. アルゴリズムが実行しているものに対してrootをruby要素とする。
  2. indexを0にする。
  3. Let ruby segments be an empty list.
  4. Let current bases be an empty list of DOM ranges.
  5. Let current bases range be null.
  6. Let current bases range start be null.
  7. Let current annotations be an empty list of DOM ranges.
  8. Let current annotations range be null.
  9. Let current annotations range start be null.
  10. Let current annotation containers be an empty list.
  11. Let current automatic base nodes be an empty list of DOM Nodes.
  12. Let current automatic base range start be null.
  13. Process a ruby child: If index is equal to or greater than the number of child nodes in root, then run the steps to commit a ruby segment, return ruby segments, and abort these steps.
  14. Let current child be the indexth node in root.
  15. If current child is not a Text node and is not an Element node, then increment index by one and jump to the step labelled process a ruby child.
  16. If current child is an rp element, then increment index by one and jump to the step labelled process a ruby child. (Note that this has the effect of including this element in any range that we are currently processing. This is done intentionally so that misplaced rp can be processed correctly; semantically they are ignored all the same.)
  17. If current child is an rt element, then run these substeps:
    1. Run the steps to commit an automatic base.
    2. Run the steps to commit the base range.
    3. If current annotations is empty, set current annotations range start to the value of index.
    4. Create a new DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one), and append it at the end of current annotations.
    5. Increment index by one and jump to the step labelled process a ruby child.
  18. If current child is an rtc element, then run these substeps:
    1. Run the steps to commit an automatic base.
    2. Run the steps to commit the base range.
    3. Run the steps to commit current annotations.
    4. Create a new ruby annotation container. It is described by the list of annotations returned by running the steps to process an rtc element and a DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one). Append this new ruby annotation container at the end of current annotation containers.
    5. Increment index by one and jump to the step labelled process a ruby child.
  19. If current child is a Text node and is inter-element whitespace, then run these substeps:
    1. If current annotations is not empty, increment index by one and jump to the step labelled process a ruby child.
    2. Run the following substeps:
      1. Let lookahead index be set to the value of index.
      2. Peek ahead: Increment lookahead index by one.
      3. If lookahead index is equal to or greater than the number of child nodes in root, then abort these substeps.
      4. Let peek child be the lookahead indexth node in root.
      5. If peek child is a Text node and is inter-element whitespace, then jump to the step labelled peek ahead.
      6. If peek child is an rt element, an rtc element, or an rp element, then set index to the value of lookahead index and jump to the step labelled process a ruby child.
  20. If current annotations is not empty or if current annotation containers is not empty, then run the steps to commit a ruby segment.
  21. If current child is an rb element, then run these substeps:
    1. Run the steps to commit an automatic base.
    2. If current bases is empty, then set current bases range start to the value of index.
    3. Create a new DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one), and append it at the end of current bases.
    4. Increment index by one and jump to the step labelled process a ruby child.
  22. If current automatic base nodes is empty, set current automatic base range start to the value of index.
  23. Append current child at the end of current automatic base nodes.
  24. Increment index by one and jump to the step labelled process a ruby child.

When the steps above say to commit a ruby segment, it means to run the following steps at that point in the algorithm:

  1. Run the steps to commit an automatic base.
  2. If current bases, current annotations, and current annotation containers are all empty, abort these steps.
  3. Run the steps to commit the base range.
  4. Run the steps to commit current annotations.
  5. Create a new ruby segment. It is described by a list of bases set to current bases, a base DOM range set to current bases range, and a list of ruby annotation containers that are the current annotation containers list. Append this new ruby segment at the end of ruby segments.
  6. Let current bases be an empty list.
  7. Let current bases range be null.
  8. Let current bases range start be null.
  9. Let current annotation containers be an empty list.

When the steps above say to commit the base range, it means to run the following steps at that point in the algorithm:

  1. If current bases is empty, abort these steps.
  2. If current bases range is not null, abort these steps.
  3. Let current bases range be a DOM range whose start is the boundary point (root, current bases range start) and whose end is the boundary point (root, index).

When the steps above say to commit current annotations, it means to run the following steps at that point in the algorithm:

  1. If current annotations is not empty and current annotations range is null let current annotations range be a DOM range whose start is the boundary point (root, current annotations range start) and whose end is the boundary point (root, index).
  2. If current annotations is not empty, create a new ruby annotation container. It is described by an annotations list set to current annotations and a range set to current annotations range. Append this new ruby annotation container at the end of current annotation containers.
  3. Let current annotations be an empty list of DOM ranges.
  4. Let current annotations range be null.
  5. Let current annotations range start be null.

When the steps above say to commit an automatic base, it means to run the following steps at that point in the algorithm:

  1. If current automatic base nodes is empty, abort these steps.
  2. If current automatic base nodes contains nodes that are not Text nodes, or Text nodes that are not inter-element whitespace, then run these substeps:
    1. It current bases is empty, set current bases range start to the value of current automatic base range start.
    2. Create a new DOM range whose start is the boundary point (root, current automatic base range start) and whose end is the boundary point (root, index), and append it at the end of current bases.
  3. Let current automatic base nodes be an empty list of DOM Nodes.
  4. Let current automatic base range start be null.

4.5.22 rb要素

カテゴリ：
なし。
この要素を使用できるコンテキスト：
ruby要素の子として。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：

rb要素が別のrb、rt、rtcまたはrp要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、rt要素の終了タグは省略してもよい。

許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

rb要素は、ルビ注釈のベーステキストコンポーネントをマークする。この要素がruby要素の子である場合、この要素は何もそれ自身を表さないが、親ruby要素は、この要素が何を表すかを決定するものの一部として使用する。

An rb element that is not a child of a ruby element represents the same thing as its children.

4.5.23 rt要素

カテゴリ：
なし。
この要素を使用できるコンテキスト：
ruby要素またはrtc要素の子として。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：

rt要素がrb、rt、rtcまたはrp要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、rt要素の終了タグは省略してもよい。

許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

rt要素は、ルビ注釈のルビテキストコンポーネントをマークする。この要素がruby要素の子である、またはruby要素の子であるrtc要素の子の場合、この要素は何らそれ自身を表さないが、先祖ruby要素は、この要素が何を表すかを決定するものの一部として使用する。

An rt element that is not a child of a ruby element or of an rtc element that is itself the child of a ruby element represents the same thing as its children.

4.5.24 rtc要素

カテゴリ：
なし。
この要素を使用できるコンテキスト：
ruby要素の子として。
コンテンツモデル：
フレージングコンテンツまたはrt要素。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：

rtc要素がrb、rtcまたはrp要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、rtc要素の終了タグは省略してもよい。

許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

rtc要素は、ルビ注釈でルビテキストコンポーネントのためのルビテキストコンテナをマークする。この要素がruby要素の子である場合、この要素は何らそれ自身を表さないが、親ruby要素は、この要素が何を表すかを決定するものの一部として使用する。

An rtc element that is not a child of a ruby element represents the same thing as its children.

When an rtc element is processed as part of the segmentation and categorisation of content for a ruby element, the following algorithm defines how to process an rtc element:

  1. Let root be the rtc element for which the algorithm is being run.
  2. indexを0にする。
  3. Let annotations be an empty list of DOM ranges.
  4. Let current automatic annotation nodes be an empty list of DOM nodes.
  5. Let current automatic annotation range start be null.
  6. Process an rtc child: If index is equal to or greater than the number of child nodes in root, then run the steps to commit an automatic annotation, return annotations, and abort these steps.
  7. Let current child be the indexth node in root.
  8. If current child is an rt element, then run these substeps:
    1. Run the steps to commit an automatic annotation.
    2. Create a new DOM range whose start is the boundary point (root, index) and whose end is the boundary point (root, index plus one), and append it at the end of annotations.
    3. Increment index by one and jump to the step labelled process an rtc child.
  9. If current automatic annotation nodes is empty, set current automatic annotation range start to the value of index.
  10. Append current child at the end of current automatic annotation nodes.
  11. Increment index by one and jump to the step labelled process an rtc child.

When the steps above say to commit an automatic annotation, it means to run the following steps at that point in the algorithm:

  1. If current automatic annotation nodes is empty, abort these steps.
  2. If current automatic annotation nodes contains nodes that are not Text nodes, or Text nodes that are not inter-element whitespace, then create a new DOM range whose start is the boundary point (root, current automatic annotation range start) and whose end is the boundary point (root, index), and append it at the end of annotations.
  3. Let current automatic annotation nodes be an empty list of DOM nodes.
  4. Let current automatic annotation range start be null.

4.5.25 rp要素

カテゴリ：
なし。
この要素を使用できるコンテキスト：
直前または直後のrtまたはrtc要素のいずれかだが、rt要素の間でないruby要素の子として。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：

rp要素が別のrb、rt、rtcまたはrp要素の直前に存在する場合、または親要素に追加のコンテンツが存在しない場合、rt要素の終了タグは省略してもよい。

許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

rp要素は、ルビをサポートしないユーザーエージェントによって示されるだろうフォールバックテキストを提供するために使用される。一つの広範な慣習は、ルビ注釈のルビテキストコンポーネントを囲む括弧を提供することである。

rp要素のコンテンツは、一般にルビをサポートするユーザーエージェントでは表示されない。

An rp element that is a child of a ruby element represents nothing. An rp element whose parent element is not a ruby element represents its children.

テキスト漢字で各表意文字がその読みのふりがなの注釈をもつ以前の例は、レガシーユーザーエージェントで読みが括弧内にあるので、rpを使用するように拡張できる（読みやすさのために、空白がこの例に導入されていることに注意する）： 

...
<ruby>
  漢
  <rb>字</rb>
  <rp> (</rp>
  <rt>かん</rt>
  <rt>じ</rt>
  <rp>) </rp>
</ruby>
...

適合ユーザーエージェントでのレンダリングは前述のようになるが、ルビがサポートされないユーザーエージェントにおいて、レンダリングは次のようになるだろう： 

... 漢字 (かんじ) ...

セグメントに複数の注釈がある場合、rp要素はまた注釈の間に配置できる。これは英語とフランス語で与えられた名前を持つ一部のシンボルを示す以前の作為的な例のもう1つのコピーだが、今回は同様にrp要素をもつ： 

<ruby>
  ♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rtc><rt lang=fr>Cœur</rt></rtc><rp>.</rp>
  ☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rtc><rt lang=fr>Trèfle</rt></rtc><rp>.</rp>
  ✶<rp>: </rp><rt>Star</rt><rp>, </rp><rtc><rt lang=fr>Étoile</rt></rtc><rp>.</rp>
</ruby>

これは、たとえばレンダリングが非ルビ対応のユーザーエージェントでは次のようになるだろう： 

♥: Heart, Cœur.
☘: Shamrock, Trèfle.
✶: Star, Étoile.

4.5.26 bdi要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
また、dirグローバル属性は、この要素で特別なセマンティックを持つ。
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

bdi要素は、双方向テキスト書式設定の意図に対してその周囲から分離されるべきテキストの範囲を表す。[BIDI]

dirグローバル属性は、この要素上でデフォルトでautoとなる（他の要素と同様に、親要素から継承しない）。

This element has rendering requirements involving the bidirectional algorithm.

未知の方向とともにユーザー生成コンテンツを組み込む場合、この要素は特に便利である。

この例において、ユーザー名はユーザーが送信したポストの数とともに表示される。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>

4.5.27 bdo要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
また、dirグローバル属性は、この要素で特別なセマンティックを持つ。
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

bdo要素は、その子に対する明示的なテキスト方向の書式設定コントロールを表す。この要素は、作者が明示的に方向の上書きを指定することによって、Unicode双方向アルゴリズムを上書きできる。[BIDI]

著者は、左から右への上書きを指定する値ltrと、右から左への上書きを指定する値rtlとともに、この要素のdir属性を指定しなければならない。auto値は指定されてはならない。

This element has rendering requirements involving the bidirectional algorithm.

4.5.28 span要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
パルパブルコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
フレージングコンテンツ。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
どちらのタグも省略不可
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
interface HTMLSpanElement : HTMLElement {};

span要素はそれ自身では何の意味もないが、たとえばclass、lang、または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.29 br要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
空。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
終了タグなし
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
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要素を除いて何も構成しない場合、プレースホルダーの空白行を（たとえば、テンプレート内）を表す。そのような空白行は、プレゼンテーションの目的に対して使用してはならない。

Any content inside br elements must not be considered part of the surrounding text.

This element has rendering requirements involving the bidirectional algorithm.

4.5.30 wbr要素

カテゴリ：
フローコンテンツ。
フレージングコンテンツ。
この要素を使用できるコンテキスト：
フレージングコンテンツが期待される場所。
コンテンツモデル：
空。
コンテンツ属性：
グローバル属性
text/htmlにおけるタグ省略：
終了タグなし
許可されるARIAロール属性値：
任意のrole値。
許可されるARIAステートおよびプロパティー：
グローバルaria-* 属性
許可されるロールで受け入れ可能な任意のaria-*属性。
DOMインターフェース：
HTMLElementを使用する。

wbr要素は改行の機会を表す。

次の例において、効果があるように一つの長い単語として書かれる発言としてある人が引用される。しかし、テキストが読める形に包まれることを保証するために、引用内の個別の単語はwbr要素を使用して分離される。

<p>So then he 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要素を使用して与えられた点を包むよう示唆している。

<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>

Any content inside wbr elements must not be considered part of the surrounding text.

This element has rendering requirements involving the bidirectional algorithm.

4.5.31 使用方法の概要

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

要素 目的 例
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>.
data 等価な機械可読形式 
Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>
time 日付または時間関連データの等価な機械可読形式 
Available starting on <time datetime="2011-11-12">November 12th</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.
ruby, rb, rp, rt, rtc ルビ注釈 
<ruby> <rb>OJ <rp>(<rtc><rt>Orange Juice</rtc><rp>)</ruby>
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