title: Best way to add metadata to HTML elements
body: <p>I'm trying to put together a way of marking up various components in HTML that get parsed by a jQuery script and created when the page loads.</p>
  
  <p>For example, at the moment I can put the following in to my page..</p>
  
  <pre><code>&lt;a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth"&gt;This is a button&lt;/a&gt;
  </code></pre>
  
  <p>When the jQuery script finds it it'll inject the html necessary to create a button with an icon on it and all the necessary events etc.</p>
  
  <p>However, this is messy and requires a lot of long class names. I'd much rather do something like this...</p>
  
  <pre><code>&lt;a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>It's not that much shorter but neater in my opinion and requires less parsing. Trouble is, I've done a little bit of research into "expandos" and I'm fairly sure some browsers won't like it and it won't validate.</p>
  
  <p>Anybody got any better suggestions?</p>