HTML Living Standard/rt

rt 要素

概要

<rt> 要素は、<ruby> 要素内で使用され、親要素に対応するルビテキスト（Ruby Text）を表します。ルビテキストは、文字や単語の読み方や意味を補足するために表示されます。

カテゴリ

• フローコンテンツ (Flow content)
• フレージングコンテンツ (Phrasing content)
• パルパブルコンテンツ (Palpable content)

使用できる文脈

<ruby> 要素内で、1つ以上の <rb> またはテキストに対応する補足情報として使用されます。

コンテンツモデル

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

タグ省略のルール

開始タグおよび終了タグは省略できません。

使用できる属性

• グローバル属性

アクセシビリティ上の注意

• 著者向けの注意: <rt> 要素を適切に使用することで、アクセシビリティを高め、読者がコンテンツを正しく理解できるようにしてください。
• 実装者向けの注意: ルビテキストの視覚的な表現が一貫性を保つように実装してください。

DOM インターフェース

• この要素は、HTMLElement インターフェースを使用します。

使用例

日本語の漢字にルビを付ける

次の例では、漢字に読み仮名を付けるために <rt> 要素が使用されています。

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

英語の略語の補足情報

次の例では、英語の略語に補足情報を表示するために <rt> 要素が使用されています。

<ruby>
  HTML<rt>Hypertext Markup Language</rt>
</ruby>

関連要素

• <ruby> 要素: ルビ註釈の全体を表します。
• <rp> 要素: ルビ註釈がサポートされない場合の補足テキストを表します。

注意点

• <rt> 要素は、必ず <ruby> 要素内で使用してください。
• <rt> 要素の順序は、親要素である <ruby> 要素内の対応するテキストや <rb> 要素に一致させる必要があります。

実装例

複数の <rt> 要素

複数の <rt> 要素を用いることで、異なる読み方や補足情報を提供することができます。

<ruby>
  学<rt>がく</rt><rt>まな</rt>
  校<rt>こう</rt><rt>ふみ</rt>
</ruby>

フォールバック用の <rp> 要素と組み合わせた例

次の例では、<rp> 要素を使用して、ルビがサポートされていない環境での表示を改善しています。

<ruby>
  学<rp>(</rp><rt>がく</rt><rp>)</rp>
  校<rp>(</rp><rt>こう</rt><rp>)</rp>
</ruby>

関連仕様

• HTML Living Standard - rt
• MDN Web Docs - rt