我应该用'name'还是'id'制作HTML锚？答案

【问题标题】：Should I make HTML Anchors with 'name' or 'id'?我应该用'name'还是'id'制作HTML锚？
【发布时间】：2010-10-03 20:07:55
【问题描述】：

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

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

或

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

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

【问题讨论】：

链接实际上应该是http://example.com#foo（所以在#之前没有/）
实际上，http://example.com#foo 和 http://example.com/#foo 在 URI 的 RFC 中定义是等价的。
请检查这个答案：stackoverflow.com/a/69869066/2457251

标签： html hyperlink fragment-identifier

【解决方案1】：

现在不是关于支持，因为谁会在 2021 年关心比 IE6 更旧的浏览器？

请注意，Stackoverflow 仍在使用锚点和“名称”属性而不是“名称”属性。

为什么？

因为你：

SINGLE 元素上的 id 不能有两个值。

#sample
{
  color: red; 
}

<div id="postNr4245 sample"> Sample text </div>  <!-- coloring doesn't work -->

<a href="#postNr4245">Jump to Post</a> <!-- jumping doesn't work -->

好的，你可以说你可以使用'class'来做类似的事情。

确实如此但是如果您的网站上只有单个元素需要设置样式，那么您不应该使用类。

为什么？

因为如果您使用 CSS 选择器 #idName 并且网络浏览器会找到该元素，它不会进一步查找。它可以加快您网站的加载速度。

如果您使用 .class，它需要查找 DOM 的每个位置，因为网络浏览器不知道您是否使用过 .class 一次或多次。

如果要在 CSS 中设置样式或使用 JS 解析，则不能以数字开头的 'id' 值。但是，您可以使用数字开头的 'name' 值。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

不仅如此，我一直在与一个奇怪的错误作斗争，其中 display: none stuff 出现在 IE 中。由于缺乏对攻击点的任何想法，我把它扔给了一个标记条目的验证器，所以我改变了它们——现在显示：没有工作正常。
这个绰绰有余，为了效果不需要锚标签。

【解决方案3】：

在 html 5 中，id="" 属性定义了元素的唯一标识符，它也是片段链接的锚点。在以前的 html 标准中，<a> 元素的 name="" 属性定义了片段链接的锚点。我推荐类似：
<a name="foo" id="foo"></a><h1>Foo Title</h1>
因为对id=""属性的支持有点参差不齐（尽管所有主流浏览器的最新版本都支持它，但不超过几年的版本[而且最好不要破坏某些东西，如果有不是一个很好的理由]）。它是兼容的，并且它不会为链接元素中的任何内容设置样式，因为结束仍在元素之外，但在所有当前标准中仍然有效。

确保<a> 元素的name="" 和id="" 属性相同。

【讨论】：

并非所有使用 HTML 的东西都是浏览器。我正在使用一个 Java 库，它使用 HTML 在窗口中显示信息。这是唯一有效的方法。这是必需的锚标记上的name 属性；将属性放在 hN 或 span 上不起作用。

【解决方案4】：

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

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

解析 URL，让 fragid 成为 URL 的组件。

如果 fragid 是空字符串，则文档的指示部分是文档的顶部。

如果 DOM 中有一个 ID 正好等于 fragid 的元素，那么按树形顺序排列的第一个这样的元素就是文档的指示部分；在这里停止算法。

如果 DOM 中有一个 a 元素，其 name 属性的值正好等于 fragid，那么树顺序中的第一个这样的元素就是文档的指示部分；在这里停止算法。

否则，文档中没有指定的部分。

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

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

【讨论】：

该算法与有效性之间没有隐含的关系。当前起草的在 HTML5 中无效。
实际上它不适用于其他“命名元素”。就名称属性而言，它仅适用于。但是，作者可能不会使用该属性。对于旧的 HTML 页面，用户代理只需要尊重它。
@RafaelSoares <h1 id="foo">Foo Title</h1> 甚至可以在 IE6 中使用，并且是 HTML 4.01 specification 的一部分
它不会寻找 name="foo" 而是寻找。见 link
在带有name="foo" 和id="foo" 的HTML5 文档中（独立于它们在页面中的顺序），Chrome 和Firefox 会跳转到id，但是IE（在11 中测试） Edge 会跳转到name

【解决方案5】：

ID 方法不适用于旧浏览器，锚名称方法将在较新的 HTML 版本中被弃用...我会使用 id。

【讨论】：

你有这些说法的来源吗？不要误会我的意思；我只是一般感兴趣。
这没有说明“不适用于旧版浏览器”。 – 除了 Netscape 4，这些是哪些浏览器？？
我试过在 div 上使用 id，它甚至在 IE 7 中也能工作。虽然无法在 IE 6 中测试.. 但是现在谁在使用 IE 6...
@deathApril 在某些情况下（取决于 HASLAYOUT）有问题。
@RobertSiemer 几乎普遍适用——请参阅我在this answer 下的评论。

【解决方案6】：

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

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

刚刚创建了 JS 全局：

window.foo

window.foo 的值将是h1 的HTMLElement。

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

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

【讨论】：

好消息是您不能覆盖window 中定义的函数。例如，<div id="open"></div> 不会覆盖函数 window.open。

【解决方案7】：

如何为旧浏览器使用 name 属性，为新浏览器使用 id 属性。这两个选项都将被使用，并且默认实现回退方法！！！

