我应该使用“name”还是“id”制作 HTML 锚点？

Should I make HTML Anchors with 'name' or 'id'?

提问by Henrik Paul

When one wants to refer to some part of a webpage with the "http://example.com/#foo" method, should one use

当人们想用“ http://example.com/#foo”方法引用网页的某个部分时，应该使用

<h1><a name="foo"/>Foo Title</h1>

or

或者

<h1 id="foo">Foo Title</h1>

They both work, but are they equal, or do they have semantic differences?

它们都有效，但它们是平等的，还是有语义差异？

采纳答案by Greg

According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:

根据 HTML 5 规范，5.9.8 Navigating to a fragment identifier：

For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

1. Parse the URL, and let fragid be the <fragment> component of the URL.
2. If fragid is the empty string, then the indicated part of the document is the top of the document.
3. If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
4. If there is an aelement in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
5. Otherwise, there is no indicated part of the document.

对于 HTML 文档（和 text/html MIME 类型），必须遵循以下处理模型来确定文档的指示部分是什么。

1. 解析 URL，让 fragid 成为 URL 的 <fragment> 组件。
2. 如果 fragid 是空字符串，则文档的指示部分是文档的顶部。
3. 如果 DOM 中有一个元素的 ID 正好等于 fragid，那么树序中的第一个这样的元素就是文档的指示部分；在这里停止算法。
4. 如果DOM 中有一个a元素的 name 属性的值恰好等于 fragid，则树顺序中的第一个这样的元素是文档的指示部分；在这里停止算法。
5. 否则，文档中没有指明的部分。

So, it will look for id="foo", and then will follow to name="foo"

所以，它会寻找id="foo"，然后会跟随到name="foo"

Edit: As pointed out by @hsivonen, in HTML5 the aelement has no name attribute. However, the above rules still apply to other named elements.

编辑：正如@hsivonen 所指出的，在 HTML5 中，a元素没有 name 属性。但是，上述规则仍然适用于其他命名元素。

回答by hsivonen

You shouldn't use <h1><a name="foo"/>Foo Title</h1>in any flavor of HTML served as text/html, because the XML empty element syntax isn't supported in text/html. However, <h1><a name="foo">Foo Title</a></h1>is OK in HTML4. It is not valid in HTML5 as currently drafted.

您不应<h1><a name="foo"/>Foo Title</h1>在任何形式的 HTML 中使用as text/html，因为 .xml 中不支持 XML 空元素语法text/html。但是，<h1><a name="foo">Foo Title</a></h1>在 HTML4 中是可以的。它在目前起草的 HTML5 中无效。

<h1 id="foo">Foo Title</h1>is OK in both HTML4 and HTML5. This won't work in Netscape 4, but you'll probably use a dozen other features that don't work in Netscape 4.

<h1 id="foo">Foo Title</h1>在 HTML4 和 HTML5 中都可以。这在 Netscape 4 中不起作用，但您可能会使用许多其他在 Netscape 4 中不起作用的功能。

回答by Tim Knight

I have to say if you are going to be linking to that area in the page... such as page.html#foo and Foo Title isn't a link you should be using:

我不得不说，如果您要链接到页面中的那个区域……例如 page.html#foo 和 Foo Title 不是您应该使用的链接：

<h1 id="foo">Foo Title</h1>

If you instead put an <a>reference around it your headline will be influenced by an <a>specific CSS within your site. It's just extra markup, and you shouldn't need it. I'd highly recommend placing an id on the headline, not only is it better formed, but it will allow you to either address that object in Javascript or CSS.

如果您改为<a>在它周围放置参考，您的标题将受到<a>您网站中特定 CSS 的影响。这只是额外的标记，你不应该需要它。我强烈建议在标题上放置一个 id，它不仅格式更好，而且允许您在 Javascript 或 CSS 中处理该对象。

回答by Zoltán Morvai

Wikipedia makes heavy use of this feature like this:

维基百科大量使用此功能，如下所示：

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

And Wikipedia is working for everybody, so I would feel safe sticking with this form.

维基百科适用于所有人，所以我觉得坚持使用这种形式是安全的。

Also don't forget, you can use this not only with spans but with divs or even table cells, and then you have access to the :target pseudo-class on the element. Just watch out not to change the width, like with bold text, cause that moves content around, which is disturbing.

另外不要忘记，您不仅可以将它用于跨度，还可以用于 div 甚至表格单元格，然后您可以访问元素上的 :target 伪类。请注意不要更改宽度，例如粗体文本，因为它会移动内容，这令人不安。

Named anchors - my vote is to avoid:

命名主播 - 我的投票是避免：

