how to use ruby in html

<!-- The <ruby> tag is used to display smaller text on top of another
	 element. While it was designed for annotating Asian languages,
     it can be useful as a quick way of overlaying text. -->

<!-- The <ruby> tag is a block container for ruby annotations. -->
<ruby>
	To be or not to be
</ruby>


<!-- To superimpose text, you place it within an <rt> tag.
	 Any words before <rt> will serve as "anchor" for the superimposed
     text; here for instance "to be" will be spread over "or not to be" -->
<ruby>
    or not to be
    <rt>To be</rt> <!-- Superimposed across "or not to be" -->
</ruby>


<!-- In this example, "To be" will be spread only over "or not".
	 This reduces the spacing between the annotations. -->
<ruby>
    or not 
    <rt>To be</rt> <!-- "to" over "or", and "be" over "not" -->
    &nbsp;to be
</ruby>


<!-- For browsers that do not support the <ruby> tag,
	 the <rp> tag can be used to show parentheses around the
     annotations.-->
<ruby>
    or not 
    <rp> ( </rp>
    <rt>To be</rt>
    <rp> ) </rp>
    &nbsp;to be
</ruby>


<!-- Tip: You can change the spacing of the annotations by changing the
	 text-align property of the <rt> tag. This can be useful for easily
     creating text overlays in almost pure HTML (e.g. button labels). -->
<ruby>
    or not 
    <rp> ( </rp>
    <rt style="text-align: left">To be</rt> <!-- Default is text-align: start -->
    <rp> ) </rp>
    &nbsp;to be
</ruby>

<!-- Note that <ruby> support is still limited: while most browsers have
	 partial support, only Firefox has full support.
     
     See: https://caniuse.com/?search=ruby -->