对超链接使用“border-bottom”而不是“text-decoration”——它在语义上是不是正确？

Posted 2023-04-13

【中文标题】对超链接使用“border-bottom”而不是“text-decoration”——它在语义上是不是正确？

【英文标题】：Using "border-bottom" instead of "text-decoration" for hyperlinks - is it semantically correct?对超链接使用“border-bottom”而不是“text-decoration”——它在语义上是否正确？

【发布时间】：2021-06-12 02:26:25

【问题描述】：

我看到了两种创建下划线链接的方法：

使用text-decoration:

a:link 
  color: blue;
  text-decoration: 1px underline red;

<a href="#">visit hjkl.org for Vim tricks</a>

禁用text-decoration 并改用border-bottom：

a:link 
  text-decoration: none;
  color: blue;
  border-bottom: 1px solid red;

<a href="#">visit hjkl.org for Vim tricks</a>

如您所见，外观略有不同。

使用border-bottom 的版本在语义上是否正确？ （这是我的问题。）

一方面，边框实际上并不是 html 标记的一部分，因此我们不能说这样的 标记 在语义上是错误的。标记实际上是相同的。

另一方面，text-decoration 和 border-bottom 属性的名称实际上是语义化的。我们不叫他们property-1 和property-2。

那么，回到我的问题，第二个版本在语义上是否正确？

【问题讨论】：

你想用第二个版本实现什么？只是想了解

@PsyGik 你的意思是当我们已经有一个更传统的text-decoration 时使用border-bottom 的目的是什么？好吧，没有真正的目的，只有自我教育和完美主义。我喜欢它的外观，但我更喜欢不在 HTML 中使用任何非语义的东西。

两者都不是语义，它们做不同的事情。文本装饰与元素中的文本有关，边框与元素本身有关。语义与样式无关。

@Paulie_D 这就是我所说的“一方面”。但正如你所见，我还提供了“另一方面”部分。

边框底部的优点是您可以设置外观样式（虚线、点线、粗细、不同颜色...）。最后，边框属性是一个有效的 HTML 标记。

【参考方案1】：

HTML 语义与 CSS 样式无关。语义关注为作业使用正确的标签，并且由于您使用锚元素作为链接，因此您的代码在语义上是正确的。现在，关于可访问性的经验法则是，每个元素都应该在视觉上相互区分，但不仅仅使用颜色。只要您使用另一种视觉提示（除了颜色）来区分您的链接和周围的文字，您就可以开始了，使用边框绝对是一个很好的例子。

【讨论】：

虽然您从技术方面完全说服了我，但我想说这个问题并不完全是技术性的。我的意思是，我们应该考虑诸如一致性之类的事情。在我看来，下划线和删除线都是来自同一个“家庭”的“孩子”。而且既然我们不能用border来模仿删除线，那么使用text-decoration似乎是一个更好的选择。

@jsv 与语义无关，这是你的问题