1. 4.5 テキストレベルセマンティックス
      1. 4.5.1 a要素
      2. 4.5.2 em要素
      3. 4.5.3 strong要素
      4. 4.5.4 small要素
      5. 4.5.5 s要素
      6. 4.5.6 cite要素
      7. 4.5.7 q要素
      8. 4.5.8 dfn要素
      9. 4.5.9 abbr要素
      10. 4.5.10 ruby要素
      11. 4.5.11 rt要素
      12. 4.5.12 rp要素
      13. 4.5.13 data要素
      14. 4.5.14 time要素
      15. 4.5.15 code要素
      16. 4.5.16 var要素
      17. 4.5.17 samp要素
      18. 4.5.18 kbd要素
      19. 4.5.19 subおよびsup要素
      20. 4.5.20 i要素
      21. 4.5.21 b要素
      22. 4.5.22 u要素
      23. 4.5.23 mark要素
      24. 4.5.24 bdi要素
      25. 4.5.25 bdo要素
      26. 4.5.26 span要素
      27. 4.5.27 br要素
      28. 4.5.28 wbr要素
      29. 4.5.29 使用方法の概要

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

4.5.1 a要素

Element/a

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
要素がhref属性を持つ場合:インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
透過的であるが、インタラクティブコンテンツの子孫、a要素の子孫、またはtabindex属性が指定された子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
hrefハイパーリンクのアドレス
targetハイパーリンクナビゲーションに対するナビゲート可能
download — リソースをナビゲートする代わりにダウンロードし、その場合リソースのファイル名にするかどうか
pingURLへのping
relハイパーリンクを含む文書における位置と宛先のリソースの関係
hreflang — リンクされたリソースの言語
type — 参照されるリソースタイプのヒント
referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシー
アクセシビリティの考慮
要素がhref属性を持つ場合:著者向け実装者向け
そうでなければ:著者向け実装者向け
DOMインターフェイス
HTMLAnchorElementを使用する。

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

a要素がhref属性を持たない場合、その要素は、当該要素のコンテンツのみにより構成される、関連するリンクがあった場合、リンクが他の方法で置かれただろう場所に対するプレースホルダーを表す

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

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

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

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

textContentと同じ。

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

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

次の例は、少しのスクリプトを使用して、求人一覧表の行全体を効果的にハイパーリンクにする方法を示している:

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

Element/em

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.5.3 strong要素

Element/strong

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

たとえば、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要素

Element/small

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

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

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

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

この例において、small要素は、付加価値税がホテルの部屋の料金に含まれないことを示すために使用される:

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

この2番目の例において、small要素は記事で付随するコメントに対して使用される。

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

次は、長く複数の段落かもしれず、かつ主要なテキストフローから削除される、サイドバーとは別個のものである。次の例において、同じ記事由来のサイドバーが見られる。このサイドバーはまた、サイドバーの中に情報のソースを示す、小さな活字体を持つ。

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

この最後の例において、small要素は、重要な小さな活字体であるものとしてマークされる。

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

4.5.5 s要素

Element/s

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

s要素は正確ではないか、もはや関連しないコンテンツを表す

文書の編集を示す場合、s要素は適切ではない。文書から削除されているものとしてテキスト範囲をマークするためには、del要素を使用する。

この例において、新たな販売価格を持つ問題の製品がもはや関連しないものとして、推奨小売価格がマークされている。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

4.5.6 cite要素

Element/cite

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

cite要素は、作品(たとえば、本、新聞、エッセイ、詩、楽譜、歌、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、映画、演劇、オペラ、ミュージカル、展示、訴訟事例報告、コンピュータープログラムなど)のタイトルを表す。これは、引用されるまたは詳細に参照される(すなわち引用文)作品かもしれず、またはそれは単に通りがかりに記載される作品かもしれない。

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

次の例は、cite要素の典型的な使用例を示す:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

これは正しい使い方である:

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

しかし、ここでcite要素が作品のタイトルよりもより多くを含むので、次は誤った使用方法である:

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

