HTML5的和标签专为东亚文字注音设计，需成对使用且语义明确；多字须分别包裹，禁止单独使用或跨字合并；CSS微调应避免破坏可访问性与流式布局。

HTML5 中的 <ruby></ruby> 和 <rt></rt> 标签专为东亚文字注音（如汉字拼音、日文假名）设计，语义清晰且支持无障碍阅读。用对了，排版自然规范；用错了，容易错位、截断或被屏幕阅读器忽略。

基础结构必须完整：ruby + rt（+ rp 可选）

<ruby></ruby> 是容器，<rt></rt> 是注音内容，二者必须成对出现。浏览器会自动将 <rt></rt> 渲染在基字上方（横排）或右侧（竖排）。建议始终包裹在 <ruby></ruby> 内，不可单独使用 <rt></rt>。

• ✅ 正确写法：<ruby>汉<rt>hàn</rt></ruby>
• ❌ 错误写法：<rt>hàn</rt>汉（无容器，语义丢失，样式不可控）
• ? 补充提示：<rp></rp> 用于兼容不支持 ruby 的旧浏览器，显示括号（如 <rp>(</rp><rt>hàn</rt><rp>)</rp>），现代项目可省略，但需知其作用

多字多音要一一对应，避免跨字合并

每个基字应有独立的 <ruby></ruby> 包裹，不能用一个 <ruby></ruby> 包含多个汉字再配一个 <rt></rt>——那样会导致注音与字序错位，尤其在换行或字体缩放时更明显。

• ✅ 推荐：<ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby>
• ❌ 风险写法：<ruby>北京<rt>běi jīng</rt></ruby>（“běi jīng”可能整体偏上，无法精确对齐单字）
• ⚠️ 注意：中文词组若存在轻声、变调（如“你好”读作“nǐ hǎo”而非“nǐ hào”），仍建议按字标注，由语音合成引擎处理韵律，而非在 <rt></rt> 里写连读结果

样式微调靠 CSS，但别破坏默认流式行为

浏览器对 <ruby></ruby> 有内置排版逻辑（如自动缩小 <rt></rt> 字号、控制间距）。自定义样式时优先用标准属性，避免强行定位导致响应失效。

立即学习“前端免费学习笔记（深入）”；

• ✅ 安全调整：ruby { line-height: 1.8; } rt { font-size: 75%; letter-spacing: 0.05em; }
• ❌ 避免操作：rt { position: absolute; top: -1em; }（破坏可访问性，影响换行和缩放）
• ? 小技巧：用 ruby { ruby-align: center; } 让注音在基字上方居中对齐（默认 left）；ruby { ruby-position: under; } 可切换到下方（适合方言或训读标注）

兼顾可访问性与语义，别用 div 或 span 模拟

屏幕阅读器能识别 <ruby></ruby> 结构，并按“汉字，拼音”顺序朗读（如：“汉，hàn”）。若用 <span class="ruby"></span> 手动模拟，不仅增加代码量，还会丢失语义，使视障用户无法获知注音关系。

• ✅ 优势：支持 Safari、Chrome、Firefox、Edge 等主流浏览器，NVDA、VoiceOver 均可正确解析
• ❌ 替代方案风险：CSS 伪元素（::before）添加拼音——视觉可见但无法被读屏软件捕获
• ? 提醒：若需支持 IE（已停止更新），可用 polyfill 如 ruby-polyfill，但优先考虑渐进增强