HTML

Living Standard — Last Updated 6 December 2024

1. 1. 4.5 Text-level semantics
      1. 4.5.1 The a element
      2. 4.5.2 The em element
      3. 4.5.3 The strong element
      4. 4.5.4 The small element
      5. 4.5.5 The s element
      6. 4.5.6 The cite element
      7. 4.5.7 The q element
      8. 4.5.8 The dfn element
      9. 4.5.9 The abbr element
      10. 4.5.10 The ruby element
      11. 4.5.11 The rt element
      12. 4.5.12 The rp element
      13. 4.5.13 The data element
      14. 4.5.14 The time element
      15. 4.5.15 The code element
      16. 4.5.16 The var element
      17. 4.5.17 The samp element
      18. 4.5.18 The kbd element
      19. 4.5.19 The sub and sup elements
      20. 4.5.20 The i element
      21. 4.5.21 The b element
      22. 4.5.22 The u element
      23. 4.5.23 The mark element
      24. 4.5.24 The bdi element
      25. 4.5.25 The bdo element
      26. 4.5.26 The span element
      27. 4.5.27 The br element
      28. 4.5.28 The wbr element
      29. 4.5.29 Usage summary

4.5 Text-level semantics

4.5.1 The a element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

要素がhref属性を持つ場合：インタラクティブコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

href — ハイパーリンクのアドレス

target — Navigable for hyperlink navigation

download — Whether to download the resource instead of navigating to it, and its filename if so

ping — URLへのping

rel — ハイパーリンクを含む文書における位置と宛先のリソースの関係

hreflang — リンクされたリソースの言語

type — 参照されるリソースタイプのヒント

referrerpolicy — 要素によって開始されたフェッチのためのリファラポリシー

Accessibility considerations:

If the element has an href attribute: for authors; for implementers.

Otherwise: for authors; for implementers.

DOMインターフェイス：

[Exposed=Window]
interface HTMLAnchorElement : HTMLElement {
  [HTMLConstructor] constructor();

  [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;

  // also has obsolete members
};
HTMLAnchorElement includes HTMLHyperlinkElementUtils;

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

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

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

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

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

a.text

textContentと同じ。

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

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

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

The text attribute's getter must return this element's descendant text content.

The text attribute's setter must string replace all with the given value within this element.

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

<table>
 <tr>
  <th>Position
  <th>Team
  <th>Location
 <tr>
  <td><a href="/jobs/manager">Manager</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/director">Director</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/astronaut">Astronaut</a>
  <td>Architecture
  <td>Remote
</table>
<script>
document.querySelector("table").onclick = ({ target }) => {
  if (target.parentElement.localName === "tr") {
    const link = target.parentElement.querySelector("a");
    if (link) {
      link.click();
    }
  }
}
</script>

4.5.2 The em element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

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>

4.5.3 The strong element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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

重要性：strong要素は、より詳細な、より陽気な、または単に常用文かもしれない部分から本当に重要である部分を区別するために、見出し、キャプション、または段落で使用できる。（これはhgroup要素が適切である、小見出しのマークアップとは区別される。）

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

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

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

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

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

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

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

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

<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 The small element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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

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

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

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

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

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

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

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.5.5 The s element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

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 The cite element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc.). This can be a work that is being quoted or referenced in detail (i.e., a citation), or it can just be a work that is mentioned in passing.

人名は作品のタイトルではない―たとえ人々がその人を作品の一部とみなすとしても―したがって要素は人名をマークアップするために使用してはならない。（一部の場合、b要素が名前に対して適切であるかもしれない。たとえば、有名人の名前が注意を引くために別のスタイルを使用してレンダリングされるキーワードであるようなゴシップ記事において。他の例では、要素が本当に必要である場合、span要素を使用できる。）

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

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

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

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

<p><cite>This is wrong!</cite>, said Ian.</p>

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

<p><q>This is correct</q>, said Ian.</p>

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

4.5.7 The q element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

cite — 編集に関する引用またはより多くの情報源へのリンク

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLQuoteElementを使用する。

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

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

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

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

q要素は、引用文を表さない引用符の代わりに使用してはならない。たとえば、風刺文をマークアップするためにq要素を使用するのは不適切である。