cite要素は参考文献の任意の引用の重要な部分であるが、それはタイトルをマークするためのみに使用される:

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

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

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

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

人は作品ではないので、これも誤った使い方である:

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

正しい使用法は、cite要素を使用しない。

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

前述したように、b要素は、文書の特定の種類においてのキーワードであるような名前をマークに対して関連するかもしれない:

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

4.5.7 q要素

Element/q

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
cite — 編集に関する引用またはより多くの情報源へのリンク
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLQuoteElementを使用する。

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

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

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

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

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

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

ここで、q要素の用法の簡単な例を示す:

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

これは、q要素で明示的な引用リンクと、外部への明示的な引用の両方を持つ例である:

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

次の例は、引用文自身が引用文を含む:

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

次の例において、引用符はq要素の代わりに使用される:

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

次の例では、引用文が存在しない―引用符は、単語を明示するために使用される。この場合のq要素の使用は不適切であろう。

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

4.5.8 dfn要素

Element/dfn

Support in all current engines.

Firefox1+Safari6+Chrome15+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ、ただしdfn要素の子孫が存在してはならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、title属性は、この要素で特別なセマンティックスを持つ:完全な用語または略語の展開
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

用語の定義dfn要素がtitle属性を持つ場合、その属性の正確な値が定義されている用語である。そうでなければ、要素が正確に1つの要素の子ノードおよび子Textノードを含み、その子要素がtitle属性を持つabbr要素である場合、その属性の正確な値は、定義されている用語である。そうでなければ、定義されている用語を与えるdfn要素の正確な子孫テキストコンテンツである。

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

Element/abbr

Support in all current engines.

Firefox1+Safari4+Chrome2+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer7+
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、title属性は、この要素で特別なセマンティックスを持つ:完全な用語または略語の展開
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

下記の段落はabbr要素でマークアップされた略語を含む。この段落は、"Web Hypertext Application Technology Working Group"という用語を定義する

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

これを記述する別の方法は、次のようになる:

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

この段落は、2つの略語を持つ。一方がどのように定義されるかのみに注目する。他方は、それに関連付けられている完全表記を持たず、abbr要素を使用しない。

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

この段落は、その定義に略語をリンクする。

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

この段落は、おそらく略語のスタイル(たとえば、スモールキャップ)を適用するためのフックとして、完全表記を与えずに略語をマークアップする。

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

略語が複数形の場合、完全表記の文法的な数(複数形対単数形)は、要素のコンテンツの文法的な数と一致しなければならない。

ここでは、複数形は要素の外にあるので、完全表記は単数形である:

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

ここでは、複数形は要素の内にあるので、完全表記は複数形である:

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

略語は、この要素を使用してマークアップする必要はない。それは次のような場合に有用であることが期待される:

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

4.5.10 ruby要素

Element/ruby

Support in all current engines.

Firefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
文参照。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

  1. 次のどれか一方:

  2. 次のどれか一方:

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

執筆時点において、CSSはまだ完全にHTML ruby要素のレンダリングを制御する方法を提供しない。CSSがやがて後述のスタイルをサポートするように拡張されることが望まれる。

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

1つ以上のひらがなまたはカタカナ(ルビ注釈)が、各表意文字(親文字)で配置される。これは漢字の読みを提供するために使用される。

<ruby>B<rt>annotation</ruby>

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

<ruby><rt>くん</ruby><ruby><rt></ruby><ruby><rt></ruby>して<ruby><rt>どう</ruby>ぜず。

くんしてどうぜず。

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

<ruby><rt>くん</rt><rt></ruby><ruby><rt></ruby>して<ruby><rt>どう</ruby>ぜず。
複合語(熟語)に対するモノルビ

これは、前の場合と同様である。複合語(親文字)内の各表意文字は、ひらがなまたはカタカナ文字(ルビ注釈)で与えられるその読みを持つ。違いは、親文字の文節が互いから離れるのではなく、複合語を形成することである。

<ruby>B<rt>annotation</rt>B<rt>annotation</ruby>

