どんなタグ？
文字にルビをふる場合に
<ruby>タグを使う

<p>
<ruby>吾輩<rp>(</rp><rt>わがはい</rt><rp>)</rp></ruby>は猫である
</p>

ruby (ルビ)要素は <ruby> 〜 </ruby> タグで挟んだ箇所にルビを振ることができます。ruby要素内にrb要素でルビを振る対象テキストをrt要素でふりがなを指定する必要があります。

どのカテゴリに属しているの？

ruby要素は フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。

梱包できるタグは？

rubyタグに梱包できる要素（コンテンツ・モデル）は、フレージング・コンテンツただしruby要素なし、ruby要素の子孫なし です。

主に難しい漢字にふりがなを付けるときに使うタグです。

どうやって使うの？
ルビをふる対象文字とルビの内容を、
<ruby> タグで挟んで使います。

rubyタグは<ruby> 〜 </ruby> の中で、ルビの内容を<rt> 〜 </rt>,ルビの内容を囲む記号を<rp> 〜 </rp>で挟んで使用します。

rpタグで挟まれた箇所は、rubyタグに対応していないブラウザでのみ表示されます。
そのため、対象文字の始まりと終わりを示すカッコなどの記号を入れておくと、どのブラウザで見ても表示がおかしくなりません。

使い方

<ruby>ルビをふる対象文字<rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>

<p>
<ruby>凡例<rp>(</rp><rt>はんれい</rt><rp>)</rp></ruby>を調べる
</p>

どこでも使えるの？

rubyタグは フレージング・コンテンツ が配置できるところならどこでも使えます。

気をつけることは？

rubyタグに対応していないブラウザでも可読性を保つために、rpタグで「ルビ」の範囲を分かりやすくすることが大事です。

rubyタグはrtタグ、rpタグとセットで覚えましょう！

使える属性は？
グローバル属性のみ使えます。

<ruby> タグには、どの要素にでも使えるグローバル属性のみ使えます。

使えるのはグローバル属性のみです。

サンプルが見たい
<ruby>タグを使ったサンプルを
いくつか紹介。

<ruby> タグを使ったサンプルを紹介します。

<p>
 <ruby>薔薇<rp>(</rp><rt>バラ</rt><rp>)</rp></ruby>の花をもらった
</p> 

<p>
 <ruby>朝<rt>ちょう</rt>令<rt>れい</rt>暮<rt>ぼ</rt>改<rt>かい</rt></ruby>
</p> 

コード上は読みにくいです

デフォルトスタイルは？
文章の段落などの
一行目のインデント幅が０です。

一般的なブラウザで ruby要素を表示した場合、一行目のインデント幅が０です。
具体的には、下記のCSSと同等のスタイルが適用されます。

ruby { text-indent: 0px; }

特に問題ありません。

対応ブラウザは？
基本的にどのブラウザでも
バージョンが古くなければ大丈夫。

<ruby>タグは主に以下のブラウザが対応しています。

Internet Explorar

Internet Explorar 6 ~

Edge

Edge 12 ~

Google Chrome

Google Chrome 5 ~

Firefox

Firefox 38 ~

Safari

Safari 5 ~

Opera

Opera 15 ~

どのブラウザでもバージョンが古くなければ問題ありません。