在<a id="top">Top of page</a>中使用锚点有什么意义？

Question

第一个用于“html链接”的Google search result说（转述）要在网页内创建书签/部分，我们必须这样做：

<a id='section-2'>Section 2</a>

以便我们可以像这样链接到它：

<a href='page.php#section-2' >Click</a>

但为什么网站建议在“第2节”周围使用锚标记？ - 什么时候可以使用span：

<span id='section-2'>Section 2</span>

是否存在兼容性问题？因为“在网页中创建书签”的第一个search result也表示用锚标记包围标题：

<p><a name="title">Title</p>

虽然这个特定的例子由于其他各种原因而不正确。

我有一个补充问题：

为什么要使用容器包围标题，只需这样就可以完成：

<span id='section-2'></span>Section 2

重要吗？

<span id='section-2'>Sec</span>tion 2

<a href='page.php#section-2' >Click</a>

Answer 1

没有意义。 W3schools是不可靠的，只是不使用它，你会避免混淆和错误的信息;见http://w3fools.com

在过去，在页面中设置目标锚点的唯一方法是使用<a name=...>...</a>元素（在文本级别）。之后，添加了id属性，现在所有正在使用的浏览器都支持该属性，因此您只需将id属性附加到其中即可将任何元素作为目标锚点。例如，为了能够链接到<h2>Section 2</h3>之类的标题，您可以只使用<h2 id=section-2>Section 2</h2>。不需要人为的额外元素。

使用<span id='section-2'></span>Section 2虽然形式正确但不是一个好主意。你通过使用它赢得任何东西，与更逻辑的标记相反。如果你是后来想要使用:target伪类来设置（突出显示）用户使用链接“跳转”到的元素，你会发现自己处于一个尴尬的位置：伪类会让你风格化只是span的空内容。

关于标题中的问题，没有理由使用<a id='top'>Top of page</a>或其他方式使页面顶部成为目标锚点。首先，您可以仅使用href=#来引用页面的开头，因为根据URL规范，#表示当前资源的开头。其次，“Back to top” links are basically useless or worse：每个浏览器都有一个简单的命令可以转到页面的开头，显式的“回到顶部”链接可能会让人感到困惑：回到的内容？< / p>

Answer 2

在html的早期，锚元素是唯一的方法，但仅仅因为 现在可以用其他元素类型执行它并不意味着应该：< / em>为此目的使用锚在语义上是正确的，因为它使任何读取或维护标记的人都清楚该元素意图作为导航目标。 （注意页面上通常会有许多元素具有id但不是导航目标。）

  

“为什么要将容器包围起来，只需这样就可以完成：
  <span id='section-2'></span>Section 2

因为如果你将标题的文本放在一个元素中，你可以设置它的样式和/或从JavaScript中轻松搞砸它。实际上，如果它是标题，您可能希望将其放在<h1>，<h2>等标记而不是<span>。