语义标记：链接后的换行符

Question

我想：

1. 在新行上显示一系列链接
2. 维护链接的可变宽度和文字包装功能
3. 将每个链接的鼠标悬停区域限制为其实际内容
4. 保持内容流程中的链接

我能想到的最佳解决方案是

<div>
    <a href="">Text</a>
</div>
<div>
    <a href="">Text</a>
</div>

，但我不喜欢添加非语义<div>。我尝试使用a { float: left; clear: both }，但是从内容流中取出了链接。据我所知，我不能使用:outer-wrapper之类的伪选择器。是否有更好的解决方案，或<div>包装器是最佳解决方案？

*我考虑使用<ul><li><a>，但每页只有一个或两个链接，为了避免<ul><li>而不是<div>添加<div>似乎不合理一个{{1}}

Answer 1

这主要是基于意见和哲学问题，是“语义标记”的无休止和无用辩论的来源，“语义标记”本身就是一个语义模糊的概念。但是为了将问题转化为更具建设性的问题，我会问你使用哪个标记真正重要。它在非CSS渲染中或使用辅助软件时意味着什么？

从这个角度来看，如果带有项目符号的默认渲染是可接受的，ul就可以了。否则，请使用div，或在链接之间使用br。不要试图仅使用a样式，因为默认情况下链接会一起运行，显示为没有分隔符的内联文本。

Answer 2

选项可以是： （将它们包含在内容中）

1. display:table，堆叠它们。
2. display:inline-block或，
3. float:left让他们排成一行。

对于标记，您可以将<a>包装到<nav>标记中。并添加一个角色来区分它或用于主导航。
http://www.w3.org/TR/wai-aria/roles#landmark_roles

注意：如果导航不必要，可以使用任何其他标记，例如页脚或段落。 更多信息：http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element

全部

Answer 3

在语义上，您似乎想要放在页面上的是一个链接列表。所以就这样使用。

ul > li > a { /*whatever you want*/ }

您可以考虑wrapping the list in a nav，或者您可以完全忘记ul并且只有

nav > a { display: block; }

此外，不要认为所有divs都是非语义的。是的，它们没有特定的含义，但规范说它们代表了它们的内容。 div的一个非常好的用途是将具有相同主题或功能的元素分组在一起。在您的情况下，我不会只包含一个div的{​​{1}}，因为您对a充当膨胀是正确的。