4

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.

Piotr Müller
  • 5,323
  • 5
  • 55
  • 82

2 Answers2

13

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)

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
9

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.

JJJ
  • 32,902
  • 20
  • 89
  • 102
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 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" – Piotr Müller Jan 20 '13 at 19:59
  • 1
    How is that worse than doing the same thing with multiple elements? – Quentin Jan 20 '13 at 20:04
  • 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 – Piotr Müller Jan 20 '13 at 20:07
  • Actually there are so called **data blocks**: https://html.spec.whatwg.org/multipage/scripting.html#data-block –  Aug 04 '19 at 09:21
  • @PauliSudarshanTerho — There *are*, but they aren't the right tool for the job the question is asking about. – Quentin Aug 04 '19 at 09:30
  • Question is not asking for any specific job, but Javascript is mentioned in the question to handle the data, so a ` –  Aug 04 '19 at 10:29
  • @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. – Quentin Aug 04 '19 at 10:31
  • Where do you see it say *HTML document*? It say HTML tag that ` –  Aug 04 '19 at 11:51
  • 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. –  Aug 04 '19 at 12:07