Français

<ruby>

Phonetic annotations (CJK languages)

— 1 min read

  • HTML
  • accessibility
  • semantics
  • internationalization

<ruby> + <rt> + <rp> — Phonetic annotations

The <ruby> element wraps a word that needs a phonetic annotation. <rt> contains the pronunciation displayed above the text. <rp> provides fallback parentheses for browsers that do not support ruby.

When to use it

You are displaying Japanese text (kanji with furigana), Chinese (characters with pinyin), or Korean. Annotations help learners and readers who do not master all characters.

What you gain

Accessibility: screen readers read both the base character and the <rt> annotation. Without <ruby>, a learner has no pronunciation hint. <rp> ensures graceful fallback: the text remains readable even without ruby support.

Code example

<p lang="ja">
  <ruby>
    漢<rp>(</rp><rt>かん</rt><rp>)</rp>
    字<rp>(</rp><rt>じ</rt><rp>)</rp>
  </ruby>
  are Chinese characters used in Japanese.
</p>

Further reading