html
  1. html-ruby-tag

HTML <ruby> Tag

  • The HTML <ruby> tag is used to define small annotations that are intended to be displayed above or below a base text.
  • The <ruby> tag is supported in all modern browsers and can be used to provide pronunciation guides or to display additional information about a word.

Syntax

The basic syntax of the <ruby> tag is as follows:

<ruby>
    base text
    <rp> (</rp>
        <rt> annotation text </rt>
    <rp> )</rp>
</ruby>
  • The text in between the <ruby> tags is the base text.
  • The <rt> tag is used to define the annotation text.
  • The <rp> tag is used to provide brackets around the annotation text. These brackets are only displayed if the browser does not support the <ruby> tag.

Example

<p>My name is <ruby>John<rp>(</rp><rt>ジョン</rt><rp>)</rp></ruby>.</p>
Try Playground

Explanation

The <ruby> tag is used to provide additional annotations to a base text. The <rt> tag is used to define the annotation text, which is displayed above or below the base text. The <rp> tag is used to provide brackets that surround the annotation text. These brackets are only displayed if the browser does not support the <ruby> tag.

Use

The <ruby> tag can be used to provide pronunciation guides for foreign words or to provide additional information about a word. For example, it can be used to display the meaning of a word in another language or to provide additional context about a certain term.

Important Points

  • The <ruby> tag is not supported in Internet Explorer.
  • The <rp> tag is required when using the <ruby> tag. This is to ensure that the brackets are still displayed if the browser does not support the <ruby> tag.
  • The <rt> tag must immediately follow the base text.
  • The annotation text should be short and concise, as it is intended to provide additional information about the base text.

Summary

The HTML <ruby> tag can be used to provide additional annotations to a base text. It is supported in all modern browsers and can be used to provide pronunciation guides or to display additional information about a word. While it is not supported in Internet Explorer, it can still be used in conjunction with the <rp> tag to display brackets around the annotation text for browsers that do not support the <ruby> tag.

Published on: