Microdata vs. the data attribute in modular HTML5

Question

I am developing in PHP and am using some html wrappers (styled divs) around dynamic/variable content. In other words, I'm using a standard template multiple times and filling it with different HTML, creating similar looking "modules". I also am using jQuery to dynamically update the content based on user interaction. Each module requires some extra information to tell jQuery how to process the user interaction. I have been waffling between using microdata or data attributes to accomplish this. Examples:

<script>
  $(document).ready(function() {
    eval($(".wrapper").children("meta[itemprop=userDoesSomething]").attr("content"));
  });
</script?
<div itemscope class="wrapper" id="module1">
  <meta itemprop="userDoesSomething" content="alert('Microdata is better!');">
  Module-specific content
</div>

or

<script>
  $(document).ready(function() {
    eval($(".wrapper").data("userDoesSomething"));
  });
</script>
<div class="wrapper" id="module1" data-userDoesSomething="alert('Data attributes are better!');">
  Module-specific content
</div>

Both accomplish the same thing, but with microdata, I don't have to insert an attribute into the wrapper's tag. I can just include the "data" inside the wrapper using a meta tag, keeping the wrapper template intact. I also realize the data attribute is probably more appropriate as microdata is really meant for typed data, but in this case, it is more convenient. Any thoughts on which is better in the long run?

Isopropyl

Why would you use eval() there ? – Guise

And what is a meta tag doing inside a div, maybe you should start with the basics ? – Guise

You should use data attributes, however your method of using eval() of code stored in them is, frankly, horrific. – Knowles

@adeneo: meta (and link) is allowed in body if used for Microdata. – Septemberseptembrist

Answer 1

Both ways are possible.

Microdata is not only for "typed data". You could define your own Microdata vocabulary, if you like. But you could also use a "local" one (emphasis mine):

The examples in the previous section show how information could be marked up on a page that doesn't expect its microdata to be re-used. Microdata is most useful, though, when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup.

However, if you want to use some other Microdata vocabulary (e.g. schema.org) on your pages in the future, you might get some conflicts with your "local" Microdata. So I’d not use Microdata if it doesn’t offer you benefits over data-* attributes.

Regarding the meta element: You can get something similar with data-* attributes, too. In HTML5, the script element can be used for "data blocks". So you could use something like:

<div class="wrapper" id="module1">
  <script type="text/plain" data-userDoesSomething="alert('Data attributes are better!');">
  </script>
  Module-specific content
</div>

<div class="wrapper" id="module1">
  <script type="text/plain" data-userDoesSomething>
    alert('Data attributes are better!');
  </script>
  Module-specific content
</div>

<!-- etc. -->

Instead of text/plain, you could use whatever suits your needs (JSON, HTML, …).

Septemberseptembrist

How are data-* attributes different from microdata? And are you saying that you can create your own Microdata standard? I don't get it. Explain – Dinge

@AliGajani: Anyone can create Microdata vocabularies (not standards), just like someone created the schema.org vocabulary. And Microdata also allows for "local" vocabularies which don’t need to be published in the first place. A local Microdata vocabulary and the use of data-* attributes are similar, as both are not indended to be (re)used by others. However, the use of a "real" (published) vocabulary is typically intended to be used by others, too. – Septemberseptembrist

I thought the data-* attribute was used to store whereas Micro-data was used to define, am I missing the point here. I haven't seen people use data-* for semantic purposes, its usually like data-dismiss="modal". – Dinge

@AliGajani: You (= the webpage author) can do whatever you want with data-*. The point is: the content is "private" to the page. No-one else is intended to make use of it. – Septemberseptembrist

That's why search engines use Micro-data and not data-*. Right, thanks unor. – Dinge