Is there any meainingless HTML tag to carry additional meta data, for example attributes for JavaScript for specified block/area? like:

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

   ...
</div>

I know that I can move data-* attributes to div class="item" but I want a solution for clean code, even if there will be a lot of parameters.

Is there any meainingless HTML tag to carry additional meta data, for example attributes for JavaScript for specified block/area? like:

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

   ...
</div>

I know that I can move data-* attributes to div class="item" but I want a solution for clean code, even if there will be a lot of parameters.

• javascript
• html
• metadata

2 Answers 2

If it is meta data for the whole document that might be useful for visitors or bots, you should use the meta element. You may only use defined or registered name values (but you could register new ones in the wiki).

For meta data that is only needed for your scripts etc., you may use data-* attributes on existing elements (e.g. body) or you may use the script element:

The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.

[…]

When used to include data blocks (as opposed to scripts), the data must be embedded inline, the format of the data must be given using the type attribute, the src attribute must not be specified, and the contents of the script element must conform to the requirements defined for the format used.

You can place this element in the head or in the document body where phrasing content (like span) can be used, too.

There is an informative example for the use as data block (instead of script):

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

So you could use HTML or JSON or whatever format you need.

If you'd want to use HTML, it may (***) look like:

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

*** (I'm not sure if it has to be a "full" conforming HTML document or if "snippets", like in my example, are allowed, too)

The data applies to the div, the attributes should be on the div. If you want to format your code with one item per line, then you can.

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

There are no elements designed for storing meta data that go in the document body.