How to use Ruby tag in html5? ~ MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.

USE OF RUBY TAG IN HTML

Introduction of HTML5 <ruby> Tag

<ruby> tag specifies annotation for a text. An annotation is a small text that interprets the meaning of the main text or helps in the pronunciation of characters which is used. Ruby tag is a new element in HTML5.

Originally it is used to provide help in the pronunciation of East Asian languages such as Chinese, Japanese, Korean etc. but you can also use this tag to tell the meaning of a text for the general purpose.

Ruby text enhances the user's reading experience. For example, if you are using any of the technical terms in your program, then ruby can attach an explanation with them by text. While reading this, the user will understand your document easily without any hassle.

Ruby text is too smaller than text. In the context of the horizontal text, it is shown above main text and in the context of the vertical text, it shows in the right of the main text. Such browser which does not support the ruby tag, show it like the inline element after the main text.

Syntax of HTML5 <ruby> Tag

Generic syntax of the lower <ruby> tag is given below.

<ruby>

<rt> ruby text (explanation) </ rt>

</ ruby>

<Ruby>, <rt>, <rp> and <rb> tags are used to create ruby text in any webpage. These are being described below.

<ruby> - This is an inline element. This tag works like a container for other tags. In this, the main text and ruby text are specified by the <rb> and <rt> tag.

<rb> - This tag is called ruby base. By this tag, you can define the main text.

<rt> - This tag is called ruby text. By this tag, you can define the ruby text.

<rp> - This tag is called ruby parenthesis which adds the parenthesis to both sides of the ruby text. It works in the browsers that do not support the ruby tag. Those browsers that support the ruby tag ignore this tag.

Attributes of HTML5 <ruby> Tag

There is no element specific tag for <ruby> tag. But it supports all HTML global attributes (class, id etc) and event attributes (onclick, onmouseover etc).