Detailed explanation of <ruby> tag in html5-HTML Tutorial-php.cn

Detailed explanation of tag in html5

黄舟

Release： 2017-07-17 13:32:48

Original

2901 people have browsed it

Today I learned the ruby tags of HTML5. I thought it was quite interesting, so I’ll record it.

ruby can be used as comment tags, with rp and rt tags inside.

Tag defines annotation or phonetic notation.

Tell browsers that do not support ruby elements how to display them.

The tag defines the content text of the ruby annotation.

My first reaction after learning this tag is that I have a way to make kana annotations for Japanese words that I can’t read! ! !

The code is as follows, to make a small comment on a Japanese sentence:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ruby注释标签</title>
    <style>
        p {
            text-align: center;
        }
    </style>
    </head>
    <body>
    <p>
    <ruby>月明<rp>(</rp><rt>つきあ</rt><rp>)</rp></ruby>かり昇る頃</p>
    <p>灯る <ruby>赤提灯 <rp>(</rp><rt>あかちょうちん</rt><rp>)</rp></ruby></p></body></html>

Copy after login

The effect is as follows:

Firefox Google:

There are also some browsers that cannot support the tag. At this time, the tag is particularly important. I understand to mean "character". Browsers with good character will display it in the form of comments above, as shown in the picture above, while those with bad character will need the tag to supplement the comments.

The text inside will not be displayed when the browser is compatible. Only the text inside will appear as annotations above. In the case of incompatibility, the text of the annotation in will be displayed later, as shown in the figure below. At this time, the content packaged in can be displayed.

The above is the detailed content of Detailed explanation of tag in html5. For more information, please follow other related articles on the PHP Chinese website!