HTML5中sub和sup是语义标签，用于脚注引用、化学式下标、指数上标等，必须准确使用以保障可访问性、SEO和屏幕阅读器支持；错误嵌套或滥用会破坏语义与渲染。

在HTML5中，sub 和 sup 标签不是“美化工具”，而是语义化标记——脚注编号、化学式下标、指数上标等，必须用它们来表达真实含义，否则会影响可访问性、搜索引擎识别和屏幕阅读器朗读逻辑。

脚注引用：用^{标注序号，配合ID跳转}

脚注本质是正文与补充说明之间的语义关联，^{仅负责标记上标数字，不承担链接功能。正确做法是：}

• 正文内用<sup>1</sup>表示引用位置，数字必须为纯文本（不加方括号）
• 脚注内容放在页面底部或独立区域，用<aside aria-label="脚注"></aside>包裹，并为每条添加id="fn1"
• 通过<a href="#fn1"><sup>1</sup></a>实现点击跳转，确保键盘与屏幕阅读器可操作
• 避免写成<sup>[1]</sup>——方括号属于视觉装饰，应由CSS生成或直接写在文本中（如“参见文献¹”）

化学反应方程式：下标用_{，系数不用}

化学式中的数字有明确语义层级：分子式下标（如H₂O中的“2”）表示原子个数，必须用_{；而反应式前的计量系数（如2H2 + O2 → 2H2O中的“2”）是普通数字，**不能套**。}

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 正确：2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
• 错误：<sub>2</sub>H<sub>2</sub>（把系数也变下标，语义错误且视觉失衡）
• 离子电荷写在右上角，用^{：Ca2+、SO₄2−；注意“+”“−”不可省略，也不可用全角符号}
• 避免嵌套<sub>H<sub>2</sub>O</sub>——_{只包裹真正需要下标的字符，如H₂O}

并列上下标：顺序决定渲染位置，CSS微调更可靠

像SO₄²⁻这种既有下标又有上标的场景，浏览器默认按书写顺序渲染：先_{后^{，上标会出现在下标右侧偏上位置。但若需严格对齐（如数学中的张量符号），仅靠标签不够：}}

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

• 保持HTML简洁：SO<sub>4</sub><sup>2−</sup>
• 用CSS统一控制尺寸与偏移：sub, sup { font-size: 75%; line-height: 0; }，防止行高撑开
• 如需精确定位（如让上标紧贴右上角），可额外加类：<sup class="tight">2−</sup>，再用vertical-align: super; top: -0.1em;
• 不推荐用<span style="vertical-align: sub"></span>替代_{——失去语义，辅助技术无法识别}

易错点与验证建议

实际编码中容易忽略的细节，直接影响内容是否被正确理解：

• 中文混排时，^{和_{内的英文/数字可能因字体差异显得过小，可加font-variant: normal;重置}}
• 用浏览器开发者工具检查：选中^{元素，看computed样式中vertical-align是否为super，font-size是否继承合理}
• 用NVDA或VoiceOver朗读测试：正常应读作“H下标二O”，而非“H二O”；脚注编号应被识别为独立可导航项
• 避免在_{/^{里放链接、图片或换行——它们只接受短文本，复杂结构会破坏语义与渲染稳定性}}