引用文をマークアップするためのq要素の使用は完全に任意である。q要素なしで明示的に引用句読点を使用は同様に正しい。

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

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

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

4.5.8 The dfn element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ、ただしdfn要素の子孫が存在してはならない。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Also, the title attribute has special semantics on this element: Full term or expansion of abbreviation

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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

用語の定義：dfn要素がtitle属性を持つ場合、その属性の正確な値が定義されている用語である。そうでなければ、要素が正確に1つの要素の子ノードおよび子Textノードを含み、その子要素がtitle属性を持つabbr要素である場合、その属性の正確な値は、定義されている用語である。Otherwise, it is the descendant text content of the dfn element that gives the term being defined.

dfn要素のtitle属性が存在する場合、属性は定義されている用語のみを含まなければならない。

先祖要素のtitle属性はdfn要素に影響しない。

dfn要素へリンクするa要素は、dfn要素によって定義される用語の実体を表す。

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

<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 The abbr element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Also, the title attribute has special semantics on this element: Full term or expansion of abbreviation

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

abbr要素は、任意でその完全表記を伴う、略語や頭字語を表す。title属性は、略語の完全表記を提供するために使用されてもよい。属性が指定される場合は、略語の完全表記を含まなければならず、他には何も持たない。

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

<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属性をもつabbr要素を使用することが、完全表記インライン（括弧内など）に代わるものである場所で、著者が完全表記を与えることを望む略語。
• 著者が、title属性をもつabbr要素を用いて略語をマークアップする、またはテキストで略語が初めて使用される、完全表記インラインを含むのいずれかを推奨されるような、文書の読者になじみの薄い可能性が高い略語。
• その存在がセマンティックに注釈を付ける必要がある略語。たとえば、それらがスタイルシートから特定され、abbr要素がtitle属性なしで使用できる特定のスタイルを与えることができる。

一度title属性で完全表記を提供しても、同じコンテンツをもつがあたかもコンテンツが同じ完全表記を持つかのように機能するためのtitle属性をもたない同じ文書における他のabbrをもたらすとは必ずしも限らない。すべてのabbr要素は独立である。

4.5.10 The ruby element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

文参照。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

ruby要素は、ルビ注釈をマークする1つ以上のフレージングコンテンツの範囲を与える。ルビ注釈は、発音の案内または他の注釈を含むものとして東アジアの活版印刷で主に使用される、ベーステキストと並んで表示される短いテキストである。日本語において活版印刷のこの形式は、振り仮名としても知られる。

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

1. 次のどれか一方：

   • フレージングコンテンツ、ただしruby要素およびruby要素の子孫を除く。

   • 単一のruby要素、ただしそれ以上のruby要素の子孫を除く

2. 次のどれか一方：

   • 1つ以上のrt要素

   • 1つ以上のrt要素が続くrp要素で、それぞれがrp要素が続く

