用文本包裹锚元素
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 的用户代理(如文本浏览器、提要阅读器等)通常会为 div
、p
等元素另起一行等(即 HTML 4 中的 "block-level elements"),但不适用于 span
、a
等元素("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
).
如果锚元素有文本(并且只有文本),但不是较大文本块的一部分,那么锚标记是否被段落包裹是否重要(例如语义、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 的用户代理(如文本浏览器、提要阅读器等)通常会为 div
、p
等元素另起一行等(即 HTML 4 中的 "block-level elements"),但不适用于 span
、a
等元素("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
).