HTML 的 <ruby> 标签不支持多音字自动切换，需手动为不同语境分别标注读音；常见做法是在同一 <rt> 中用斜杠分隔多个读音，如“háng / xíng”；禁止嵌套 <ruby> 或用 CSS 模拟，动态切换须依赖 JS + ARIA。
ruby 标签本身不支持多音字自动切换
HTML 的 <ruby> 是静态标注结构，只能为一段文字固定配一个读音（<rt>），无法像辞典那样根据上下文自动切换多音字读音。你得手动判断语境，为每个可能的读音分别写一套 <ruby> 组合——浏览器不会帮你猜“行”该读 xíng 还是 háng。
用多个 ruby 块并列标注不同读音
常见做法是把同一汉字的不同读音都标出来，用括号或斜杠分隔，放在同一个 <rt> 里。例如：
<p>银行<ruby><rb>银</rb><rt>yín</rt></ruby><ruby><rb>行</rb><rt>háng / xíng</rt></ruby></p>
这样语义清晰，也兼容所有支持 ruby 的浏览器（Chrome 120+、Firefox 125+、Safari 17.4+）。注意：<rb> 是可选的，但显式写出能提升可维护性；<rt> 中用空格或斜杠分隔多个读音是通用惯例，不是标准语法，但实际渲染效果稳定。
避免嵌套 ruby 或滥用 span
有人试图用 <span> 包裹 <ruby> 再加 class 控制显示，这会破坏语义和屏幕阅读器识别。还有人把两个 <ruby> 嵌套，比如 <ruby><ruby>…</ruby><rt>…</rt></ruby>，这是非法 HTML，多数浏览器会直接丢弃内层 <ruby>。
立即学习“前端免费学习笔记（深入）”；
务必遵守的边界：
-
<ruby>必须直接包含<rb>（或普通文本）和<rt>，不能套<ruby> - 每个
<rb>最好只对应一个汉字，多音字不要塞进一个<rb>再让<rt>拆解 - 不要依赖 CSS 的
display: ruby模拟，它不被主流屏幕阅读器识别
需要动态切换？得靠 JS + ARIA 补位
如果真要点击切换读音（比如用户点“行”弹出读音菜单），<ruby> 无能为力。此时应：
- 用
<button aria-haspopup="listbox">行</button>替代原字 - 配合
<div role="listbox">提供yín háng和yín xíng两个选项 - 选中后用 JS 动态更新旁注区域（如旁边
<small id="pronounce"></small>） - 保留一份纯文本 fallback：比如在
<ruby>外加<span aria-label="银行：yín háng">
这种方案可访问性强，但开发成本高——绝大多数场景下，静态多读音并列标注已足够，强行上交互反而增加理解负担。
真正难的不是怎么写 ruby，而是判断哪个读音该优先展示。比如“长”在“生长”里读 zhǎng，但在“长度”里读 cháng，这个语义分析必须人工完成，HTML 不提供 NLP 能力。
