是否有标准或首选标签类型可用于向某个位置添加额外的锚点/片段链接？

Posted 2023-03-25

【中文标题】是否有标准或首选标签类型可用于向某个位置添加额外的锚点/片段链接？

【英文标题】：Is there a standard or preferred tag type for adding additional anchor / fragment links to a location?

【发布时间】：2022-01-01 02:11:08

【问题描述】：

我目前在 html 文档中的每个部分标题上都有一个 id 属性，因此可以使用直接链接到文档中该部分的哈希片段生成 URL。例如：

<h2 id="section3.4">Section 3.4 - Foo</h2>

当然，这将链接为page.html#section3.4。

我想为该片段提供另一种格式，例如page.html#s3.4。确切的格式是任意的，在这里并不重要。

显然，不能简单地将多个 ID 标记应用于单个 HTML 元素来实现这一点。解决方案似乎是在与标题相同的位置向页面添加辅助标签，例如：

<h2 id="section3.4">Section 3.4 - Foo</h2><xyz id="s3.4"></xyz>

是否有用于此目的的标准或首选标记类型？环顾四周，我惊讶地发现没有“最佳实践”的答案。

从技术上讲，标签类型是任意的，因为任何具有id 属性的元素都应该可以工作，但是选择canvas 或script，例如，显然是愚蠢的。我看过a 的建议，但我不确定这在语义上是否正确，因为a 应该创建一个锚到一个位置，而不是成为一个位置。

我的一个想法是让封闭的section标签的ID成为目标，但这并不能启用任意数量的备用片段名称，而且从技术上讲，它没有链接到自边界框以来的同一位置受 CSS 约束。

我觉得理想的元素应该是保证在 DOM 上没有视觉存在，与相邻元素保持相同的垂直位置，没有副作用，并且作为位置标记具有语义意义的元素，所有同时对可访问性（例如屏幕阅读器）也没有任何影响。但是，我想不出这样的元素。有没有我错过的标准？如果没有，哪个标签可能是最好的选择？

【参考方案1】：

在内联上下文中，使用<span> 元素将文本包裹在适当的标题内。

<h2 id="section3.4"><span id="s3.4">Section 3.4 - Foo</span></h2>

在块上下文中，使用<div>。

两者在语义上都是中性的。而且这种方法可以确保标题文本获得适当的焦点，无论使用哪个片段标识符。

【讨论】：

span 是否会以任何方式固有地修改包含元素的框模型边界或布局行为，即使包含的元素本身是隐式或显式样式的？

不，没有与之关联的默认样式。

这似乎不正确。 Spans 是内联元素，因此虽然它们没有应用任何默认 CSS，但它们确实隐含地以 display: inline 结尾。这会修改基于the box model 的包含元素的布局行为。如果您知道每个子元素也是内联的，则跨度很好，但它会修改块、内联块、flex 等子元素的布局行为。 div也是如此。两者都不是完全中立的布局。

明确地说，我知道在这种情况下，在 h2 中放置一个 span 作为一种解决方案是绝对好的，它会起作用，除非页面包含样式的 CSS，否则不会引起问题所有跨度元素。但它并不是一个严格意义上的语义正确的包罗万象的解决方案，用于使用两个不同的片段名称链接到特定元素的位置，因为添加容器会固有地改变布局行为，即使该行为在实践中是微妙的或不可见的。我希望的是一种对 DOM 有效透明的元素类型，对布局、ARIA 角色等没有影响。

没有这样的单一元素。最接近的是内联上下文中的<span> 和块上下文中的<div>。除了固有的display 样式外，它们在布局、语义、角色等方面都是透明的。