ルビをふる

属性:インライン要素

書式: 
<ruby>
  <rb>本文部</rb>
  <rp>(</rp><rt>ルビ部分文字</rt><rp>)</rp>
</ruby>

文章にルビを振ったように表示する指定です。この要素はXHTML1.1とhtml5で定義されていて、 html4.01では定義されていません。
Internet Explorerは独自拡張機能として5.0の時には表示できるようになっていました。
ブラウザの対応が進み、Firefoxではversion 38 以降、Operaでは version 15 以降で、ルビのように表示できるようになりました。 しかし、非対応のブラウザで見ることも鑑み、「rp」要素は省略しないようにしましょう。 省略してしまうとルビ部分の文字が本文部分と区別がつかなくなってしまうためとても読みにくくなります。

表示例

<ruby>
  <rb>WWW</rb>
  <rp>(</rp><rt>World Wide Web</rt><rp>)</rp>
</ruby>

上記の表示例をそれぞれのブラウザで表示した場合以下のようになります。

ブラウザでの表示の差異
Internet Explorer11.523.17134.0の場合 Firefox 65.0の場合 Opera 58.0.3135.53の場合
Internet Explorerでの表示 Firefoxでの表示 Operaでの表示

なぜ「ルビ」と呼ぶか

不思議に思ったことはありませんか?「ルビ」という言葉。 日本語なのか、外来語なのかそれとも何かの略語なのか。
これは元々イギリスの印刷業界で文字のサイズを宝石名などで呼んでいたところからきています。 ルビに元々使われていた文字は5.5ポイントでこの大きさの文字のことを「ルビー」と呼んでいたため、 「ルビ」と称されるようになったそうです。
ちなみにアメリカではこの文字サイズは「agate(アゲート)」と呼ぶそうです。
実際、Internet Explorerでルビを表示したときの文字サイズは本文文字の55%程度の大きさになっています。