Mastering HTML Ruby Annotations

Introduction

In East Asian typography, ruby text is a small text annotation usually placed above or to the right of a character. This text provides the pronunciation or translation of the character. Ruby text is an important component of ruby annotation in HTML. In this lab, you will learn how to create ruby annotations using the HTML <rt> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70823{{"`HTML Ruby Annotation Explanation`"}} html/head_elems -.-> lab-70823{{"`HTML Ruby Annotation Explanation`"}} html/text_head -.-> lab-70823{{"`HTML Ruby Annotation Explanation`"}} html/para_br -.-> lab-70823{{"`HTML Ruby Annotation Explanation`"}} html/inter_elems -.-> lab-70823{{"`HTML Ruby Annotation Explanation`"}} end

Setting up the HTML Document

First, let's create a new HTML document in the index.html file. Add the following code to the file:

<!doctype html>
<html>
  <head>
    <title>Ruby Annotation Example</title>
  </head>
  <body>
    <h1>Ruby Annotation Example</h1>
  </body>
</html>

This basic structure sets up the document that we will be using to create our ruby annotation example.

Adding Ruby Text

Next, we will add some text that we want to annotate with ruby text. Add the following code after the h1 tag:

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

Creating a Ruby Annotation

Now, let's create a ruby annotation for a character in the text. We'll use the <ruby> tag to enclose the character and the <rt> tag to provide the ruby text. Add the following code after the paragraph:

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

<ruby> 漢 <rt>hàn</rt> </ruby>

In this example, we are enclosing the character '漢' with the <ruby> tag. We are then using the <rt> tag to provide the ruby text 'hàn'.

Adding More Characters

Let's add some more characters to our example. Replace the <ruby> tag code with the following:

<ruby> 漢 <rt>hàn</rt> </ruby>

<ruby> 字 <rt>zì</rt> </ruby>

<ruby> 表 <rt>biǎo</rt> </ruby>

In this code, we are adding two more characters to our example and annotating them with their respective ruby text.

Testing the Ruby Annotation

Save the index.html file and open it in a web browser. You should see the following output:

In this output, you can see the annotated characters with their respective ruby text.

Summary

Congratulations! You have successfully created ruby annotations using the HTML <rt> tag. Ruby text is an important component of ruby annotation in HTML and is used in East Asian typography to provide the pronunciation or translation of a character.

HTML Ruby Annotation Explanation