The <ruby> Tag in HTML 5
The <ruby> tag is used to mark up base text which is to be annotated with supplemental text. It is one of the formatting tags in HTML 5. The supplemental text is used to provide an aid to reading the base text, such as:
- the pronunciation of the base text
- syllabic characters, used primarily in East Asian languages, such as the hiragana form of katakana text, called furigana in Japanese
- an alternate form of the base text, such as the romanji form of katakana text
It is also possible to use the image (<img>) tag to include images in either the base text or ruby annotations.
This is an actual working example of the <ruby> tag example code below, showing how the code looks in your browser. In a WebKit browser, such as Safari or Chrome, it looks like this:
In a browser that does not support the ruby element, the <rt> ruby text will be displayed with the <rp> ruby parenthesis like this:
Alternatives to the <ruby> Tag
Instead of the <ruby> tag, there are a number of other approaches to annotate content in different written languages:
- Annotate with plain old text content:
- 日本語: ブックマーク 同期 English: Bookmark now
- If it is an <a href> link, just add the title attribute (hover the mouse over the link to see the popup text):
- 続きを読む
- Add a span element with a title attribute and a style to indicate popup help is available:
- 朝飯前