HTML中下划线的正确用法：告别标签

<p>这是一段<span   style="max-width:100%">带有下划线</span>的文字。</p>

<style>
  /* 更好的做法是定义一个CSS类，在需要时引用 */
  .underline-text {
    text-decoration: underline;
    color: #333; /* 顺便可以控制颜色，是不是很方便？ */
  }

  /* 链接默认就有下划线，但你也可以自定义 */
  a {
    text-decoration: none; /* 移除默认下划线 */
  }

  a:hover {
    text-decoration: underline; /* 鼠标悬停时再显示 */
  }
</style>

<p>你也可以给一个段落<span class="underline-text">加上下划线</span>，或者让<a href="#" class="underline-text">链接</a>也带上。</p>

你看，用CSS是不是灵活多了？不仅可以控制有没有下划线，还能控制它的颜色、样式（比如波浪线），甚至在特定状态下才出现。这比那个老旧的标签要强大太多了。

为什么不推荐直接使用标签来添加下划线？

讲真，早期HTML里，标签就是用来干这个的，简单粗暴。但随着Web标准的发展，尤其是语义化HTML的概念深入人心，的地位就变得尴尬了。它最初的含义是“给文本加下划线”，这纯粹是视觉上的描述，而HTML的职责是描述内容的结构和意义，而不是外观。这就像你给一本书写目录，目录里写的是“第一章：故事的开始”，而不是“第一章：黑体字加粗”。

最大的问题在于，直接使用标签来表示下划线，会混淆语义。如果一个下划线仅仅是装饰性的，比如某个设计要求，那用就传递了错误的信息。它可能会让屏幕阅读器误解，以为这段文字有什么特殊含义，比如是链接、拼写错误或者其他需要特别注意的地方，但实际上它可能只是普通文本。这对于依赖辅助技术的人来说，无疑增加了理解障碍。

此外，用CSS来管理样式，统一性更好。你想改整个网站的下划线样式？改CSS文件里的一行代码就行了。如果用标签，你得一个个去改HTML，想想就头大。所以，为了代码的可维护性、可访问性和语义清晰，我们现在基本上都用CSS来处理视觉层面的东西。

在哪些特定场景下标签仍然有其用武之地？

虽然标签不再推荐用于普通的下划线样式，但HTML5标准并没有完全废弃它，而是赋予了它一个新的、更具体的语义——“不被强调的非文本注释”。这听起来有点拗口，但简单来说，它指的是那些需要被视觉上区分开来，但又不属于强调、重要性、或者链接之类的文本。