HTML - <rp> Tag

Quiz

Introduction to <rp> Tag

The HTML <rp> tag provides fallback parenthesis around ruby text for browsers that do not support ruby annotations using the <ruby> tag. Introduced in HTML5, the <rp> tag must enclose the <rt> tag with parentheses, which contain the annotation's text.

Syntax

Following is the syntax of <rp> tag −

<rp>.....</rp>

Attributes

The HTML <rp> tag supports Global and Event attributes.

Example: Global Attributes

In the following example, we are create a ruby text enclosure using the <rp> tag. We are creating an HTML document that uses the <rp> tag to enclose ruby text. This HTML code uses the <ruby> tag to display ruby text with annotations, styled to have a larger font size.

<!DOCTYPE html>
<html>
<head>
   <style>
      ruby {
         font-size: 2em;
      }
   </style>
</head>
<body>
   <ruby>  <rp>(</rp>
      <rt>kan</rt>
      <rp>)</rp>  <rp>(</rp>
      <rt>ji</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

Example: Styling <rp> Tag

Considering the following example, where are create an HTML document using the <rp> tag and style it with CSS properties. This HTML code centers text, and demonstrates the <rp> tag with annotations. Running the code will display the text styled with CSS on the web page.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }

      ruby {
         font-size: 3em;
         color: green;
      }
   </style>
</head>
<body>
   <h3>HTML rp Tag</h3>
   <ruby>  <rp>(</rp>
      <rt>kan</rt>
      <rp>)</rp>  <rp>(</rp>
      <rt>ji</rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

Example: Applying <rp> Tag on Unsupported Ruby Annotations

Let's look at the following example, where we use the <rp> element to display parenthesis foe user agents that don't support Ruby annotations. Running the code will display the ruby annotations on the webpage. This HTML code centers text, styles ruby text to be large and demonstrates the <rp> tag with annotations..

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
      text-align: center;
      }

      ruby {
      font-size: 2em;
      color: #808000;
      }
   </style>
</head>
<body>
   <h3>Example of rp tag </h3>
   <ruby>  <rp>(</rp>
      <rt></rt>
      <rp>)</rp>  <rp>(</rp>
      <rt></rt>
      <rp>)</rp>
   </ruby>
</body>
</html>

Supported Browsers

Tag
rp	Yes 5.0	Yes 5.5	Yes 38.0	Yes 5.0	Yes 15.0

html_tags_reference.htm

Print Page