View video tutorial

HTML <rt> Tag

HTML

The <rt> tag defines an interpretation or pronunciation of the characters.

HTML <rt> Tag


The <rt> element specifies the ruby text component of a ruby annotation, which is used to explain pronunciation, translation, or transliteration information.

The <rt> element must always be nested in a <ruby> element.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Example</title>
    <meta charset="utf-8" />
    <style>
        button{
            width: 150px;
            height: 50px;
            background-color: cornflowerblue;
            font-size: 14pt;
            color: white;
            border-radius: 10px;
        }
        button:hover{
            background-color: rgb(17, 87, 218);
            color: white;
        }
    </style>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "w3context JavaScript Tutorials";
            document.getElementById("demo").style.color = "blue";
            document.getElementById("demo").style.fontSize = "18pt";
        }
    </script>
</head>
<body>
    <h2>HTML Example</h2>
<p>Click this button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Magazzini Alimentari Moctezuma</td>
    <td>Yoshi Chang</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Futterkiste</td>
    <td>Giovanni Anders</td>    
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst  Trading</td>
    <td>Bennett Roland</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Handel</td>
    <td>Mendel Helen</td>    
    <td>UK</td>
  </tr>
  <tr>
    <td>Centro comercial Riuniti</td>
    <td>Maria Rovelli</td>
    <td>Italy</td>      
  </tr>
  <tr>
    <td>Alfreds Winecellars </td>
    <td>Francisco Tannamuri</td>
    <td>Canada</td>
  </tr>
</table>

</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.