この例において、各注釈が単一の親文字に対応していることに再び注目する。この例において、各複合語(熟語)は、単一のruby要素に対応する。

ここでレンダリングは、隣接する文字のいずれにも上にかからない注釈とともに、各注釈が対応する親文字の上(または、縦書きテキストでは隣)に配置されることが期待される。

<ruby><rt></rt><rt>もん</rt></ruby><ruby><rt>ほう</rt><rt>がく</rt></ruby><ruby><rt>ぎょう</rt><rt></rt></ruby>する

もんほうがくぎょうする

熟語ルビ

これは前の場合(ベース複合語内の個々の表意文字が、ひらがなまたはカタカナ文字の注釈で指定される読みを持つ)とセマンティックに同じであるが、レンダリングは、より複雑な熟語ルビレンダリングである。

これは、上記の複合語に対するモノルビと同じ例となる。異なるレンダリングが異なるスタイリング(たとえばCSS)を用いて達成することが期待されるので、ここでは示されない。

<ruby><rt></rt><rt>もん</rt></ruby><ruby><rt>ほう</rt><rt>がく</rt></ruby><ruby><rt>ぎょう</rt><rt></rt></ruby>する

詳細については日本語組版処理の要件の附属書F、熟語ルビの配置方法を参照のこと。[JLREQ]

意味の記述に対するグループルビ

注釈は、発音ではなく(またはそれに加えて)親文字の意味を説明する。このように、親文字と注釈の両方は、複数の文字長にできる。

<ruby>BASE<rt>annotation</ruby>

ここで、複合表意語は、注釈として与えられる対応したカタカナを持つ。

<ruby>境界面<rt>インターフェース</ruby>

境界面インターフェース

ここで、複合表意語は、注釈として与えられる対応した英訳を持つ。

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

編集者editor

熟字の読みに対するグループルビ

1対1の対応付けが困難なため、複数の親文字に対応するふりがな。(英語において、単語"Colonel"と"Lieutenant"は、いくつかの方言ではなく、はっきりしない個々の文字へ発音の直接的な対応付けがある単語の例である。)

この例では、花の種の名前はグループルビを使用して提供される発音どおりのク読みを持つ。

<ruby>紫陽花<rt>あじさい</ruby>

紫陽花あじさい

表音とセマンティック両方の注釈をもつテキスト(両側ルビ)

時に、上記のルビスタイルが結合される。

これが同じ単一ベースセグメントをカバーする2つのルビ注釈をもたらす場合、注釈のみが連続的に配置できる。

<ruby>BASE<rt>annotation 1<rt>annotation 2</ruby>
<ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>

この不自然な例において、一部のシンボルが英語とフランス語で名前を与えられる。

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

以下の例のようにより複雑な状況において、ネストされたruby要素が内側の注釈を与えるために使用され、全体のrubyが、"外側"レベルで注釈を与える。

<ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby>

ここで表音の読みと意味の両方がルビ注釈に記載されている。外側のruby要素の子であるrt要素内の注釈はひらがなを使って意味を与える一方、ネストされたruby要素上の注釈は、各親文字のモノルビ表音注釈を与える。

<ruby><ruby><rt>とう</rt><rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角

とうなんたつみの方角

これは同じ例であるが、意味は日本語の代わりに英語で与えられる:

<ruby><ruby><rt>とう</rt><rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角

とうなんSoutheastの方角


ruby要素の祖先を持たないruby要素内で、コンテンツはセグメント化され、セグメントは3つのカテゴリーに置かれる:ベーステキストセグメント、注釈セグメント、無視セグメント。無視されるセグメントは文書のセマンティックスの一部を形成しない(それらは要素間の空白文字およびrp要素で構成され、後者は全くルビをサポートしないレガシーユーザーエージェントに使用される)。ベーステキストセグメントは重複可能である(DOMで任意の位置と重複する2つのセグメントの制限とともに、重複するセグメントより前の始点を有する任意のセグメントはまた、同等またはそれ以降の終点を持ちつつ、そして、任意のセグメントが同等またはそれ以前の始点を持つ重複セグメントよりも後に終点を持つ)。注釈セグメントは、rt要素に対応する。各注釈セグメントは、ベーステキストセグメントに関連付けることができ、それぞれのベーステキストセグメントは、関連付けられる注釈セグメントを持つことができる。(適合文書において、各ベーステキストセグメントは、少なくとも1つの注釈セグメントに関連付けられており、各注釈セグメントは1つのベーステキストセグメントに関連付けられている。)ruby要素は、注釈セグメントにこれらのベーステキストセグメントからマッピングと一緒に、それに含まれるベーステキストセグメントの結合を表す

