HTML <rb> Tag

The <rb> tag is an HTML element specifically designed to define the base text within a ruby annotation. Ruby annotations are commonly used in East Asian typography to provide pronunciation or clarification for characters. The <rb> element ensures a clear relationship between the base text and its corresponding ruby text (<rt>). It plays a crucial role in semantic structuring and accessibility when presenting text with annotations.

Syntax

<ruby>
  <rb>Base Text</rb>
  <rt>Ruby Text</rt>
</ruby>

Attributes

Example

<ruby>
  <rb>漢</rb>
  <rt>かん</rt>
</ruby>

In this example, "漢" is defined as the base text using the <rb> tag, while "かん" is the corresponding ruby text provided by the <rt> tag. This shows the basic usage of <rb> within a <ruby> container.

More Examples

Complex Ruby Annotation

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

This expands on the basic example, including both the Japanese reading and an English transliteration within the ruby annotation. The base text "東京" is still enclosed within the <rb> tags. The <rp> tags are included for browsers that don't support ruby to still make it readable.

Multiple Base Text Segments

<ruby>
  <rb>新</rb><rb>幹線</rb>
  <rt>しん</rt><rt>かんせん</rt>
</ruby>

Here, the base text is split into two segments "新" and "幹線," each with their respective ruby annotations. This is a more complex scenario where the base text comprises multiple words or characters which require separate annotations. The correct association between base text and annotation is maintained through the use of separate <rb> and <rt> elements.

Using with <rtc>

<ruby>
  <rb>漢字</rb>
  <rt>かんじ</rt>
  <rtc>
    <rt>kanji</rt>
  </rtc>
</ruby>

This example introduces the <rtc> tag, showcasing how you can group different types of ruby text. Here, "漢字" is the base text and "かんじ" and "kanji" are both presented as ruby text for this base. Again, <rb> clearly defines the base text to which these annotations relate.

Browser Support

The <rb> tag is supported by all major modern browsers:

• Chrome: Full support
• Edge: Full support
• Firefox: Full support
• Safari: Full support
• Opera: Full support

Notes and Tips

• Semantic Correctness: Always include <rb> tags within the <ruby> tag for semantic correctness and accessibility.
• Accessibility: Using <rb>, <rt>, and <rp> tags properly is important to ensure that the document is accessible. Screen readers rely on these structural markers to convey the correct information.
• Styling: You can style the <rb> element just like any other text container, which means you can change fonts, colours, etc., for the base text.
• Fallback: Remember to use the <rp> tags with parenthesis to render the ruby text as a fallback when the user's browser doesn't support Ruby annotations.
• Nesting: While you can nest other elements inside <rb>, it is generally not recommended, since it can confuse the reader and the screen readers, so keep the content inside <rb> to just the base text.
• Clarity: The primary goal of the <rb> tag is to clearly define the base text for ruby annotations. If you do not need annotations, then you don't need this element.