sorted by: recent | see : popular

Content Tagged with HTML + html5

John Resig goes into more detail on the HTML 5 data- elements that gives developers a valid place to store metadata:

This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:

PLAIN TEXT

HTML:

1.  
2. <li class="user" data-name="John Resig" data-city="Boston"
3.      data-lang="js" data-food="Bacon">
4.   <b>John says:</b> <span>Hello, how are you?</span>
5. </li>
6.  

Which you can get at via some simple code:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var user = document.getElementsByTagName("li")[0];
3. var pos = 0, span = user.getElementsByTagName("span")[0];
4.  
5. var phrases = [
6.   {name: "city", prefix: "I am from "},
7.   {name: "food", prefix: "I like to eat "},
8.   {name: "lang", prefix: "I like to program in "}
9. ];
10.  
11. user.addEventListener( "click", function(){
12.   var phrase = phrases[ pos++ ];
13.   // Use the .dataset property
14.   span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
15.  
16.   // OR, to work with old browsers
17.   //span.innerHTML = phrase.prefix + user.getAttribute("data-" + phrase.name );
18. }, false);
19.  

Using data- is a very practical solution, but people in the comments of John's post would much prefer a more "pure" solution. There are the "Just use XML namspaces" crowd, and the "define the data outside of the page" group, and the "use an XML island" folk. What are you?