ruby要素を使えば、テキストにふりがなや読み方を示すことができます。
ruby要素の使い方
以下のプログラムと、ブラウザの表示結果を見てください。
<body>
<p><ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>は慣用句の一つである。</p>
</body>
body要素の中に、「文のかたまり（段落）」を示すp要素があります。
p要素の中には、「一姫二太郎は慣用句の一つである。」と書かれた文章があります。
そして、用語「一姫二太郎」はruby要素でマークアップされ、ふりがなや読み方について、rt要素によって「いちひめにたろう」が指定されています。
このため、用語「一姫二太郎」は、ブラウザの表示結果の通り、用語の上方に小さい文字で「いちひめにたろう」と表示され、ユーザーは「一姫二太郎」のふりがなや読み方を知ることができます。
用語の各文字の位置に合わせて、ふりがなの配置はアレンジできる？
次に、用語「一姫二太郎」の各文字ごとに、ルビ（ふりがな等）の位置を変えてみましょう。
<body>
<p><ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>は慣用句の一つである。</p>
<p>
<ruby>
<rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
<rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt>
</ruby>は慣用句の一つである。
</p>
</body>
先ほどのプログラムに、文章を追加しました。
追加した文章では、「一姫二太郎」の文字を一文字ごとにrb要素にっよって分割し、ルビである「いちひめにたろう」についても、一文字ごとに分割された「一姫二太郎」の各文字に対応するように、rt要素によって分割しました。
そして、ブラウザの表示結果の通り、ユーザーは「一姫二太郎」について、一（いち）、姫（ひめ）、二（に）、太（た）、郎（ろう）とする、読み方を確認することができます。
複数の種類のルビを表示させることはできるか？
複数の種類のルビを表示する場合について、更に文章を追加してみましょう。
<body>
<p><ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>は慣用句の一つである。</p>
<p>
<ruby>
<rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
<rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt>
</ruby>は慣用句の一つである。
</p>
<p>
<ruby>
<rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
<rtc>
<rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt>
</rtc>
<rtc>
<rt>イチ</rt><rt>ヒメ</rt><rt>ニ</rt><rt>タ</rt><rt>ロウ</rt>
</rtc>
<rtc>
<rt>ICHI</rt><rt>HIME</rt><rt>NI</rt><rt>TA</rt><rt>ROU</rt>
</rtc>
</ruby>は慣用句の一つである。
</p>
</body>
追加した文章では、用語「一姫二太郎」について、用意した三種類のルビ（ひらがな、カタカナ、ローマ字）を、rtc要素によってそれぞれ指定しました。
そして、ブラウザの表示結果の通り、ユーザーは、『一（いち）、姫（ひめ）、二（に）、太（た）、郎（ろう）』とする読み方、『一（イチ）、姫（ヒメ）、二（ニ）、太（タ）、郎（ロウ）』とする読み方、『一（ICHI）、姫（HIME）、二（NI）、太（TA）、郎（ROU）』とする読み方、を確認することができます。
なお、表示結果の通り、三種類のルビは、「一姫二太郎」のテキストの上方及び下方において、HTMLに記述された順に、上と下に交互に表示されることなります。
ruby要素に対応していないブラウザもある？
ruby要素とrt要素を使っても、小さく表示できないことがある？
最初に紹介した、ruby要素とrt要素だけを使った方法は、用語（例えば「一姫二太郎」）の上方に小さい文字でルビを表示させるための、最もシンプルなマークアップの方法です。
Microsoft EdgeやGoogle Chromeなどの主要なブラウザでは、既にこの方法による「ルビの表示」に対応しており、表示結果に問題はないと考えられます。
しかし、（主要とは言えない）その他のブラウザの中には、ruby要素に対応していないブラウザも存在し、多くのユーザーによって（そのブラウザが）使用されているのが現状です。
具体的に、そのようなブラウザを使った場合には、例えば、『<ruby>一姫二太郎<rt>いちひめにたろう</rt></ruby>』と記述した際に、
一姫二太郎いちひめにたろうは慣用句の一つである。
と表示されてしまいます。
このため、「いちひめにたろう」がふりがな等であることを示すため、rp要素を使って、『<ruby>一姫二太郎<rp>（</rp><rt>いちひめにたろう</rt><rp>）</rp></ruby>』とマークアップすることが、推奨されています。
この記述方法にしておくことで、ブラウザがruby要素に対応している場合には、先に一例として画像表示した通り、「一姫二太郎」の文字の上方に、小さい文字でルビを表示させることができ、
ブラウザがruby要素に対応していない場合には、『一姫二太郎（いちひめにたろう）』と、表示することができ、「いちひめにたろう」がふりがな等であることを示すことができます。
つまり、ブラウザがruby要素に対応している場合には、「<rp>（</rp>」と「<rp>）</rp>」が無視されるよう、ブラウザ内で自動処理されることになります。
カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ
ruby要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。
パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。
また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。
つまり、ruby要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、ruby要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。
<body>
<p>四季折々の美しい景色のこと<ruby>花鳥風月<rt>かちょうふうげつ</rt></ruby>という。</p>
</body>
ruby要素は、上のプログラムに示す通り、body要素の中でマークアップしたテキストについて、ルビ（ふりがな等）を付与する対象と、ルビ（ふりがな等）の内容とを指定するために使われる必要があります。
また、プログラムに示す通り、ruby要素にhidden属性を指定することなく、ruby要素の内容「花鳥風月」がブラウザに表示された状態とする必要があります。
【コンテンツ・モデル】について
ruby要素のコンテンツ・モデルは、以下の２つの指定①及び②を考える必要があります。これらの指定について、以下に示すプログラムとブラウザの表示結果を使って見ていきましょう。
①フレージング・コンテンツ、又は、rb要素
②rp要素の直前又は直後において、rt要素またはrtc要素
<body>
<p><ruby>一姫二太郎<rp>（</rp><rt>いちひめにたろう</rt><rp>）</rp></ruby>は慣用句の一つである。</p>
<p>
<ruby>
<rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
<rp>（</rp><rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt><rp>）</rp>
</ruby>は慣用句の一つである。
</p>
<p>
<ruby>
<rb>一</rb><rb>姫</rb><rb>二</rb><rb>太</rb><rb>郎</rb>
<rtc>
<rp>（</rp><rt>いち</rt><rt>ひめ</rt><rt>に</rt><rt>た</rt><rt>ろう</rt><rp>）</rp>
</rtc>
<rtc>
<rp>（</rp><rt>イチ</rt><rt>ヒメ</rt><rt>ニ</rt><rt>タ</rt><rt>ロウ</rt><rp>）</rp>
</rtc>
<rtc>
<rp>（</rp><rt>ICHI</rt><rt>HIME</rt><rt>NI</rt><rt>TA</rt><rt>ROU</rt><rp>）</rp>
</rtc>
</ruby>は慣用句の一つである。
</p>
</body>
まず、指定①では、ルビ（ふりがな等）が付与される対象『一姫二太郎』について、ruby要素の記述の方法を指定しています。
例えば、上記のプログラムでは、ルビ（ふりがな等）が付与される対象が『一姫二太郎』とされ、プログラム中の上から１番目のp要素では、テキストである『一姫二太郎』がruby要素でマークアップされています。
HTML文書の中の『テキスト』は、フレージング・コンテンツと同じように扱われることになってます。
そして、プログラム中の上から２番目のp要素と３番目のp要素では、テキストである『一姫二太郎』を分割させるrb要素が、ruby要素でマークアップされています。
これらの例からわかる通り、ruby要素のコンテンツ・モデルとして、ルビ（ふりがな等）が付与される対象に対するマークアップのルールは、上記の①の記述に従うこととなります。
次に、指定②では、付与するルビ（ふりがな等）について、ruby要素の記述の方法を指定しています。
上記のプログラムでは、ruby要素に対応していないブラウザにおける表示の対策として、先に述べたrp要素を記述に含めています。
このため、プログラム中の上から１番目のp要素と２番目のp要素では、rp要素の直前又は直後において、rt要素が記述されています。
そして、プログラム中の上から３番目のp要素では、rtc要素の直前又は直後において、rt要素が記述されています。
これらの例からわかる通り、ruby要素のコンテンツ・モデルとして、ルビ（ふりがな等）に対するマークアップのルールは、上記の②の記述に従うこととなります。
各種ブラウザでの表示結果
ruby要素は、ブラウザによって表示結果が違ってくるみたいだね。
| Internet Explorer | Google Chrome | Microsoft Edge | Safari | Firefox | Opera | |
| 【ruby要素】 | △※１ | △※１ | △※１ | △※１ | ◯ | △※１ |
今のところ、用語の文字ごとにルビの振り分け表示を行うrb要素や、複数の種類のルビを表示させるrtc要素は、主要なブラウザでも、未だ対応状況が揃っていないことがわかります。
このため、用語へのルビ（ふりがな等）の表示は、先に述べた通り、最もシンプルな、ruby要素とrt要素だけを使った方法に留めておき、そのマークアップの記述の中に、rp要素を含めておくことが、最も良い方法といえます。
以上、ruby要素の使い方について、ご参考になさってください。