Design AtlasJapanese furigana — small hiragana glosses placed above kanji to show pronunciation — is the best-known example, but glossing a difficult character or proper noun with its reading or meaning has a longer history across the Sinosphere. Korean text uses the same idea when it prints a loanword's original spelling or a term's gloss in small type next to it.
HTML has a dedicated element for this. Wrapping `<ruby>base<rt>annotation</rt></ruby>` tells the browser to automatically place the `<rt>` text small, above the base text (or beside it, in vertical writing) — with zero CSS required. It's one of the rare HTML tags whose default behavior is genuinely typographic.
The `<rp>` element wraps parenthesis fallback text ("base(annotation)") for very old browsers that don't understand ruby — largely unnecessary today. CSS `ruby-position` adjusts whether the annotation sits above or below, and `ruby-align` controls its alignment, though support varies by browser and is worth checking before relying on it.
When to use
Use it to attach a pronunciation or short gloss next to kanji, loanwords, or jargon — common in subtitles and educational content. For longer explanations, a tooltip or footnote fits better than `<rt>`.