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?

And what is a meta tag doing inside a div, maybe you should start with the basics ? — adeneo, Oct 01 '13 at 11:00
You should use `data` attributes, however your method of using `eval()` of code stored in them is, frankly, horrific. — Rory McCrossan, Oct 01 '13 at 11:02
@adeneo: `meta` (and `link`) is [allowed](http://stackoverflow.com/a/18898363/1591669) in `body` if used for Microdata. — unor, Oct 02 '13 at 09:50

score 4 · Accepted Answer · edited May 23 '17 at 12:00

4

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

edited May 23 '17 at 12:00

Community

1
1

answered Oct 02 '13 at 10:08

unor

92,415
26
211
360

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 – Ali Gajani Jan 04 '14 at 22:33
1

@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. – unor Jan 05 '14 at 00:01
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". – Ali Gajani Jan 05 '14 at 00:02
@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. – unor Jan 05 '14 at 00:08
That's why search engines use Micro-data and not data-*. Right, thanks unor. – Ali Gajani Jan 05 '14 at 00:14

Microdata vs. the data attribute in modular HTML5

1 Answers1

Linked