应仅在标记拼写错误或中文专有名词时使用标签，其他下划线需求须用span加css；必须配语义化class和aria-label，且css需显式声明text-decoration。
直接用 <u></u> 标签会出什么问题
浏览器确实能渲染 <u></u>，但用户看到带下划线的文本，第一反应是“这是个链接”，尤其在没有配色区分时。屏幕阅读器也会忽略其语义，把内容当成普通文本读出，完全丢失“拼写错误”或“专有名词”的意图。HTML5 规范明确说：它不是装饰工具，而是语义标记——仅当你要标注“这个单词写错了”或“这是汉语专有名词”时才合法。
什么时候该用 <u></u>，而不是 CSS 的 text-decoration: underline
只有两种场景真正需要 <u></u> 元素：
- 标记拼写错误：
<u class="spelling-error">recieve</u>（配合 CSS 提示红色波浪线） - 标注中文专有名词：
<u class="proper-noun">粤港澳大湾区</u>（便于后续样式或脚本识别）
其他所有“想加下划线”的需求——比如强调标题、突出关键词、模拟手写效果——都应该用 span + CSS：<span class="highlight">重点内容</span>，再通过 text-decoration: underline 控制样式。这样结构清晰、可访问性强、样式易复用。
<u></u> 的 class 和 aria 属性怎么配才不踩坑
单独用 <u></u> 没有意义，必须配合语义化类名和可访问性属性：
- 必须加
class，如class="spelling-error"或class="proper-noun"，否则无法定位和样式控制 - 建议加
aria-label明确说明用途，例如：<u class="spelling-error" aria-label="拼写错误：应为 receive">recieve</u> - 避免用
title属性替代aria-label，因为部分屏幕阅读器不读title - 不要给
<u></u>加style="text-decoration: wavy red"这类内联样式，破坏可维护性
为什么你写的 <u></u> 在某些浏览器里没下划线
不是浏览器不支持，而是默认样式被重置了。现代 CSS 重置库（如 Normalize.css、Tailwind 的 base styles）普遍移除了 <u></u> 的下划线，因为它的语义不该绑定视觉表现。解决方法只有一条：
在你的 CSS 中显式声明：u.spelling-error, u.proper-noun { text-decoration: underline; }。别依赖浏览器默认，也别用 !important 强行覆盖——那说明你没理清语义与样式的边界。
真正难的不是让文字有下划线，而是判断这段文字是否真的需要一个语义容器；一旦选错标签，后期要修复可访问性和 SEO 问题，成本远高于一开始多写两行 CSS。
