html - 用文本包裹 anchor 元素

Question

如果 anchor 元素有文本(而且只有文本)，但不是较大文本 block 的一部分，那么 anchor 标记是否被段落元素包裹是否重要(例如语义、SEO、维护)？

<!-- 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 元素的样式，并且 a 没有 div 包装器会破坏布局)。

换行符

不支持作者提供的 CSS 的用户代理(如文本浏览器、提要阅读器等)通常会为 div、p 等元素开始一个新行等(即 HTML 4 中的“ block 级元素”)，但不适用于 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)。