用文本包裹锚元素

Question

如果锚元素有文本（并且只有文本），但不是更大文本块的一部分，那么该锚标签是否被段落元素包裹是否重要（例如语义、搜索引擎优化、维护）？

<!-- Wrapped -->
<p><a href=''>Link Description</a></p>

<!-- Standard -->
<a href=''>Link Description</a>

查看大型网站，这两种方式似乎都很流行。但是有什么明显的区别吗？

Answer 1

(注意p只能用for paragraphs。如果不是段落，并且你想使用这样的包装，使用div代替；如果是段落，应该使用p无论如何。）

我可以想到这样的包装器在语义上很重要的两种情况（见下文）。当然，使用包装器的另一个好理由是，如果现有的 CSS/JS 建议/需要它（例如，如果 CSS 作者决定设置 div 元素的样式，并且没有 div 包装器的 a 会损坏布局）。

换行

不支持作者提供的 CSS（如文本浏览器、提要阅读器等）的用户代理通常会为 div、p 等元素开始一个新行（即“块级HTML 4 中的元素”），但不适用于 span、a 等元素（“内联元素”）。

所以如果你有这样的事情：

<p>Teaser with some text.</p>
<a href="link">Read more</a>
<cite>John Doe</cite>

这样的用户代理可能会在同一行显示最后两个元素：

Teaser with some text.

Read more John Doe

虽然最好让每个都单独一行：

Teaser with some text.

Read more

John Doe

因此，对于这种情况和类似情况，应该使用包装元素（通常默认创建一个新行）。

如果a 是唯一的phrasing content 元素（例如，在两个p 元素之间），那么这当然不是问题。

未关闭p

如果p 元素没有结束标记（这是有效的），则后面的a 将成为p 的一部分：

<p>some text

<a href="link">Read more</a>

如果关闭p 不是一种选择，则必须使用a 的包装器（不能是p 的子级，例如div）。