HTML `<ruby>` Element: Creating Ruby Annotations for Enhanced Readability

Learn how to use the HTML `<ruby>` element to create ruby annotations, particularly useful for East Asian languages. This tutorial shows how to add pronunciation guides (furigana) or character meanings, improving readability and comprehension for users. Master semantic markup for enhanced text presentation.

Using the HTML `<ruby>` Element for Ruby Annotations

Understanding Ruby Annotations

The HTML `<ruby>` element is used to create ruby annotations—a way to add extra explanatory text alongside main text. Ruby annotations are commonly used in East Asian languages (like Japanese) to show pronunciation (furigana) or to provide the meaning of characters. The annotation is displayed visually near the main text, enhancing readability. This is particularly useful when working with characters that might be unfamiliar to readers. The `<ruby>` tag uses the `` (ruby text) tag to display this additional text.

Basic Ruby Annotation Structure

A basic ruby annotation uses the `<ruby>` and `` elements. The main text goes inside the `<ruby>` tag, and the annotation goes inside the `` tag. The `` tag should be placed immediately after the character or group of characters that it annotates.

<ruby>
  漢 <rt>kan</rt>
</ruby>

In this example, "kan" (the pronunciation) is the annotation for the character "漢".

Browser Support for `<ruby>` and ``

The `<ruby>` and `` elements are widely supported by modern browsers.

Styling Ruby Annotations with CSS

You can customize the appearance of ruby annotations using CSS. The example below provides basic styling options, including altering the font size and color:

ruby > rt {
  font-size: 0.7em;
  color: green;
}