rpタグ -ルビをサポートしていないブラウザで補助的なテキストを表示する｜HTML辞典

<rp>タグとは？

<rp> タグは、ルビ（ふりがな）をサポートしていないブラウザで補助的なテキストを表示するためのタグです。
ルビ対応のブラウザでは <ruby> や <rt> の情報が正常に表示されますが、非対応のブラウザでは <rp> 内のテキストが表示されます。

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。

閉じタグの有無

<rp> は 開始タグ（<rp>）と閉じタグ（</rp>）の両方が必要 です。

基本的な記述方法

<ruby>東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>

使用できる主な属性

<rp> タグには特別な属性はありません。

CSSを使ったデザイン変更

<rp> 自体には特別なデザイン効果はありませんが、スタイルを適用できます。

rp {
    color: gray;
    font-style: italic;
}

適切な使用例

✅ <rp> を使ってルビ非対応ブラウザ向けに補助表示を追加

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

✅ <rp> を使ってルビを括弧で囲む

<p><ruby>情報<rp>[</rp><rt>じょうほう</rt><rp>]</rp></ruby> を取得しました。</p>

適切でない使用例（誤った使い方）

❌ <rp> を <ruby> の外に配置すると意味がなくなる

<!-- NG: <rp> が <ruby> の外にある -->
<rp>(</rp><rt>にほん</rt><rp>)</rp>
<ruby>日本</ruby>

✅ 正しい書き方（<rp> は <ruby> 内に配置）

<ruby>日本<rp>(</rp><rt>にほん</rt><rp>)</rp></ruby>

❌ <rp> を単独で使用すると意味がない

<!-- NG: <rp> だけでは動作しない -->
<p><rp>(</rp>東京<rp>)</rp></p>

✅ 正しい書き方（必ず <ruby> 内で使用）

<p><ruby>東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby></p>

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

タグ	役割	特徴	適切な用途
<rp>	ルビ非対応ブラウザ向けの補助	<ruby> 内で使用	ルビを括弧で囲む
<ruby>	ルビを表示する親タグ	<rt> とセットで使用	ふりがな、発音ガイド
<rt>	ルビの内容を定義	<ruby> 内で使用	ふりがな、注釈

使用上の注意点

✅ <rp> は <ruby> の中に配置する

• <ruby> の外に配置すると意味がなくなる。

✅ ルビ非対応ブラウザ向けに適切な括弧を指定する

• 例: <rp>(</rp><rt>にほん</rt><rp>)</rp> のように括弧を追加すると、可読性が向上する。

関連タグ

• <ruby> – ルビの親タグ
• <rt> – ルビのテキストを定義
• <span> – インラインテキストの装飾

まとめ

<rp> タグは、HTML文書内で ルビ非対応ブラウザ向けに補助的なテキストを表示するためのタグ です。
適切に括弧を追加し、古いブラウザでもルビの情報を伝えるために活用できます。