この例において、日本語テキスト漢字での各表意文字は、そのひらがなでの読みに結びつけられる。

...
<ruby><rt>かん</rt><rt></rt></ruby>
...

これはこのようにレンダリングされるだろう:

2つの主表意文字の各ひらがなでの注釈は、上に小さなフォントでレンダリングされる。

この例において、繁体字テキスト漢字での各表意文字は、その注音符号での読みに結びつけられる。

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

これはこのようにレンダリングされるだろう:

2つの主表意文字の各注音符号での注釈は、横に小さなフォントでレンダリングされる。

この例において、簡体字テキスト汉字での各表意文字は、そのピンインでの読みに結びつけられる。

...<ruby><rt>hàn</rt><rt></rt></ruby>...

これはこのようにレンダリングされるだろう:

2つの主表意文字の各ピンインでの注釈は、上に小さなフォントでレンダリングされる。

このより計画的な例において、頭字語"HTML"は4つの注釈を持つ。1つは頭字語全体に対するもので、これが何であるかを簡単に説明し、1つは文字"HT"を展開した"Hypertext"、1つは文字Mを展開した"Markup"、1つは文字"L"を展開した"Language"である。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

4.5.11 rt要素

Element/rt

Support in all current engines.

Firefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (Legacy)?Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
ruby要素の子として。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
rt要素が別のrtまたはrp要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、rt要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

4.5.12 rp要素

Element/rp

Support in all current engines.

Firefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (Legacy)?Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
なし。
この要素を使用できるコンテキスト
直前または直後のrt要素のいずれかで、ruby要素の子として。
コンテンツモデル
Text
text/htmlにおけるタグ省略
rp要素が別のrtまたはrp要素の直後に存在する場合、または親要素に追加のコンテンツが存在しない場合、rp要素の終了タグは省略することができる。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

rp要素は何も表さない。

テキスト漢字での各表意文字はその読みふりがなの注釈をもつ上記の例は、レガシーユーザーエージェントでの読みは括弧内にあるので、rpを使用するように拡張できる:

...
<ruby><rp></rp><rt>かん</rt><rp></rp><rp></rp><rt></rt><rp></rp></ruby>
...

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

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

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

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

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

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

4.5.13 data要素

Element/data

Support in all current engines.

Firefox22+Safari10+Chrome62+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
value — 機械可読な値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLDataElementを使用する。

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

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

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

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

この仕様で定義されるマイクロフォーマットまたはマイクロデータ属性と組み合わせた場合、要素は、データプロセッサの目的のために機械可読な値、およびウェブブラウザーでレンダリング目的のために人間可読な値の両方を提供する役割を果たす。この場合、value属性で使用されるフォーマットは、使用中のマイクロフォーマットまたはマイクロデータ語彙によって決定される。

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

ここでは、短いテーブルが、1列のテキスト形式でかつ別に分解された形式で提示された数字にもかかわらず、テーブルソートJavaScriptライブラリーは各列のソートメカニズムを提供することができるようにdataを用いてエンコードされた数値を持つ。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

4.5.14 time要素

Element/time

Support in all current engines.

Firefox22+Safari7+Chrome62+
Opera49+Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android46+
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
要素がdatetime属性をもつ場合:フレージングコンテンツ
そうでなければ:Text。ただし、本文で与えられる要件にマッチしなければならない。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
datetime — 機械可読な値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLTimeElementを使用する。

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>

