ruby要素は、ルビ(ふりがな)を振るテキストの範囲を表します。<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby><ruby>今日<rt>きょう</rt></ruby><ruby><ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby><rt>Kanji</rt></ruby>ruby要素は、テキストにルビを振りたい場合に使用します。この要素内にベーステキストを配置して、rt要素でルビテキストを記述します。必要に応じてrp要素も使用することができます。未対応ブラウザで表示される記号(括弧など)次の例では、太郎にルビを振っています。<p>私の名前は<ruby>太<rt>た</rt>郎<rt>ろう</rt></ruby>です。</p>上記の場合は、太と郎がベーステキスト、たとろうがルビテキストとなります。未対応ブラウザ向けの指定ルビに対応していないブラウザでは、ルビテキストが次のように表示されてしまいます。rp要素を使って次のように記述すると、ルビテキストが括弧付きで表示されるようになります。(rt要素の前後にrp要素を配置します)<p>私の名前は<ruby>太<rp>(</rp><rt>た</rt><rp>)</rp>郎<rp>(</rp><rt>ろう</rt><rp>)</rp></ruby>です。</p>分かりやすくするために改行を入れてみます。<p>私の名前は<ruby>太<rp>(</rp><rt>た</rt><rp>)</rp>郎<rp>(</rp><rt>ろう</rt><rp>)</rp></ruby>です。</p>ルビに対応しているブラウザでは、rp要素の内容(括弧)は表示されません。rp要素の詳細については、下記のページを参考にしてください。ルビテキストを囲む括弧を表すルビの振り方に関してルビの振り方には複数の方法が用意されていますが、ここでは3種類の振り方に絞って以下にご紹介します。詳細な情報は仕様書でご確認ください。モノルビモノルビは、1文字ごとにルビを振りたい場合の書き方です。これは、文字ごとの読み方などを伝えたい場合に使用します。<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>※rp要素は省略しています。字じグループルビグループルビは、テキスト全体にルビを振りたい場合の書き方です。これは、1対1の関連付けが困難な場合の読み方、意味的な読み方、または翻訳などを伝えたい場合に使用します。lang="en">editor</rt></ruby>※rp要素は省略しています。編集者editor両側ルビ両側ルビは、対象のテキストに対して2種類のルビを振ることができます。これは、読み方と意味の両方を伝えたい場合や、読み方と翻訳を伝えたい場合などに使用します。次の例では、ruby要素を入れ子にして読み方と翻訳を伝えています。lang="en">dictionary</rt></ruby>※rp要素は省略しています。dictionary上記の場合、対応しているブラウザでは辞書の上にじしょが表示され、更にその上にdictionaryが表示されます。両側ルビには以下のような書き方もありますが、意図したとおり(?)に表示されるブラウザは確認できませんでした。(2022年1月現在)この書き方では、ベーステキストの後に2つのrt要素を配置しています。lang="en">today</rt></ruby>※rp要素は省略しています。今日きょうtoday要素の内容に関してruby要素の内容には、以下の順序の組を1つ以上配置します。次のどちらか一方フレージング・コンテンツ(ただし、ruby要素およびruby要素の子孫は含められない)単一のruby要素(ただし、子孫にruby要素を含めてはならない)次のどちらか一方1つ以上のrt要素rp要素の後に1つ以上のrt要素が続き、その後にrp要素が続くrp要素の使用は任意となりますが、未対応のブラウザ向けにできるだけ指定しておくことをお勧めします。旧HTMLからの変更点HTML5:ルビに関連する要素(ruby要素、rb要素、rt要素、rtc要素、rp要素)が定義されました。LS:ルビに関連する要素のうち、rb要素とrtc要素が廃止されました。LS:上記要素の廃止に伴い、ruby要素のコンテンツ・モデルが変更されました。ルビのマークアップ方法についても変更が行われています。使用例rp要素を省略した例<p>私の名前は<ruby>太<rt>た</rt>郎<rt>ろう</rt></ruby>です。私の名前は太た郎ろうです。rp要素を使用した例<p>私の名前は<ruby>太<rp>(</rp><rt>た</rt><rp>)</rp>郎<rp>(</rp><rt>ろう</rt><rp>)</rp></ruby>です。私の名前は太(た)郎(ろう)です。ruby要素に対応しているブラウザでは、どちらも同じように表示されます。