HTML5 & lt; ruby & gt; annotation tag, html5ruby annotation tag

HTML5 <ruby> annotation labels and html5ruby annotation labels

I learned the HTML5 ruby tag today and found it interesting to record it.

Ruby can be used as annotation labels with rp and rt labels.

<Ruby> mark the definition annotation or phonetic symbol.

<Rp> tell browsers that do not support ruby elements how to display them.

<Rt> the tag defines the content text that is annotated with ruby.

The first reaction after learning this label is that I have a way to annotate Japanese words that cannot be read !!!

The Code is as follows:

<! DOCTYPE html> 
The effect is as follows:
Firefox Google:

Some browsers do not support <ruby> labels. In this case, <rp> labels are particularly important. <rp> I understand them as "character. Browsers with good character are displayed in the form of comments above. For example, if the character is not good, you need the <rp> label to add comments.
The text in <rp> is not displayed when the browser is compatible. Only the text in <rt> appears in the preceding annotations. In the case of incompatibility, the text commented in <rt> will be displayed in the back, as shown in the following figure. At this time, the content of the package in <rp> will be displayed.

 
Above.