rtタグ -ルビ(ふりがな・発音ガイド)を定義する|HTML辞典

<rt>タグとは?

<rt> タグは、<ruby> タグ内でルビ(ふりがな・発音ガイド)を定義するためのタグです。
漢字や難読文字の読み方を補足するために使用されます。

コンテンツモデル

フローコンテンツ(Flow Content)、フレージングコンテンツ(Phrasing Content)。

閉じタグの有無

<rt>開始タグ(<rt>)と閉じタグ(</rt>)の両方が必要 です。

基本的な記述方法

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

使用できる主な属性

<rt> タグには特別な属性はありませんが、<ruby> の中でのみ使用可能 です。

CSSを使ったデザイン変更

ルビのフォントサイズや色を変更できます。

rt {
font-size: 12px;
color: gray;
}

適切な使用例

✅ 漢字にルビを付ける

<p>私は<ruby>日本語<rt>にほんご</rt></ruby>を勉強しています。</p>

✅ 名前のふりがなを付ける

<p>私の名前は <ruby>山田<rt>やまだ</rt></ruby> です。</p>

<rp> を併用してルビ非対応ブラウザでも読みやすくする

<p><ruby>国際<rp>(</rp><rt>こくさい</rt><rp>)</rp></ruby> 会議</p>

適切でない使用例(誤った使い方)

<rt><ruby> の外に配置すると機能しない

<!-- NG: <rt> が <ruby> の外にある -->
<rt>とうきょう</rt>
<ruby>東京</ruby>

正しい書き方(<rt><ruby> 内に配置)

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

<rt><ruby> なしで使うと意味がなくなる

<!-- NG: <ruby> なしで <rt> を使用 -->
<rt>にほん</rt>

正しい書き方(必ず <ruby> 内で使用)

<ruby>日本<rt>にほん</rt></ruby>

<rt>タグと他のタグの違い

タグ役割特徴適切な用途
<rt>ルビ(ふりがな)を表示<ruby> 内で使用ふりがな、発音ガイド
<ruby>ルビを表示する親タグ<rt> とセットで使用日本語、中国語の読み方補助
<rp>ルビ非対応ブラウザ向けの括弧を表示<ruby> 内で使用ルビが表示できない環境で補助

使用上の注意点

<rt><ruby> の中に配置する

  • <rt><ruby> の外に配置すると動作しない。

<rp> を併用すると、ルビ非対応のブラウザでも読みやすくなる

  • <rp>(</rp><rp>)</rp> を追加すると、古いブラウザでも意味が伝わる。

関連タグ

  • <ruby> – ルビの親タグ
  • <rp> – ルビ非対応ブラウザ向けの補助
  • <span> – インラインテキストの装飾

まとめ

<rt> タグは、HTML文書内で <ruby> タグ内のルビ(ふりがな)を定義するためのタグ です。
必ず <ruby> の中で使用し、適切な発音ガイドを提供するために活用できます。