在HTML中，我应该使用什么标签来承载元数据而没有特殊意义？

Question

是否有一些无意义的HTML标签来携带额外的元数据，例如JavaScript特定块/区域的属性？例如：

<div class="item">
   <meaninglesselement data-id="123">
   <meaninglesselement data-type="sometype">
   <meaninglesselement data-validate="true">

   ...
</div>

我知道我可以将 "data-*" 属性移动到 "div class="item"" 中，但我想要一个干净的代码解决方案，即使有很多参数也是如此。

- Piotr Müller

Answer 1

如果是整个文档的元数据对访客或机器人有用，应该使用meta元素。您只能使用定义的或注册的name值（但您可以在维基中注册新值）。

对于仅需要用于脚本等的元数据，您可以在现有元素上使用data-*属性（例如body），或者您可以使用script元素：

script元素允许作者在其文档中包含动态脚本和数据块。该元素不代表用户的内容。

[...]

当用于包含数据块（而不是脚本）时，数据必须内联嵌入，必须使用type属性给出数据格式，不能指定src属性，并且script元素的内容必须符合所使用格式定义的要求。

您可以将此元素放置在head或文档正文中，其中也可以使用短语内容（如span）。

这里有一个关于将其用作数据块（而不是脚本）的信息性示例：

 <script type="text/x-game-map">
 ........U.........e
 o............A....e
 .....A.....AAA....e
 .A..AAA...AAAAA...e
 </script>

所以您可以使用HTML或JSON或任何您需要的格式。 如果您想使用HTML，它可能会像这样：

<div class="item">
  <script type="text/html">
    <div data-id="123"></div>
    <div data-foo="bar"></div>
    <div>foobar</div>
  </script>
</div>

***（我不确定它是否必须是一个“完整的”符合HTML规范的文档，或者是否允许像我的例子中那样的“片段”）

- unor

---

使用脚本+JSON的好方法，适用于更复杂的数据结构。 - Piotr Müller

Answer 2

数据适用于 div，属性应该在 div 上。如果您想每行格式化代码一个项目，则可以使用此方法。

<div class="item"
     data-id="123"
     data-type="sometype"
     data-validate="true">

没有为存储文档主体中的元数据而设计的元素。

- Quentin

---

那个看起来不错，但当可能的属性数量很大且每个属性都是通过PHP/SMARTY插入的（值甚至存在属性条件），那么这个单一标签的大小就可以达到好几个“屏幕”的大小。 - Piotr Müller

这与使用多个元素做同样的事情相比有何不同之处？ - Quentin

我会接受这个答案，因为实际上我们可以在后端准备所有必要的属性/值对，只需放置单个foreach来编写属性。 - Piotr Müller

实际上有所谓的数据块：https://html.spec.whatwg.org/multipage/scripting.html#data-block - user985399

问题并没有要求任何特定的工作，但是问题中提到了使用Javascript来处理数据，因此使用<script>标签而不是用于结构化演示的<div>标签会更合适。默认情况下，<script>标签会隐藏数据（但可以通过style="display:block"显示）。 - user985399