“振りがな”を含めたルビは，XHTML 1.1 で登場したユニークなフィーチャーである。ここでは，ルビについて，簡単な記法に絞って解説する。

　ルビは，漢字の読みをかなで示したり，その場に注釈を付したりするときに使われる。日本語の紙媒体の印刷では，一般に，横書きのときはその部分の上に，縦書きのときはその部分の右に，本文の半分程度の大きさの文字でルビが振られる。

図 17.1 [D]

　XHTML では，図 17.1 のように，ルビが振られる部分をベーステキスト（本文のテキスト）とルビテキスト（それに付されるルビのテキスト）からなると考える。ルビが振られる部分全体は，ruby 要素として記述する。ruby 要素はパラグラフ・見出しなどに含めることができる。

<ruby>...</ruby>

　ruby 要素を用いたルビの記法は 2 つに大別されるが，ここでは簡単なほうを説明する。

　前項で，ルビが振られる部分はベーステキストとルビテキストからなると述べた。これらは，ruby 要素の内容として，

• ベーステキストを rb 要素
• ルビテキストを rt 要素

で記述される。もっとも簡単なルビの記法では，ruby 要素の内容に，rb 要素と rt 要素が順に 1 つずつ現れる。

<ruby><rb>...</rb><rt>...</rt></ruby>

　まずは，使用例をご覧いただこう。

<p>軽金属として重宝されているアルミニウムだが，その精錬は銅などに比べるとやっかいである。原料のアルミナを高温で溶かして（融解させて）電気分解する，<ruby><rb>融解塩電解</rb><rt>ゆうかいえんでんかい</rt></ruby>という方法で精錬される。</p>

これは，お手元の環境では次のように出力される。

ここで，ruby 要素の中では，rb 要素と rt 要素の内容として以外は，テキストを書いてはならない。また，ベーステキストまたはルビテキストに，さらにルビを振ることはできない。

　上記の例は，Internet Explorer 5.5 以降ではベーステキストの上に小さい文字でルビテキストが出力されるが，Netscape 6，Netscape 7，Opera 6，Opera 7 の既定の状態では“融解塩電解ゆうかいえんでんかい”と出力されてしまい，ベーステキストとルビテキストが区別できない。

　ルビを，ルビテキストをベーステキストの上に表示するなど，それとわかる方法で出力できる場合は前項の方法でよいが，それができない場合，またはルビに関わる要素がサポートされない場合に対して，ルビテキストをかっこまたはそれに類するものでくくるという方法が提供される。これには，rp 要素が用いられる。

<rp>...</rp>

rp 要素を用いたルビの記法は，必ず次のようになる。

<ruby><rb>...</rb><rp>...</rp><rt>...</rt><rp>...</rp></ruby>

1 つめの rp 要素にルビテキストに対する開きかっこ，2 つめの rp 要素にルビテキストに対する閉じかっこを記述することになる。rp 要素の内容はテキストのみで，ルビのかっこのみを em 要素で強調したり，ルビのかっこに画像を挿入したりということは許されていない。

　前項の例を rp 要素を使って書き直すと，次のようになる。

<p>軽金属として重宝されているアルミニウムだが，その精錬は銅などに比べるとやっかいである。原料のアルミナを高温で溶かして（融解させて）電気分解する，<ruby><rb>融解塩電解</rb><rp>（</rp><rt>ゆうかいえんでんかい</rt><rp>）</rp></ruby>という方法で精錬される。</p>

これは，お手元の環境では次のように出力される。

　一般に，ルビがそれとわかるように出力できる場合は，rp 要素が非表示になり，そうでない場合は rp 要素の内容が出力され，“融解塩電解（ゆうかいえんでんかい）”のようになる。また，ブラウザがルビに関わる要素をサポートしない場合（とくに古いブラウザ）は，それらのタグが無視されることになるので，“融解塩電解（ゆうかいえんでんかい）”と，少なくとも区別できる形になる。

　一般に，スタイルシートによってルビはそれとわかるように出力させられる。たとえば，“rt 要素は前後にかっこをつけて，ひと回り小さい文字で”のようにできるだろう。このときは rp 要素を非表示にすればよい。音声出力の場合も同様に，rt 要素が rb 要素の読みを表しているならば，これらが両方読まれないようにしなければならないだろう。

　もうひとつのルビの記法では，複数（2 つ）のルビテキスト，および（語句に一括して振るのではなく）文字単位のルビが記述できるようになっている。本チュートリアルでは，これは省略する。