この記事について

HTML5でのふりがな・注釈の付け方をさらっとまとめています。
各タグの詳細は、最下部の「参照URL」を参考にしてください。

`<ruby>,<rt>`で文字にふりがな・注釈をつける

下記のソースのようにふりがなを付けたい箇所を<ruby>タグで囲み、
ふりがな・注釈となる箇所については<rt>タグで囲みます。

ruby.html

<ruby>Qiita<rt>キータ</rt></ruby>

<hr>

ペンギンが<ruby>学<rt>がく</rt>習<rt>しゅう</rt></ruby>する

Qiitaキータ

ペンギンが学がく習しゅうする

ふりがなや注釈のことを英語でrubyと言います。
日本語で「ルビをふる」という表現をすることもあります。

Edgeについては<rt>タグが未対応なため、
上記のふりがなについては下記のように表示されるかもしれません。
こちらについては筆者自身で試してはおらず、
MDNのサイトを参照しています。

Qiita キータ

ペンギンが学がく習しゅうする

今まで登場してきていませんが、<rp>タグというタグもあります。
こちらは、上記の`'タグが使えないEdgeでルビを表示する時に
ふりがなだとわかるような形で表示するために使用します。
具体的には下記のように使用します。

ruby.html

<ruby>Qiita<rp>(</rp><rt>キータ</rt><rp>)</rp></ruby>

Edge以外の場合

Qiitaキータ

Edgeの場合
※下記のように表示されるかもしれません

Qiita(キータ)