【讨论】：

【解决方案8】：

维基百科像这样大量使用这个特性：

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

而且 Wikipedia 对所有人都有效，所以我可以放心使用此表格。

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

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

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

【讨论】：

建议编辑第 3 条，共 4 条：如果您曾经为 a {color:red} 设置样式，它将为您的链接和您的片段着色。您可以使用伪类 a:link {color:red]} 或属性选择器 a:not([href]) {color:red;} 来解决这个问题
你是对的，但对我来说，第 3 条正是这一点。不过可能是我的英语......
最后，我明白了你的意思：“如果你曾经在没有伪类的情况下为锚定样式，则样式适用于每个锚。”模棱两可：您可能会认为“每个伪类”。正确的。但是我在考虑使用锚的“每种情况”，这意味着命名和href-ed。澄清。 :) 无需在您发表评论后进行编辑，但如果您坚持，我可以。但它仍然不容易发生颜色，因为您通常打算让它们保持不同，但字体粗细仍然相同......
很高兴阅读您的 cmets @ZoltánMorvai。 “双重疯狂”和“网景4”doubleplusgood。
具有相同命名空间的两个属性是疯狂的 - 不是真的。在做用户生成的内容时，能够在不设置 ID 的情况下将某些内容指定为片段链接<a name="heading1"></a> ... document.html#heading1 非常有用，因为该 ID 可能与页面上的另一个 ID 冲突。很遗憾他们没有在 HTML5 中添加 name 属性。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

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

【讨论】：

这是一个很好的观点。有关wbr 的更多信息：w3.org/TR/html-markup/wbr.html 使用<wbr id="foo" /> 而不是<a name="foo"></a>

【解决方案11】：

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

是应该使用的。除非您需要链接，否则不要使用锚点。

【讨论】：

与蒂姆奈特的回答相同，在此之前半年发布。 -1

【解决方案12】：

根据定义，整个“命名锚”概念使用名称属性。您应该坚持使用名称，但 ID 属性对于某些 javascript 情况可能很方便。

就像在 cmets 中一样，您总是可以同时使用两者来对冲您的赌注。

【讨论】：

同时使用时，id:s 和 names 是全局唯一的吗？比如，我可以使用相同的字符串作为 id 和 name 吗？
可以，但有些人认为这是不好的做法。
根据 HTML 规范，如果两者都存在，则 name 和 id 应该相同。它还说名称和 ID 在同一个命名空间中。 HTML 验证器服务不会检查这些，我怀疑浏览器是否在乎，但无论如何它们似乎都是很好的指导方针。
重新定义现实！

【解决方案13】：

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

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

【讨论】：

+1 用于讨论浏览器支持。 NS4 是唯一不支持 url#id => element.id 的吗？
@Hashbrown 找不到答案，所以我做了一些测试。我发现即使是非常旧的浏览器也将ids 视为URL 片段的name 锚点和CSS :target 选择器的compatibility。已测试：Chrome 6、Firefox 1.5、IE6、Opera 8.02、Safari 3.1.2、Netscape 7.2、Lynx 2.24 和移动浏览器：Android 2.2、Chrome 26、Dolphin 9.3、Firefox 19、IE10、Safari 4 和 Opera Mini 5.1。
@smhmic，我找到了一个。 Off-By-One Web 浏览器识别通过定义的锚点，但无法识别通过 OB1 定义的锚点 > 8 年前。它的作者吹嘘说它“可能是世界上最小、最快且完全支持 HTML 3.2 的网络浏览器”。它声称通过 XP 支持 Win95，但它在 64 位 Win7 下运行良好。那么，为什么会有这样的恐龙呢？当然，为了测试，以确保我的网站不会因真正的古董浏览器而严重损坏。另外，我还在闪存驱动器上携带 OB1。它很小，独立且不受感染。
在 2016 年读到这个就像.. Netscape 4?
使用 `

【解决方案14】：

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

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

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

【讨论】：

明确地说，当他们说“旧用户代理”时，他们的意思是真正的旧用户代理。我不会担心的。
HTML5 也允许“丰富”ID。是否有人拥有无法处理 id-anchored 片段的市场份额大于 0.1% 的浏览器版本号？ – 或者说恐龙 Netscape 4.7 实际上是传播最广的一个？
FWIW，我无法让 id 锚点在 iOS 5 的 Safari 中工作，所以不仅仅是 09 年已经“非常旧”的浏览器。我必须添加names 才能让我的网站在 iPad 上正常工作。这个问题现在可能已经解决了，我没有任何 iOS 6 设备可供检查。
@DanielSaner 真的吗？所以en.wikipedia.org/wiki/IPad#Applications 不能在你的 iPad 上运行？
@DanielSaner 我使用模拟器测试了 Mobile Safari 5.02 和 5.1，以及 Android 浏览器 2.2 和 2.3，id 锚似乎可以通用。如果this simple example 在您的手机上不起作用，我会检查设备的辅助功能设置。（@deathApril Wikipedia 移动网站有 Javascript，可以有效地导致 URL 片段被忽略。）

【解决方案15】：

第二个示例为相关元素分配一个唯一 ID。然后可以使用 DHTML 操作或访问该元素。

另一方面，第一个在文档中设置一个命名位置，类似于书签。附加到“锚”上，这很有意义。

【讨论】：