HTML <ruby> Tag

The HTML <ruby> tag is an inline element that is primarily used to provide supplementary annotations for East Asian character pronunciations. It can also be used to annotate other kinds of text, such as technical reference material or names in multiple languages, but this usage is less common.

It is used to enable furigana/romanji, a Japanese text-annotation system. It is also used for creating annotations for Chinese characters, as well as other languages where ruby support is necessary. It allows web developers to add pronunciations of characters or words to their output, making the content much easier to read and understand.

The basic HTML syntax of the <ruby> tag looks something like this:

<ruby>character or word<rp>(</rp><rt>pronunciation</rt><rp>)</rp></ruby>

For example, the following code will display 東京 (Tokyo) with furigana reading とうきょう (Tōkyō).

東京(とうきょう)

東 (とう) 京 (きょう)

<ruby>東京<rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>.

<ruby>
  東 <rp>(</rp><rt>とう</rt><rp>)</rp>
  京 <rp>(</rp><rt>きょう</rt><rp>)</rp>
</ruby>

More examples:

鳳龍(fèng lóng) 사랑(sarang)

<ruby>鳳龍<rp>(</rp><rt>fèng lóng</rt><rp>)</rp></ruby>
<ruby>사랑<rp>(</rp><rt>sarang</rt><rp>)</rp></ruby>

The use of the <ruby> tag has a variety of benefits for web developers, especially when it comes to writing applications or websites that must support many languages.

For instance, having furigana support helps make Japanese text more legible for those who are unfamiliar with the language.

Adding pronunciation annotations in Mandarin Chinese can help clarify which tone should be used when speaking certain words or phrases — something that is otherwise confusing and difficult to discern.