time要素は、たとえばマイクロフォーマットの中で、日付をエンコードするために使用できる。以下は、time要素を使用するhCalendarの変種を使ったイベントをエンコードするための仮想的方法を示す:

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

ここでは、Atom語彙に基づく架空のマイクロデータ語彙が、ブログ記事の発行日をマークアップするtime要素で使用される。

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">Big tasks</h1>
 <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer>
 <p itemprop="content">Today, I went out and bought a bike for my kid.</p>
</article>

この例において、もう1つの記事の出版日は、schema.orgのマイクロデータ語彙を使用して、timeを使ってマークアップされる。

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

次の断片において、time要素は、後でスクリプトによって処理するために、ISO8601形式で日付をエンコードして使用される:

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

この2つ目の断片では、値は時刻を含む:

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

ページ(およびtime要素を使用して日付と時刻をマークアップするのページの内部規則に関係するもの)によってロードされたスクリプトは、ページをスキャンして、その中に日付と時刻のインデックスを作成するためにすべてのtime要素を見るかもしれない。

たとえば、この要素は2011年11月18日が"金曜日"に相当する意味であることを追加のセマンティックを持つ文字列"Friday"に伝える:

Today is <time datetime="2011-11-18">Friday</time>.

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

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

4.5.15 code要素

Element/code

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

code要素は、コンピューターコードの断片を表す。これは、XML要素名、ファイル名、コンピュータープログラム、またはコンピューターが認識するだろう文字列であるかもしれない。

マークアップされているコンピューターコードの言語を示すための、正式な方法はない。使用される言語と一緒にcode要素をマークしたい著者は、たとえば構文強調表示スクリプトが正しい規則を使用できるように、たとえば要素に"language-"で始まるクラスを追加することによって、classを使用できる。

次の例は、句読点を含む、要素名とコンピューターコードをマークアップするために段落で要素が使用できる様子を示す。

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

次の例は、コードのブロックがpreおよびcode要素を用いてマークアップする方法を示す。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

クラスは、使用される言語を示すためにこの例で使用されている。

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

4.5.16 var要素

Element/var

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

次の段落で、文字"n"が文で変数として使用される:

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

数学について、具体的には最も簡潔な式の範囲を越えるすべてのものに対して、MathMLはより適切である。しかし、var要素は依然としてMathMLの表現で言及される特定の変数を参照するために使用できる。

この例において、式の中で変数を参照する説明とともに、式が示される。式そのものはMathMLでマークアップされるが、変数はvarを使用してfigureの凡例に記載される。

<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>

ここで、質量とエネルギーの等価性を記述する方程式は文中で使用され、そしてvar要素は、その式の変数と定数をマークするために使用される:

<p>Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.17 samp要素

Element/samp

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

この要素は、output要素と対比でき、これはウェブアプリケーションで即時出力を提供するために使用できる。

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

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

この2番目の例は、コンソールプログラム由来のサンプル出力のブロックを示す。ネストされたsampkbd要素は、スタイルシートを使用するサンプル出力の特定要素のスタイリングを可能にする。非常に正確なスタイリングを可能にするために、さらに詳細なマークアップ注釈を付けるsampの部分もある。これを達成するために、span要素が使用される。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

この3番目の例は、入力およびそのそれぞれの出力のブロックを示す。この例では、codesamp要素の両方を使用する。

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

4.5.18 kbd要素

Element/kbd

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

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

kbd要素が他のkbd要素内にネストされる場合、入力メカニズムに応じて、実際のキーまたはその他の入力の単一の単位を表す。

ここで、kbd要素は押すべきキーを示すために使用される:

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

この2番目の例において、ユーザーは特定のメニュー項目を選択するように告げられる。外側のkbd要素は、入力のそれぞれ個別の手順を表す内側のkbd要素とともに、入力のブロックをマークアップし、それらの内側のsamp要素は、メニューラベルの場合では、手順がシステムによって表示されているものに基づいて入力されることを示す:

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

このような精密さは必要ない。以下で十分である。

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

4.5.19 subおよびsup要素

