👀 Live Preview
Styled ruby with rt annotations for 日本語:
本語
HTML <rt> Tag
Overview
What You’ll Learn
The <rt> tag defines ruby text annotations for East Asian characters. This guide covers syntax with ruby, pronunciation and meaning use cases, styling, browser support, and best practices for beginners.
Ruby Text
Annotation role.
Inside ruby
Required parent.
Pronunciation
Reading hints.
Meaning
Translation aids.
With rp
Fallback support.
Accessible
Semantic markup.
Fundamentals
What Is the <rt> Tag?
The <rt> tag is an HTML element used to define the text that should be displayed as ruby annotations. Ruby annotations are small notes typically shown above or beside East Asian characters to provide pronunciation or meaning information.
Valid HTML5 — Ruby Text Element
Pair rt with ruby for semantic annotation markup. Add optional rp for fallback parentheses.
Use rt in language-learning sites, manga readers, dictionaries, and any page that helps readers understand Japanese, Chinese, or Korean characters.
Foundation
📝 Syntax
Pair rt with the ruby element. Each rt follows the base character it annotates:
syntax.html
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>Syntax Rules
- Always place
rtinside arubyelement. - Put each
rtimmediately after its base character or character group. - Do not wrap base text in deprecated
rb. - Add
rparoundrtfor graceful fallback in older browsers.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Single character | 漢<rt>kan</rt> | Inside ruby |
| Multiple chars | 本<rt>hon</rt>語<rt>go</rt> | One rt per base |
| Parent element | <ruby> | Required wrapper |
| Fallback | <rp>(</rp> | Optional with rt |
| Styling | class on ruby | Not on rt |
| Browser support | Modern full | IE 10+ partial |
Comparison
⚖️ <rt> vs <rp>
| Element | Role | Contains |
|---|---|---|
<rt> | Ruby annotation text | Pronunciation or meaning |
<rp> | Fallback parentheses | ( and ) punctuation |
<ruby> | Annotation container | Base text + rt + rp |
Reference
🧰 Attributes
The <rt> tag does not have specific attributes. It is commonly used inside ruby, which supports global attributes such as class and style for customization.
attributes.html
<ruby class="ruby-text" style="font-size: 1.2em;">
本<rt>hon</rt>
語<rt>go</rt>
</ruby>— None on rtrt has no tag-specific attributes. Only global HTML attributes apply.
<rt>kan</rt>class On rubyStyle the annotation group via the parent ruby element.
class="ruby-text"style On rubyAdjust font size or color on ruby; use CSS for rt sizing.
style="font-size: 1.2em"Hands-On
Examples Gallery
Use rt inside ruby for pronunciation guides and meaning annotations.
📚 Common Use Cases
The <rt> tag provides pronunciation guidance and meaning annotations for East Asian characters inside ruby elements.
Providing Pronunciation
The primary purpose of rt is to offer pronunciation guidance for characters.
providing-pronunciation.html
<ruby>
音<rt>on</rt>
楽<rt>gaku</rt>
</ruby>Adding Meaning Annotations
You can use rt to provide additional meaning annotations to characters.
adding-meaning-annotations.html
<ruby>
科<rt>science</rt>
学<rt>study</rt>
</ruby>A11y
♿ Accessibility
- Use semantic ruby markup —
rtgives assistive technology a clear annotation role. - Set lang attribute — Declare the correct language on the page or
rubyelement. - Add rp fallback — Ensures annotations stay readable without ruby layout.
- Write clear rt text — Pronunciation or meaning should be unambiguous for learners.
🧠 How <rt> Works
1
Author adds base + rt
Each base character is followed by its rt annotation inside ruby.
Markup
2
Browser positions rt above
Ruby-capable user agents render rt as smaller text above the base.
Render
3
rp provides fallback
When ruby layout fails, rp shows parentheses around rt text.
Fallback
=
Richer reading experience
Learners see pronunciation or meaning hints directly beside characters.
Compatibility
Browser Support
The <rt> tag is supported in all modern browsers. Internet Explorer 10 and later has partial ruby support.
Baseline · HTML5
Ruby text in modern browsers
Chrome, Firefox, Safari, Edge, and Opera render <rt> annotations inside <ruby> correctly.
100% Modern browsers
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer IE 10+ · Partial
PartialOpera Fully supported
Full support<rt> tag 100% modern · IE partial
Bottom line: Use <rt> inside ruby for East Asian annotation markup in any modern browser.
Wrap Up
Conclusion
Mastery of the <rt> tag is essential for web developers aiming to enhance the presentation of ruby text. Implementing this tag effectively ensures that pronunciation and meaning annotations are displayed accurately, contributing to a richer user experience.
Pro Tips
💡 Best Practices
✅ Do
- Use
rtinsiderubyelements - Test ruby text in different browsers
- Add
rpfor fallback readability - Style via the parent
rubyelement
❌ Don’t
- Use
rtoutside arubycontext - Wrap base text in deprecated
rb - Put long sentences inside a single
rt - Assume
classonrtis the primary styling hook
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <rt>
Bookmark these before you annotate East Asian text.
6
Core concepts 01
Ruby Text
Annotation role.
Purpose 02
Inside ruby
Required parent.
Structure 03
Pronunciation
Reading hints.
Use case 04
Meaning
Translation aids.
Use case 05
Style ruby
Not rt attrs.
CSS 06
Full Support
Modern browsers.
Compatibility❓ Frequently Asked Questions
It defines ruby text — the annotation shown above East Asian characters for pronunciation or meaning.
Inside a
ruby element, immediately after each base character it annotates.No tag-specific attributes. Apply
class and style on the parent ruby element.Yes, for fallback parentheses when ruby layout is not available.
Yes in all modern browsers. IE 10+ has partial ruby support.
Add Ruby Text Annotations
Practice <rt> for pronunciation and meaning inside ruby in the Try It editor.
About the author
6 people found this page helpful