HTML Ruby Annotation Fallback

HTMLHTMLBeginner
Practice Now

Introduction

In this lab, you will learn about the HTML <rp> tag. You will learn about its usage, syntax, and basic examples. The <rp> tag is used as fallback brackets for those who do not support the <ruby> 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/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced 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/text_head -.-> lab-70821{{"`HTML Ruby Annotation Fallback`"}} html/para_br -.-> lab-70821{{"`HTML Ruby Annotation Fallback`"}} html/inter_elems -.-> lab-70821{{"`HTML Ruby Annotation Fallback`"}} end

Set Up the HTML file

  1. Create an HTML file called index.html.
  2. In the body, create the following HTML code:
<h1>HTML Ruby Parentheses</h1>
<p>Example text here.</p>

Add the <rp> Tag

  1. Add the <ruby> tag below the <p> tag.
  2. Inside the <ruby> tag, add the <rp> tag with opening and closing tags.
<ruby>
  <rp>(</rp>
  <rt>MTV</rt>
  <rp>)</rp>
</ruby>

Add Global Events

  1. Add any event or global attributes to your code, such as inline styles.
<ruby style="font-size: 18px;">
  <rp>(</rp>
  <rt>MTV</rt>
  <rp>)</rp>
</ruby>
  1. Open the index.html file in your web browser to view your code.

Summary

In this lab, you have learned how to use the HTML <rp> tag and its syntax. You also learned how to create a basic example to show fallback brackets for those who do not support the <ruby> tag. The <rp> tag is important in HTML as it allows formatting to show correctly in different types of browsers.

Other HTML Tutorials you may like