rubyとrt要素は、特に（特定の意味に限らず）以下で説明するように、注釈のさまざまな種類に対して使用できる。より具体的な日本語ルビの詳細、およびどのように日本語ルビをレンダリングするのかについては、日本語組版処理の要件を参照のこと。[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>

In more complicated situations such as the following examples, a nested ruby element is used to give the inner annotations, and then that whole ruby is then given an annotation at the "outer" level.

<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. アルゴリズムが実行しているものに対してrootをruby要素とする。

4. rootがruby要素の祖先を持つ場合、ステップラベルendにジャンプする。

5. current parentをrootにする。

6. indexを0にする。

7. start indexをnullにする。

8. parent start indexをnullにする。

9. current base textをnullにする。

10. Start mode: If index is greater than or equal to the number of child nodes in current parent, then jump to the step labeled end mode.

11. current parentでindex番目のノードがrtまたは rp要素の場合、annotation modeのラベルが付いたステップへジャンプする。

12. start indexをindexの値に設定する。

13. Base mode：current parentでのindex番目のノードがruby要素の場合、かつcurrent parentがrootと同じ要素の場合、rubyレベルをプッシュし、ラベルstart modeのステップにジャンプする。

14. current parentでindex番目のノードがrtまたは rp要素の場合、現在のベーステキストを設定し、ラベルannotation modeのステップにジャンプする。

15. indexを1でインクリメントする。

16. Base mode post-increment: If index is greater than or equal to the number of child nodes in current parent, then jump to the step labeled end mode.

17. base modeにラベル付けされたステップにジャンプする。

18. Annotation mode：current parentでindex番目のノードがrt要素の場合、ルビ注釈をプッシュし、ラベルannotation mode incrementにジャンプする。

19. current parentでindex番目のノードがrp要素の場合、 ラベルannotation mode incrementのステップにジャンプする。

20. current parentでindex番目のノードがTextノードでない、または要素間空白でないTextノードの場合、ラベルbase modeのステップにジャンプする。

21. Annotation mode increment：lookahead indexをindexに1加えるものにする。

22. Annotation mode white-space skipper： lookahead indexがcurrent parentで子ノードの数以上の場合、ラベルend modeのステップにジャンプする。

23. current parentでのlookahead index番目のノードがrt要素またはrp要素である場合、indexに lookahead 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 mode： current parentがrootと同じ要素でない場合、ルビレベルをポップし、ラベルbase mode post-incrementのステップにジャンプする。

28. End： base text segmentsおよびannotation segmentsを返す。これらリストのいずれかのセグメントによって説明されないruby要素の任意のコンテンツは、暗黙のうちにignored segmentである。

上記のステップで現在のベーステキストを設定するという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する：

1. text rangeを境界ポイント（current parent、start index）で開始し、境界ポイント(current parent, index)で終了するDOM範囲にする。

2. new text segmentを範囲annotation rangeで記述されるベーステキストセグメントにする。

3. new text segmentをbase text segmentsに加える。

4. current base textをnew text segmentにする。

5. start indexをnullにする。

上記のステップでルビレベルをプッシュするという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する：

1. current parentをcurrent parentのindex番目のノードにする。

2. indexを0にする。

3. saved start indexをstart indexの値に設定する。

4. start indexをnullにする。

上記のステップでルビレベルをポップするという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する：

1. indexをrootでcurrent parentの位置にする。

2. current parentをrootにする。

3. indexを1でインクリメントする。

4. start indexをsaved start indexの値に設定する。

5. saved start indexをnullにする。

上記のステップでルビ注釈をプッシュするという場合、これは、アルゴリズムでその時点の次のステップを実行することを意味する：

1. rtをcurrent parentのindex番目のノードであるrt要素にする。

2. annotation rangeを境界ポイント（current parent、start index）で開始し、境界ポイント(current parent, indexに１を加える)（すなわちrtのみを含む）で終了するDOM範囲にする。

3. new annotation segmentを範囲annotation rangeで記述される注釈セグメントにする。

4. current base textがnullでない場合、new annotation segmentとcurrent base textを結びつけて考える。

5. new annotation segmentをannotation segmentsに加える。

...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

<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 The rt element

カテゴリー：

なし。

この要素を使用できるコンテキスト：

ruby要素の子として。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

rt要素が別のrtまたはrp要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、rt要素の終了タグは省略することができる。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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

ruby要素の子でないrt要素は、その子と同じものを表す。

4.5.12 The rp element

カテゴリー：

なし。

この要素を使用できるコンテキスト：

直前または直後のrt要素のいずれかで、ruby要素の子として。

コンテンツモデル：

Text。

text/htmlにおけるタグ省略：

rp要素が別のrtまたはrp要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、rp要素の終了タグは省略することができる。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

rp要素は、ルビ注釈をサポートしないユーザーエージェントによって示される、ルビ注釈のルビテキストコンポーネントを囲む括弧または別のコンテンツを提供するために使用できる。

ruby要素の子であるrp要素は何も表さない。親要素がruby要素でないrp要素は、その子を表す。

...
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>
...

... 漢（かん）字（じ）...

<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 The data element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

value — 機械可読な値

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

[Exposed=Window]
interface HTMLDataElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString value;
};

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

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

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

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

When combined with microformats or the microdata attributes defined in this specification, 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-*属性もそのような状況において有用でありうる。）

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

<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 The time element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

要素がdatetime属性をもつ場合：フレージングコンテンツ。

そうでなければ：Text。ただし、本文で与えられる要件にマッチしなければならない。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

datetime — 機械可読な値

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

[Exposed=Window]
interface HTMLTimeElement : HTMLElement {
  [HTMLConstructor] constructor();

