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

问题描述

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

1. 使用 text-decoration：

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

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

2. 要禁用 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。

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

解决方法

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