What tag in HTML should I use without special meaning, only to carry meta data?

Question

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.

Danais

Answer 1

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.

Custombuilt

That one looks nice, but when number of possible attributes is huge and each attribute is inserted with PHP/SMARTY (value and even existance of attribute condition(s) ), then this single tag can have a size of several "screens" – Bramblett

How is that worse than doing the same thing with multiple elements? – Custombuilt

I will accept this answer, because in fact, we can prepare all esential attribute/value pairs on the backend and just put single foreach to write attributes – Bramblett

Actually there are so called data blocks: html.spec.whatwg.org/multipage/scripting.html#data-block – Misteach

@PauliSudarshanTerho — There are, but they aren't the right tool for the job the question is asking about. – Custombuilt

Question is not asking for any specific job, but Javascript is mentioned in the question to handle the data, so a <script> would be appropriate instead of <div> that is used to structure a presentation. By default the <script> is hiding the data (but can be shown by style="display:block"). – Misteach

@PiotrMüller — The question is asking how to associate data with a block in an HTML document. A div is a generic block element. They are asking how to associate data with that div. They accepted this answer half a decade ago. – Custombuilt

Where do you see it say HTML document? It say HTML tag that <script> is also. It say: I know that I can move data-* attributes to div class="item" but I want a solution for clean code. For me it means like I know div but want a solution for clean code that I understand as pure Javascript. Maybe the answer was accepted because there was no other answers at that time. I have told about the problems of accept-functionality at meta. Often better answer is below. – Misteach

I have to say this answer is really a good answer, because it seems as who asked didn't know div can store data and this answer is a minimal answer or it asked for an appropriate tag. Very good answer, so you need not to be protective. Answer is very helpful and to use a so called data block as defined by W3C was of no need for them who accepted this answer. – Misteach

Answer 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)

Longrange

Nice solution with script+JSON for more complicated data structures – Bramblett