哪个更正确:<h1> <a> ...... </a> </ h1>或<a> <h1> ... </ h1> </a>

Question

是<h1><a ...> ... </a></h1>和<a ...><h1> ... </h1></a>有效的HTML,还是只有一个正确？如果它们都是正确的,它们的含义是否不同？

Answer 1

两个版本都是正确的.它们之间最大的区别在于,<h1><a>..</a></h1>只有标题中的文本才会被点击.

如果你把css 属性放在<a>那里(默认情况下是这样),那么整个块(它所在的容器宽度的100%和高度)将是可点击的.<h1>displayblock<h1><h1>

从历史上看,您无法在内联元素中放置块元素,但HTML5不再是这种情况.我认为这种<h1><a>..</a></h1>方法更传统.

如果你想在标题上放置一个锚点,那么比<a id="my-anchor"><h1>..</h1></a>使用这样id的name属性更好的方法:<h1 id="my-anchor">..</h1>或者<h1 name="my-anchor">..</h1>

Answer 2

在HTML 5之前的这个

<a><h1>..</h1></a>

不会验证.您可以在HTML 5中使用它.但是,我会使用这个:

<h1><a>..</a></h1>

除非你需要在<a>中添加超过<h1>

Answer 3

<a><h1></h1></a>不是W3C有效...基本上,您不能将块元素放在内联元素中

Answer 4

<h1><a>..</a></h1><a><h1>..</h1></a>当样式表不影响渲染时,它总是表现得几乎相同.几乎,但不完全.如果使用Tab键导航或以其他方式关注链接,则在大多数浏览器中链接周围会出现"焦点矩形".因为<h1><a>..</a></h1>,此矩形仅围绕链接文本.因为<a><h1>..</h1></a>,矩形在可用的水平空间中延伸,因为标记使a元素成为渲染中的块元素,默认情况下占据100%的宽度.

以下显示了<a href=foo><h1>link</h1></a>Chrome 如何呈现焦点:

这意味着如果您通过为链接设置背景颜色来设置元素样式,则效果会以类似的方式不同.

从历史上看,<a><h1>..</h1></a>在HTML 2.0中被宣布无效,随后的HTML规范也随之而来,但HTML5对此进行了更改并将其声明为有效.正式定义不影响浏览器,只影响验证器.但是,一些用户代理(可能不是普通的浏览器,但是例如专门的HTML渲染器,数据提取器,转换器等)可能无法<a><h1>..</h1></a>正确处理 ,因为规范中不允许这样做.

很少有理由在标题中创建标题或文本链接.(这在很大程度上是不合逻辑的,也不利于可用性.)但是,当使用例如对比 时,将标题(或标题中的文本)作为链接的潜在目的地时,经常会出现类似的问题.类似的考虑适用于此(两者都有效,可能存在差异,因为后者使元素成为块,而在HTML5之前,只有前者被正式允许).但另外,两种方式都已过时,现在建议直接在heading元素上使用该属性:.<h2><a name=foo>...</a></h2><a name=foo><h2>...</h2></a>aid<h2 id=foo>...</h2>

Answer 5

H1元素是块级元素,锚点是内联元素.您可以在块级元素中使用内联元素,但不能相反.当你考虑盒子模型和HTML规范时,这是有道理的.

总之,最好的方法是:

<h1><a href="#">Link</a></h1>