The ruby Tag
The ruby tag draws tiny pronunciation guides above East Asian characters. The base character sits on the line and the reading, usually in a phonetic script, floats above it. Japanese furigana is the best known example, and Chinese learners use the same technique.
The rt tag inside ruby holds the annotation. One base character or word pairs with one rt, and the browser centers the reading over its base text automatically. Doing that by hand means fiddly spans and positioning that breaks when the font size changes.
It works in every modern browser. On older browsers without ruby support, the annotation text simply drops into the line after the character, so nothing is lost. Ruby exists because annotated text is a core need in language learning, and hand-built layouts could not keep up.
Writing the structure
The pattern is simple: ruby wraps the base text, and rt holds the reading. For a single character with its reading, write the character, then an rt with the pronunciation. Several pairs can share one ruby element when the word is short.
<ruby>日本語 <rt>にほんご</rt></ruby>One pair per character
For longer words, give each character its own ruby pair so the readings line up above the right character. The browser keeps every annotation centered over its base text, even when the page zooms. This alignment is exactly what hand-built layouts get wrong.
<ruby>日<rt>にち</rt>本<rt>ほん</rt></ruby>Syntax
<ruby>漢 <rt>kan</rt></ruby>Ruby Without <rp> Parentheses Turns Kanji Into Soup on Old Browsers
Furigana with <ruby>漢<rt>かん</rt></ruby> renders fine in modern browsers but shows as continuous '漢かん' gibberish in browsers without ruby (and in many Markdown sanitizers like Open WebUI #29039 that escape/ strip ruby). The forgotten <rp>(</rp> + <rp>)</rp> fallback adds parentheses only when ruby unsupported, preserving readability. Also <rb> was deprecated in 2022 - don't use it.
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>Good to know
- Rt holds the pronunciation; ruby wraps the pair.
- The reading stays centered over its base text.
- Give each character its own ruby pair for long words.
- Great for Japanese and Chinese learning pages.