Element/sub

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/sup

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
sub要素:著者向け実装者向け
sup要素:著者向け実装者向け
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要素内で使用できる。

ここで、sub要素は変数群で変数を識別する添え字を表すために使用される:

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

数式は、しばしば上付き文字と下付き文字を使用する。著者は、数学的表現をマークアップするためにMathMLを使用するよう推奨されるが、詳細な数学的マークアップを望まない場合、著者はsubおよびsupを使用することを選んでもよい。[MATHML]

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>
f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

4.5.20 i要素

Element/i

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

以下の例は、i要素の用法を示す:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

次の例において、夢の場面はi要素を用いてマークアップされる。

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

特定の用途のスタイル(たとえば、分類学上の用語でないものとしての夢の場面)が後日変更される場合、著者が各用途の注釈を文書全体(または関連する一連の文書)を検討する必要がないよう、著者は要素が使用されている理由を識別するためのi要素にclass属性を使用できる。

著者は、i要素よりもより適切な他の要素があるかどうか、たとえば、強調をマークアップするためのem要素、または用語の定義例をマークアップするためのdfn要素などを検討することを推奨する。

スタイルシートは、任意の要素が再スタイル付けできるように、i要素の書式を設定するために使用できる。したがって、この場合においてi要素のコンテンツが、必ずしもイタリック体であるとは限らない。

4.5.21 b要素

Element/b

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

次の例は、重要なものとしてマークせずにキーワードを強調するためのb要素の使用方法を示す:

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

次の例において、テキストアドベンチャー内のオブジェクトは、b要素を使用することにより、特別なものとして強調される。

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

b要素が適切であるもう1つのケースは、リード文または段落をマークアップである。次の例は、ウサギを養子にする子猫に関するBBCの記事をマークアップする様子を示す:

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

i要素と同様に、著者は、特定の用途のスタイルが後日変更される場合、著者が各用途の注釈を検討する必要がないよう、著者は要素が使用されている理由を識別するためのb要素にclass属性を使用できる。

他により適切な要素がない場合に、b要素は最後の手段として使用すべきである。具体的には、見出しはh1からh6までの要素を使用すべきであり、強調はem要素を使うべきであり、重要性はstrong要素で表されるべきであり、テキストのマークまたは強調は、mark要素を使用すべきである。

以下は、間違った使用法になる:

<p><b>WARNING!</b> Do not frob the barbinator!</p>

上の例において、使用すべき適切な要素はbではなく、strongだろう。

スタイルシートは、任意の要素が再スタイル付けできるように、b要素の書式を設定するために使用できる。したがって、この場合においてb要素のコンテンツが、必ずしも太字であるとは限らない。

4.5.22 u要素

Element/u

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

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

この例において、u要素は綴り間違いとして単語をマークするために使用される:

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

4.5.23 mark要素

Element/mark

Support in all current engines.

Firefox4+Safari5.1+Chrome7+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

mark要素は、別のコンテキストにおいて関連性のために、参照目的でマークまたは強調表示されるある文書内の一連のテキストを表す。引用文または文から参照されるテキストのブロック内で使用される場合、ブロックが元々書かれたときに、元々存在しないが、オリジナルの著者によって重要だと考えられていないかもしれないだろう、テキストの一部に読者の注意を喚起するために追加されたハイライトを示す。この追加は、事前に予期しない精査である。文書の本文で使用した場合、ユーザーの現在のアクティビティーに関連性が高いために強調されている文書の一部を示す。

この例は、mark要素が引用の特定の部分に注意を喚起するために使用する様子を示す:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

(しかし、対象がスペルミスとして要素をマークしていた場合、おそらくclassをもつu要素がより適切だろう。)

mark要素のもう1つの例は、検索文字列に一致している文書の部分を強調することである。誰かが文書を見て、ユーザーが単語"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の用途を示すもう1つの例である。この例において共通の表記規則は、イタリック体でレンダリングする引用文で明示的にmark要素で著者にスタイル付けをもたらす。

<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

ちなみに、この例においてem要素との区別は、引用されている元のテキストの一部であり、かつコメント部分を強調しているmark要素であることに注意する。

