how to use ruby in html

1<!-- The <ruby> tag is used to display smaller text on top of another
2	 element. While it was designed for annotating Asian languages,
3     it can be useful as a quick way of overlaying text. -->
4
5<!-- The <ruby> tag is a block container for ruby annotations. -->
6<ruby>
7	To be or not to be
8</ruby>
9
10
11<!-- To superimpose text, you place it within an <rt> tag.
12	 Any words before <rt> will serve as "anchor" for the superimposed
13     text; here for instance "to be" will be spread over "or not to be" -->
14<ruby>
15    or not to be
16    <rt>To be</rt> <!-- Superimposed across "or not to be" -->
17</ruby>
18
19
20<!-- In this example, "To be" will be spread only over "or not".
21	 This reduces the spacing between the annotations. -->
22<ruby>
23    or not 
24    <rt>To be</rt> <!-- "to" over "or", and "be" over "not" -->
25    &nbsp;to be
26</ruby>
27
28
29<!-- For browsers that do not support the <ruby> tag,
30	 the <rp> tag can be used to show parentheses around the
31     annotations.-->
32<ruby>
33    or not 
34    <rp> ( </rp>
35    <rt>To be</rt>
36    <rp> ) </rp>
37    &nbsp;to be
38</ruby>
39
40
41<!-- Tip: You can change the spacing of the annotations by changing the
42	 text-align property of the <rt> tag. This can be useful for easily
43     creating text overlays in almost pure HTML (e.g. button labels). -->
44<ruby>
45    or not 
46    <rp> ( </rp>
47    <rt style="text-align: left">To be</rt> <!-- Default is text-align: start -->
48    <rp> ) </rp>
49    &nbsp;to be
50</ruby>
51
52<!-- Note that <ruby> support is still limited: while most browsers have
53	 partial support, only Firefox has full support.
54     
55     See: https://caniuse.com/?search=ruby -->