👀 Live Preview
Styled ruby with Japanese characters:
漢字
HTML <ruby> Tag
Overview
What You’ll Learn
The <ruby> tag wraps base text and pronunciation annotations. This guide covers syntax with rt and rp, multilingual and educational use cases, styling, browser support, and best practices for beginners.
Container
Wraps annotations.
rt Child
Ruby text hints.
rp Fallback
Parentheses text.
East Asian
JP, CN, KR text.
Education
Learning aids.
Accessible
Semantic markup.
Fundamentals
What Is the <ruby> Tag?
The <ruby> tag is designed for annotating text with pronunciation information, usually in the form of small annotations called ruby text. This is particularly useful for languages like Japanese or Chinese, where characters may have multiple readings.
Valid HTML5 — Ruby Annotation Container
Place base text and rt annotations inside ruby. Add optional rp for fallback parentheses in non-ruby browsers.
The ruby element is the parent container in modern markup. Do not use deprecated rb or rtc wrappers in new documents.
Foundation
📝 Syntax
Include both the base text and the ruby text. The rt tag holds the annotation:
syntax.html
<ruby>
Base Text <rt>Ruby Text</rt>
</ruby>With rp Fallback
ruby-with-rp.html
<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
</ruby>Syntax Rules
- Put base characters directly inside
ruby— norbwrapper. - Follow each base character or group with its
rtannotation. - Wrap
rtwithrpparentheses when fallback support is needed. - Set
langon the page or element for correct typography.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic pattern | <ruby>base<rt>hint</rt></ruby> | Container + rt |
| Annotation | <rt> | Child of ruby |
| Fallback | <rp>(</rp> | Optional |
| Styling | class on ruby | Global attrs |
| Deprecated | rb, rtc | Do not use |
| Browser support | Modern full | IE 10+ partial |
Comparison
⚖️ <ruby> vs <rt>
| Element | Role | Required? |
|---|---|---|
<ruby> | Annotation container | Yes |
<rt> | Ruby text annotation | Yes (for hints) |
<rp> | Fallback parentheses | Optional |
Reference
🧰 Attributes
The <ruby> tag supports global attributes such as class and style, allowing customization of the visual presentation of ruby annotations.
attributes.html
<ruby class="pronunciation" style="font-size: 1.2em;">
漢字 <rt>Kanji</rt>
</ruby>class CSSApply a class to style the ruby group and target rt with CSS.
class="pronunciation"style InlineInline font size or color on the ruby container.
style="font-size: 1.2em"lang LanguageDeclare Japanese, Chinese, or Korean for correct annotation layout.
lang="ja"Hands-On
Examples Gallery
Use ruby to annotate text for multilingual readers and educational content.
📚 Common Use Cases
The <ruby> tag is beneficial for multilingual content and educational materials that need pronunciation assistance.
Multilingual Support
The ruby tag provides pronunciation assistance for characters or words in different languages.
multilingual-support.html
<ruby>
你好 <rt>Nǐ hǎo</rt>
</ruby>Educational Content
In educational materials, ruby can aid learners in understanding the pronunciation of specific terms or phrases.
educational-content.html
<ruby>
<span class="science-term">Photosynthesis</span>
<rt>foh-toh-sin-thuh-sis</rt>
</ruby>A11y
♿ Accessibility
- Use semantic ruby markup — Helps assistive technology identify annotations.
- Keep rt text concise — Short hints aid pronunciation without clutter.
- Add rp fallback — Ensures readability when ruby layout is unavailable.
- Set lang attribute — Declare the correct language for base text and annotations.
🧠 How <ruby> Works
1
Author wraps base + rt
Place base text and rt annotations 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
Non-ruby browsers show rp parentheses around annotation text.
Fallback
=
Clear pronunciation guides
Readers see helpful annotations for complex or unfamiliar text.
Compatibility
Browser Support
The <ruby> tag is supported in all modern browsers. Internet Explorer 10 and later has partial ruby support.
Baseline · HTML5
Ruby annotations in modern browsers
Chrome, Firefox, Safari, Edge, and Opera render <ruby> with <rt> annotations 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<ruby> tag 100% modern · IE partial
Bottom line: Use <ruby> with rt and rp for East Asian and educational annotations.
Wrap Up
Conclusion
The HTML <ruby> tag is a valuable tool for enhancing the accessibility and understanding of text, particularly in multilingual or educational contexts. By incorporating ruby text annotations with rt, you can provide valuable pronunciation assistance for your audience.
Pro Tips
💡 Best Practices
✅ Do
- Keep ruby text concise and relevant
- Test rendering across browsers
- Use
rpfor fallback support - Set
langfor East Asian content
❌ Don’t
- Use deprecated
rborrtc - Put long sentences in a single
rt - Skip
rtwhen annotation is needed - Forget fallback
rpon public pages
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <ruby>
Bookmark these before you annotate text.
6
Core concepts 01
Container
Wraps base + rt.
Role 02
rt Child
Annotation text.
Structure 03
East Asian
JP, CN, KR.
Context 04
rp Fallback
Parentheses.
Compat 05
class/style
On ruby.
CSS 06
Full Support
Modern browsers.
Compatibility❓ Frequently Asked Questions
It wraps base text and
rt annotations to show pronunciation or meaning hints.Base text,
rt for annotations, and optional rp for fallback parentheses.Yes. Use
class and style on ruby, and CSS to target rt.No. Both are obsolete. Place base text and
rt directly inside ruby.Yes in all modern browsers. IE 10+ has partial ruby support.
Add Ruby Annotations
Practice <ruby> with rt for multilingual and educational content in the Try It editor.
About the author
6 people found this page helpful