次の例は、テキストの範囲(mark)の関連性を示すことと対照的に、テキストの範囲(strong)の重要性を示すこととの違いを示す。これは、抽出物が試験の強調に関連する部分を持っていた教科書からの抜粋である。安全上の警告は重要であるかもしれないが、明らかに試験に関連しない。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.5.24 bdi要素

Element/bdi

Support in all current engines.

Firefox10+Safari6+Chrome16+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、dirグローバル属性は、この要素で特別なセマンティックスを持つ。
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

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

この例において、ユーザー名はユーザーが送信したポストの数とともに表示される。bdi要素が使用されなかった場合、アラビア語ユーザーのユーザー名は、テキストの区別がつかないことになるだろう(双方向アルゴリズムは、コロンと数字"3"の次に単語"posts"よりむしろ単語"User"を置くだろう)。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>
bdi要素を使用する場合、期待どおりにユーザー名が働く。
bdi要素がb要素で置換された場合、ユーザー名は双方向アルゴリズムを混乱させる可能性があり、3つ目の黒丸は、言って終わるだろう、アラビア語の名前(右から左)に続いて、"posts"に続き、"User 3 :"と言って終了する。

4.5.25 bdo要素

Element/bdo

Support in all current engines.

Firefox10+Safari4+Chrome15+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
また、dirグローバル属性は、この要素で特別なセマンティックスを持つ。
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

4.5.26 span要素

Element/span

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
フレージングコンテンツ
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLSpanElementを使用する。

span要素はそれ自身では何の意味もないが、たとえばclasslang、またはdirなどのグローバル属性とともに使用する場合に役立つ。この要素は、要素の子を表す

この例において、コード断片は、そのキーワードと識別子がCSSで色分けできるように、span要素とclass属性を使ってマークアップされる:

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>

4.5.27 br要素

Element/br

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLBRElementを使用する。

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要素を除いて何も構成しない場合、プレースホルダーの空白行を(たとえば、テンプレート内)を表す。そのような空白行は、プレゼンテーションの目的に対して使用してはならない。

4.5.28 wbr要素

Element/wbr

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera11.6+Edge79+
Edge (Legacy)?Internet Explorer5.5–7
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
カテゴリー
フローコンテンツ
フレージングコンテンツ
この要素を使用できるコンテキスト
フレージングコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLElementを使用する。

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

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

<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

4.5.29 使用方法の概要

要素目的
aハイパーリンク
Visit my <a href="drinks.html">drinks</a> page.
em強調
I must say I <em>adore</em> lemonade.
strong重要
This tea is <strong>very hot</strong>.
smallサイドコメント
These grapes are made into wine. <small>Alcohol is addictive.</small>
s正確でないテキスト
Price: <s>£4.50</s> £2.00!
cite作品のタイトル
The case <cite>Hugo v. Danielle</cite> is relevant here.
q引用文
The judge said <q>You can drink water from the fish tank</q> but advised against it.
dfn定義例
The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.
abbr略語
Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.
ruby, rt, rpルビ注釈
<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>
data等価な機械可読形式
Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>
time日付または時刻関連データの等価な機械可読形式
Available starting on <time datetime="2011-11-18">November 18th</time>!
codeコンピューターコード
The <code>fruitdb</code> program can be used for tracking fruit production.
var変数
If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.
sampコンピューター出力
The computer said <samp>Unknown error -3</samp>.
kbdユーザー入力
Hit <kbd>F1</kbd> to continue.
sub下付き文字
Water is H<sub>2</sub>O.
sup上付き文字
The Hydrogen in heavy water is usually <sup>2</sup>H.
i代替音声
Lemonade consists primarily of <i>Citrus limon</i>.
bキーワード
Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.
u注釈
The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.
markハイライト
Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.
bdiテキスト方向の分離
The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>.
bdoテキスト方向形式
The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>">
spanその他
In French we call it <span lang="fr">sirop de sureau</span>.
br改行
Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A.
wbr改行の機会
www.simply<wbr>orange<wbr>juice.com