ルビ関連要素（HTML）

以前、「ruby」について こちらの記事で書いたものの（↓）

関連する要素が理解できていなかったので、まとめ。

（１）ruby要素

（２）以降の要素の「親」となる要素。

ルビを振るテキストの範囲を表す。

（例）

<ruby>
朝寝坊
<rt>あさねぼう</rt>
</ruby>

（２）rb要素

Ruby Baseの略で、ruby要素の子要素として使用する。

ルビが難しくない場合は、ruby要素を使って記述すれば良いので
特にrb要素を使わなくとも記述することができる。

rb要素が必要となるのは、漢字ごとにルビを分けたい場合など。

（例）

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
</ruby>

（３）rp要素

Ruby Parenthesesの略で、ruby要素の子要素として使用する。

ルビテキストを囲む括弧記号などを指定する。
（未対応ブラウザでも分かりやすくしたい場合など）

（例）

<ruby>
朝寝坊<rp>（</rp><rt>あさねぼう</rt><rp>）</rp>
</ruby>

（４）rt要素

Ruby Textの略で、ruby要素の子要素として使用する。いわゆるルビ。

（５）rtc要素

ルビが1種類（rt要素のコンテナが1つ）の場合は、
rt要素を使って記述すれば良いので
特にrtc要素を使わなくとも記述することができる。

rtc要素が必要となるのは、rt要素のコンテナを2つ設定したい場合など。
（rt要素に加えて、明示的にルビテキスト欄を用意するイメージ）

（例）

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rtc>Oversleeping</rtc>
</ruby>

rtc要素のルビテキストを分割する場合は、rtc要素内にrt要素をネストして記載する。

（例）

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rt>あさ</rt><rt>ね</rt><rt>ぼう</rt>
<rtc><rt>asa</rt><rt>ne</rt><rt>bou</rt></rtc>
</ruby>

【出典】

HTML5/テキスト/rtc要素 ルビテキストのコンテナ - TAG index