  [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. If parsing a month string from the element's datetime value returns a month, that is the machine-readable equivalent; return.

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

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

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

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

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

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

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

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

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

11. 機械可読な等価物は存在しない。

上記で参照したアルゴリズムは、アルゴリズムの1つのみが値を返すよう、任意の文字列sに対して設計されるよう意図される。より効率的なアプローチは、一つのパス内のすべてのこのデータ型を解析する単一のアルゴリズムを作成することかもしれない。そのようなアルゴリズムを開発することは読者への課題として残される。

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

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

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

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

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

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 The code element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

code要素は、コンピューターコードの断片を表す。This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.

マークアップされているコンピューターコードの言語を示すための、正式な方法はない。使用される言語と一緒に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 class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

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

4.5.16 The var element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

var要素は変数を表す。これは、数式やプログラミングコンテキスト、定数を表す識別子、物理量を識別する記号、関数パラメーター、または単に文のプレースホルダーとして使用される用語で、実際に変数であるかもしれない。

<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の表現で言及される特定の変数を参照するために使用できる。

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

<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 The samp element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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

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

This element can be contrasted with the output element, which can be used to provide immediate output in a web application.

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

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

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

4.5.18 The kbd element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

kbd要素は、ユーザーの入力（この要素はまた、音声コマンドなど、他の入力を表すために使用されるかもしれないが、通常はキーボード入力）を表す。

kbd要素がsamp要素内にネストされる場合、この要素はシステムによってエコーされたような入力を表す。

kbd要素がsamp要素を含む場合、この要素はメニュー項目を呼び出す例に対して、システムの出力に基づく入力を表す。

kbd要素が他のkbd要素内にネストされる場合、入力機構に応じて、実際のキーまたは入力の他の単独装置を表す。

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>

<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 The sub and sup elements

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

The sub element: for authors; for implementers.

The sup element: for authors; for implementers.

DOMインターフェイス：

HTMLElementを使用する。

sup要素は、上付き文字を表し、sub要素は、下付き文字を表す。

これらの要素は、プレゼンテーションの目的に対する表記規則のためでなく、明確な意味を伴う表記規則をマークアップするためのみに使用しなければならない。たとえば、subおよびsup要素にLaTeX文書作成システムの名前に使用することは不適切だろう。一般に、これら要素の不在がコンテンツの意味を変更するような場合にのみ、著者はこれらの要素を使用すべきである。

特定の言語において、上付き文字は略語の表記規則の一部である。

<p>Their names 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要素内で使用できる。

<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 The i element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

i要素は、代わりの声やムードでテキストの範囲を表すか、またはそうでなければ、たとえば分類学上の名称、専門用語、他言語の慣用句、意見、または西洋のテキストで船名など、異なる品質のテキストを示す方法で通常の文からのオフセットを表す。

主テキストと異なる言語の用語はlang属性（または、XMLでXML名前空間のlang属性）で注釈を付けるべきである。

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

<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 The b element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

b要素は、たとえば、文書の概要でのキーワード、レビューでの製品名、対話的なテキスト駆動型ソフトウェアでの使用可能語、または記事リードなど、特別な重要性を伝えることなく、代わりの声やムードの意味合いなしに、実用的な目的に対して描かれている注目すべきテキストの範囲を表す。

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

<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要素の書式を設定するために使用できる。したがって、この場合においてb要素のコンテンツが、必ずしも太字であるとは限らない。

4.5.22 The u element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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

ほとんどの場合、別の要素がより適切である可能性が高い。強調のマークアップに対してem要素を使用すべきであり、キーワードやフレーズに対して、コンテキストに応じてb要素かmark要素のいずれかを使用すべきであり、本のタイトルのマークアップに対してcite要素を使用すべきであり、明示的なテキスト注釈をもつテキストのラベル付けに対してruby要素を使用すべきであり、技術用語、分類学上の名称、音訳、意図、または西洋の文書で船名を標識するためにi要素を使用すべきである。

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

<p>The <u>see</u> is full of fish.</p>

4.5.23 The mark element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。

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>

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

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

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

<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 The bdi element

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

フレージングコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

Global attributes

また、dirグローバル属性は、この要素で特別なセマンティックスを持つ。

Accessibility considerations:

For authors.

For implementers.

DOMインターフェイス：

HTMLElementを使用する。