用文本包裹锚元素

Wrapping anchor elements with text

如果锚元素有文本(并且只有文本),但不是较大文本块的一部分,那么锚标记是否被段落包裹是否重要(例如语义、SEO、维护)元素?

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

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

从大网站来看,这两种方式似乎都很流行。但有什么显着差异吗?

(请注意,p 只能使用 for paragraphs。如果它不是段落,而你想使用这样的包装器,请改用 div;如果它是段,无论如何都应该使用 p。)

我能想到这样的包装器在语义上很重要的两种情况(见下文)。使用包装器的另一个很好的理由当然是,如果现有 CSS/JS suggests/requires 它(例如,如果 CSS 作者决定样式化 div 元素,并且 a 没有 div 包装器会破坏布局。

换行符

不支持作者提供的 CSS 的用户代理(如文本浏览器、提要阅读器等)通常会为 divp 等元素另起一行等(即 HTML 4 中的 "block-level elements"),但不适用于 spana 等元素("inline elements")。

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

<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).