HTML中是否存在独立于内容结构的非层级标签？

HTML本身不支持你示例中这种跨父级容器的非层级标签，所有原生HTML标签都必须遵循严格的嵌套规则，开放标签和闭合标签必须处于同一个父元素的范围内。你示例中<n-htag>开放标签写在第一个div内部、闭合标签写在第二个div内部的写法，会被浏览器的DOM解析器自动修正结构，完全达不到你预期的标记效果。

可实现同类需求的替代方案 #

如果你的目标是标记跨不同容器的文本/内容范围，可以选择以下两种成熟方案：

• 用浏览器原生Range接口做虚拟标记，不需要插入实际DOM元素：你可以单独记录标记的起止位置（比如起始节点是#thing的第一个文本节点的第6个字符位置，结束节点是#thing2的第一个文本节点的末尾），后续不管是给范围加样式、还是提取范围内容，都可以直接通过Range接口操作。
• 插入成对的锚点标记标签，符合HTML嵌套规则：你可以把单个跨容器标签拆成两个自闭合的起止标记标签，示例如下：

<div class="thingy" id="thing">
blabla<n-htag-start />bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo<n-htag-end />
</div>

后续你可以通过JS匹配成对的start和end标记，处理两个标记之间的所有内容。

注意：如果直接使用你示例中的跨容器标签写法，浏览器会自动在第一个div闭合前补全<n-htag>的闭合标签，第二个div里的</n-htag>会被判定为无效标签直接忽略，最终生成的DOM结构和你的预期完全不符。

内容的提问来源于stack exchange，提问作者Jonas L