title: Injecting HTML5 data attributes vs. Injecting javascript data structure
body: <p>I am curious as to which of the following is better practice (and why): </p>
  
  <ol>
  <li><p>Injecting data as HTML 5 data attributes:</p>
  
  <pre><code>&lt;div class="someDiv" data-for-popup="someData"&gt;&lt;/div&gt;
  </code></pre></li>
  <li><p>Injecting a <code>&lt;script&gt;</code> into the file with some data structure </p>
  
  <pre><code>&lt;script&gt;
      var myMap = new Map();
      myMap.set('someKey','someValue');
  &lt;/script&gt;
  </code></pre></li>
  </ol>
  
  <p>In both cases, I would be using javascript/jQuery to look up the value, but which is the better solution?</p>
  
  <p>A little background: I am creating a static page (no communication back and forth with the server besides servicing the page) so I can't use AJAX or any other server communication to service the data. The data being injected is used for a popup that is displayed on the page when "more information" is requested for a certain page object. In other words, I need the data to be present somewhere on the page, and I'm looking for the best avenue to do so, and I am also curious why that would be the best option.</p>