jquery - 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?

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, …).