• "Names and ids are in the same namespace..." - Two attributes with the same namespace is just crazy. Let's just say deprecated already.
• "Anchors elements without href atribute" - Yet again, the nature of an element (hyperlink or not) is defined by having an atribute?! Double crazy. Common sense says to avoid it altogether.
• If you ever style an anchor without a pseudo-class, the styling applies to each. In CSS3 you can get around this with attribute selectors (or same styling for each pseudoclass), but still it's a workaround. This usually doesn't come up because you choose colors per pseudo-class, and the underline being present by default it only makes sense to remove, which makes it the same as other text. But you ever decide to make your links bold, it'll cause trouble.
• Netscape 4 might not support the id feature, but still an unknown attribute won't cause any trouble. That's what called compatibility for me.

• “名称和 ID 在同一个命名空间中......” - 具有相同命名空间的两个属性太疯狂了。让我们说已经弃用了。
• “没有 href 属性的锚元素” - 再一次，元素的性质（超链接与否）是由属性定义的？！双疯。常识说要完全避免它。
• 如果您在没有伪类的情况下设置锚点的样式，则样式适用于每个锚点。在 CSS3 中，您可以使用属性选择器（或每个伪类的相同样式）来解决这个问题，但这仍然是一种解决方法。这通常不会出现，因为您为每个伪类选择颜色，并且默认情况下存在的下划线只有删除才有意义，这使其与其他文本相同。但是你曾经决定让你的链接加粗，它会引起麻烦。
• Netscape 4 可能不支持 id 功能，但仍然是未知属性不会造成任何问题。这就是我所说的兼容性。

回答by Andrew Marsh

<h1 id="foo">Foo Title</h1>

is what should be used. Don't use an anchor unless you want a link.

是应该使用什么。除非您想要链接，否则不要使用锚点。

回答by mikemaccana

Heads up for JavaScript users: all IDs become global variables under window.

JavaScript 用户注意：所有 ID 都成为 window 下的全局变量。

<h1 id="foo">Foo Title</h1>

Just created the JS global:

刚刚创建了 JS 全局：

window.foo

The value of window.foowill be the HTMLElementfor the h1.

的价值window.foo将是HTMLElement对h1。

Unless you can guarantee all values used in idattributes are safe, you may prefer sticking to name:

除非您可以保证id属性中使用的所有值都是安全的，否则您可能更愿意坚持name：

<h1 name="foo">Foo Title</h1>

回答by Spikolynn

ID method will not work on older browsers, anchor name method will be deprecated in newer HTML versions... I'd go with id.

ID 方法在旧浏览器上不起作用，锚名称方法将在较新的 HTML 版本中被弃用......我会选择 id。

回答by erickson

There's no semantic difference; the trend in the standards is toward the use of idrather than name. However, there are differences that may lead one to prefer namein some cases. The HTML 4.01 specification offers the following hints:

没有语义差异；标准中的趋势是使用id而不是name。但是，name在某些情况下，存在可能导致人们更喜欢的差异。HTML 4.01 规范提供了以下提示：

Use idor name? Authors should consider the following issues when deciding whether to use idor namefor an anchor name:

使用id或name? 作者在决定是否使用id或name用作锚名称时应考虑以下问题：

• The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
• Some older user agents don't support anchors created with the id attribute.
• The name attribute allows richer anchor names (with entities).

• id 属性不仅可以用作锚点名称（例如，样式表选择器、处理标识符等）。
• 一些较旧的用户代理不支持使用 id 属性创建的锚点。
• name 属性允许更丰富的锚点名称（带有实体）。

回答by maximus

I have a web page consisting of a number of vertically stacked div containers, identical in format and differing only in serial number. I wanted to hide the name anchor at the top of each div, so the most economical solution turned out to be including the anchor as an id within the opening div tag, i.e,

我有一个网页，由许多垂直堆叠的 div 容器组成，格式相同，仅序列号不同。我想隐藏每个 div 顶部的名称锚点，所以最经济的解决方案是在开始 div 标签中包含锚点作为 id，即，

<div id="[serial number]" class="topic_wrapper">

回答by jerseyboy

Just an observation about the markup The markup form in prior versions of HTML provided an anchor point. The markup forms in HTML5 using the id attribute, while mostly equivalent, require an element to identify, almost all of which are normally expected to contain content.

只是对标记的观察 先前版本的 HTML 中的标记表单提供了一个锚点。HTML5 中使用 id 属性的标记表单虽然大部分是等效的，但需要一个元素来标识，几乎所有元素通常都应该包含内容。

An empty span or div could be used, for instance, but this usage looks and smells degenerate.

例如，可以使用空的 span 或 div，但这种用法看起来和闻起来都退化了。

One thought is to use the wbr element for this purpose. The wbr has an empty content model and simply declares that a line break is possible; this is still a slightly gratuitous use of a markup tag, but much less so than gratuitous document divisions or empty text spans.

一种想法是为此目的使用 wbr 元素。wbr 有一个空的内容模型，并简单地声明可以换行；这仍然是对标记标签的稍微无缘无故的使用，但比无缘无故的文档分割或空文本跨度要少得多。