HTML helper elements
Small tags can improve readability
HTML has a few text helpers for special cases. Use <wbr> to suggest a safe line break inside a long word, and use ruby elements for pronunciation annotations.
- Optional word breaks
- Ruby annotations
- Pronunciation text with rt
- Fallback parentheses with rp
Use <wbr> inside long words
The <wbr> element tells the browser where a long word may break if it does not fit on one line. It does not force a line break.
super<wbr>long<wbr>frontend<wbr>wordsuper
Use <ruby> for pronunciation notes
Ruby annotations are often used with East Asian text. The base text goes inside <ruby>, and the pronunciation goes inside <rt>.
<ruby>
漢 <rp>(kan)</rp><rt>かん</rt><rp>(kan)</rp>
字 <rp>(ji)</rp><rt>じ</rt><rp>(ji)</rp>
</ruby>
漢
字
Use these only when they help
Add <wbr> to long words that may overflow. Add ruby markup when the reader needs pronunciation or annotation support.