<rt> in HTML: the phonetic annotation above a character

The <rt> tag carries the phonetic annotation of a ruby composition, such as Japanese furigana, shown above a character.
4 min read
Believemy logo

In a Japanese lesson displayed in HTML, a kanji is followed by a small line of hiragana characters positioned right above it, smaller than the main text: that small line needs its own tag to be recognised as an annotation, not as regular text.

<rt> is that tag: it wraps the annotation itself, a gloss or a pronunciation hint, inside a <ruby> composition.


Definition

<rt> holds the annotation text of a ruby composition, namely the pronunciation or the gloss shown above a segment of base text. It only makes sense placed inside a <ruby> tag, which establishes the link between the annotation and the text it annotates.

The most cited case remains Japanese furigana, a small hiragana reading placed above a kanji, but <rt> serves any language where a short annotation needs to stay visually attached to a precise word, such as a phonetic transcription or a very brief translation.


Position inside a ruby composition

<rt> immediately follows the base text it annotates, inside <ruby>, and is usually wrapped by a pair of <rp> providing fallback parentheses for browsers without ruby support.

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

Here, とうきょう is the phonetic annotation of 東京, Tokyo written in kanji: a browser that supports ruby shows it small, above the base text, without the parentheses surrounding it in the source code.


Semantics and accessibility

Isolating the annotation in its own tag rather than simply writing it next to the word in small text with CSS lets assistive technology and text-processing tools clearly tell the two roles apart: the word itself, and its pronunciation or gloss. A properly configured screen reader can then announce the base and its annotation in a coherent order, instead of reading one confusing block mixing the two together.

Good to know

A common trap is writing an annotation in a small font size directly in the text, without <rt> or ruby, relying only on CSS to reproduce the visual effect. The rendering may fool the eye, but nothing then links the annotation to its word for a machine: copying the text, translating it automatically, or hearing it through a screen reader gives back a confusing result.


What it is not

<rt> is neither a tooltip appearing on hover nor a simple footnote: it stays permanently visible, visually attached to its base text, and is a full part of the displayed content rather than an interaction mechanism. A tooltip only appearing on mouse hover would automatically exclude any touch or keyboard use, which <rt> avoids precisely by staying displayed by default.


Written by hand or generated automatically

On a multilingual site or an online dictionary, furigana is almost never typed character by character: a JavaScript library or a dedicated converter automatically generates the <rt> and <rp> pair from a source text annotated in a simpler format, often between brackets. Writing the structure by hand still earns its place for a single example in an article, an occasional vocabulary lesson, or a small site that would rather depend on no external tool for a handful of annotations.


Frequently asked questions

Question

Can <rt> exist alone, without a ruby tag around it?

Technically the browser still shows the text, but the annotation loses all its meaning: without <ruby>, nothing indicates which base text it relates to. The full structure, base and annotation joined inside <ruby>, is what gives <rt> its real function.

Question

Can a composition contain several <rt> tags?

Yes, a single <ruby> tag can group several segments of base text, each followed by its own <rt>, which allows annotating a whole sentence word by word rather than lumping everything under one imprecise global annotation.

Question

Can something other than a pronunciation go inside <rt>, like a translation?

Yes, the specification does not limit the content to a pronunciation: a short translation, an express definition or a grammatical gloss work just as well, as long as the text stays brief and directly tied to the word annotated right below or beside it.

Related terms

Discover our hTML and CSS glossary

Browse the terms and definitions most commonly used in HTML and CSS development.

Share this article

Want to help us? Share this article on your networks or even better: on your site, in an article or in your newsletter.