title: How to store arbitrary data for some HTML tags
body: <p>I'm making a page which has some interaction provided by javascript. Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. Obviously in this example, I need each link to store an extra bit of information: the id of the article. The way I've been handling it in case was to put that information in the href link this:</p>
  
  <pre><code>&lt;a class="article" href="#5"&gt;
  </code></pre>
  
  <p>I then use jQuery to find the a.article elements and attach the appropriate event handler. <em>(don't get too hung up on the usability or semantics here, it's just an example)</em></p>
  
  <p>Anyway, this method works, but it <a href="https://stackoverflow.com/questions/114342/what-are-code-smells-what-is-the-best-way-to-correct-them">smells</a> a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)</p>
  
  <p>The immediately obvious answer was to use attributes on the element. I mean, that's what they're for, right? (Kind of).</p>
  
  <pre><code>&lt;a articleid="5" href="link/for/non-js-users.html"&gt;
  </code></pre>
  
  <p>In <a href="https://stackoverflow.com/questions/427262/">my recent question</a> I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable. A common response was to put the data into the <code>class</code> attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. Yes it's technically valid, but it's not a great solution.</p>
  
  <p>Another method I'd used in the past was to actually generate some JS and insert it into the page in a <code>&lt;script&gt;</code> tag, creating a struct which would associate with the object.</p>
  
  <pre><code>var myData = {
      link0 : {
          articleId : 5,
          target : '#showMessage'
          // etc...
      },
      link1 : {
          articleId : 13
      }
  };
  
  &lt;a href="..." id="link0"&gt;
  </code></pre>
  
  <p>But this can be a real pain in butt to maintain and is generally just very messy.</p>
  
  <p>So, to get to the question, <strong>how do you store arbitrary pieces of information for HTML tags</strong>?</p>