是否存在非可视HTML标记？

Question

是否存在HTML标记仅用于名义上将其子组合在一起的目的？ e.g：

<group id="example_template">
  <h3>Example</h3>
  <div>...</div>
</group>

理想情况下，上面的<group>标记可以免于css，或者不会影响其子项，或者至少没有默认的视觉副作用。我们的想法是找到最简洁的方法来识别一组连续的节点，而不会引入语义误导或垃圾标记。

示例用例适用于JavaScript HTML模板系统。在渲染模板并将其添加到DOM之后，我想跟踪这个元素组被渲染在一起的事实，以防该组稍后被替换。

也可以打开其他解决方案。

Answer 1

没有CSS的div元素不会产生页面上可见的任何内容。这意味着除非您添加CSS作为文件或内联修改DIV，否则它实际上是不可见的。

更新：如上所述，DIV用于阻止内容，SPAN用于内联内容

Answer 2

否，是。 令人遗憾的是，即使是div元素也将具有视觉上的含义，例如在计算大小时，并且在浏览器中将其样式设置为“ dispaly：block”。

但是，有一个CSS属性叫做display：contents; 可能会帮到您。 https://css-tricks.com/get-ready-for-display-contents/

在与您相关的浏览器中检查对此CSS的支持。

Answer 3

在CSS3 / HTML5中，只要您在CSS中定义其属性，就可以创建任何类型的块元素。

例如，这是我称为“ thingy”的东西；

thingy {
    display: block;
    background-color: blue;
    color: white;
}

<thingy>
    Here is a random block I created
</thingy>

即使没有在CSS中定义它，它也似乎可以正常工作。它是从新的通用元素名称（例如<section>（link）派生而来的，您可以将learn more about here移到底部，但我发现它也适用于各种随机名称，但最好还是遵循惯例。真的取决于你。他们最终是光荣的<div>。

我从来没有专业地使用过它们，但是我曾在个人项目中使用过-因此，我不确定非常规元素名称如何与屏幕阅读器等配合使用。