Html 在语义上,哪个更正确:a in h2,还是 h2 in a?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9760074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:13:13  来源:igfitidea点击:

Semantically, which is more correct: a in h2, or h2 in a?

htmlstandardssemantics

提问by Only Bolivian Here

I'm stuck deciding which to use as both seem to work.

我一直在决定使用哪个,因为两者似乎都有效。

Should I be placing links <a>inside of <h2>elements?

我应该<a><h2>元素内放置链接吗?

Or the other way around?

或者反过来?

What is the correct standard?

什么是正确的标准?

回答by BoltClock

You can only place <h2>elements within <a>elements if you're working with HTML5, which allows any other elements within <a>elements. Previous specifications (or current ones however you want to look at them) never allowed this.

如果您使用 HTML5,则只能将<h2>元素放置在<a>元素中,而 HTML5允许元素中<a>包含任何其他元素。以前的规范(或当前的规范,无论您想查看它们)从不允许这样做。

The usual way of doing this is to place <a>within <h2>. This works, has always worked, and has been the only valid way to do it before HTML5, for heading links, as the link refers to the text in that heading. You rarely need to place <h2>within <a>unless that <h2>is part of some more complex structure which functions as a hyperlink as a whole.

这样做的通常方法是放置<a><h2>. 这有效,一直有效,并且是 HTML5 之前唯一有效的方法,用于标题链接,因为链接指的是该标题中的文本。你很少需要放置<h2>在里面,<a>除非它<h2>是一些更复杂的结构的一部分,作为一个整体的超链接。

回答by Kyborek

Also its not functioning same, there is one big difference.

它的功能也不一样,有一个很大的区别。

If you put <h2>into <a>the whole block (for example line) of heading will work like link.

如果你把<h2><a>标题的整个块(例如线)会像链接。

However if you put <a>into <h2>, only visible text will work as link. (you can test it with cursor change)

但是,如果你把<a><h2>,唯一可见的文本将作为链接。(您可以通过更改光标来测试它)

回答by clami219

The answer is that it depends...

答案是这取决于...

From the W3C website, more specifically in the HTML5 semantics page, it is clear that h2 elements (as all other heading tags) have as content model "Phrasing content".

从 W3C 网站,更具体地说,在HTML5 语义页面中,很明显 h2 元素(与所有其他标题标签一样)具有作为内容模型的“短语内容”。

Now, following the Phrasing content link, you get the following description:

现在,按照短语内容链接,您将获得以下描述:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

短语内容是文档的文本,以及在段落内标记该文本的元素。大量的措辞内容形成段落。

and in the following list you have that phrasing content include:

在以下列表中,您的措辞内容包括:

a (if it contains only phrasing content)

a(如果它只包含短语内容)

So, if the atag includes only phrasing content, HTML5 allows it to be contained within a h2tag.

因此,如果a标签仅包含短语内容,HTML5 允许将其包含在h2标签中。

Viceversa, the text level semantics pagedescribes the aelement content model as follows:

反之亦然,文本级语义页面描述a元素内容模型如下:

Transparent, but there must be no interactive content descendant.

透明,但必须没有交互式内容后代。

Following the Transparent link, at the end of the description is found the following:

透明链接之后,在描述的末尾可以找到以下内容:

When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any flow content.

当透明元素没有父元素时,其内容模型中“透明”的部分必须被视为接受任何流内容。

Since in the h2tag descriptionit is said:

因为在h2标签描述中是这样说的:

Contexts in which this element may be used: Where flow content is expected.

可以使用此元素的上下文:预期流内容的位置。

an h2tag may the considered as flow content.

一个h2标签可以被认为是流内容。

So, if the atag has no parent, in HTML5 it must be treated as accepting any flow content, including h2 tags.

所以,如果a标签没有父标签,在 HTML5 中它必须被视为接受任何流内容,包括 h2 标签。

回答by Graeme Stuart

HTML allows things inside <a>tags

HTML 允许<a>标签内的东西

I have this...

我有这个...

<header>
  <a href="/home">
    <h1>Main heading</h1>
    <h2>Sub heading</h2>
  </a>
</header>

And it works for me.

它对我有用。

The whole heading text including the subheading is clickable as I want. I don't know of a better way to do this with html 5.

包括副标题在内的整个标题文本都可以根据需要点击。我不知道用 html 5 执行此操作的更好方法。

回答by Graeme Stuart

The W3C specs for h2say that its permitted parent elements are anything that can contain flow elements, or hgroups. The specs for apermit parent elements that can contain phrasing orflow elements. h2 can contain phrasing content, and a can contain phrasing or flow content, so based on the spec it appears that either is permitted.

h2的 W3C规范说它允许的父元素是任何可以包含流元素或 hgroups 的东西。允许包含短语流程元素的父元素的规范。h2 可以包含短语内容,而 a 可以包含短语或流程内容,因此根据规范似乎允许两者之一。

Since you included the semantics tag, I assume you're interested in which 'seems' better too. For my part, since I can't think of when I'd want an anchor to span a heading plus other content, but I can think of plenty of times when a header should contain an anchor plus other content, a inside h2 seems the best route to go.

由于您包含了语义标签,我假设您对哪个“看起来”更好也很感兴趣。就我而言,因为我想不出什么时候我想要一个锚点跨越一个标题和其他内容,但我可以想到很多时候标题应该包含一个锚点和其他内容,一个内部的 h2 似乎是最好的路线。