Blogger :
Ajaxian Blog
All posts :
All posts by Ajaxian Blog
Category :
XML
Blogged date : 2008 Jul 14
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:
HTML:
-
-
class="user" data-name="John Resig" data-city="Boston"
-
data-lang="js" data-food="Bacon">
-
John says:
Hello, how are you?
-
-
Which you can get at via some simple code:
JAVASCRIPT:
-
-
var user = document.getElementsByTagName("li")[0];
-
var pos = 0, span = user.getElementsByTagName("span")[0];
-
-
var phrases = [
-
{name: "city", prefix: "I am from "},
-
{name: "food", prefix: "I like to eat "},
-
{name: "lang", prefix: "I like to program in "}
-
];
-
-
user.addEventListener( "click", function(){
-
var phrase = phrases[ pos++ ];
-
// Use the .dataset property
-
span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
-
-
// OR, to work with old browsers
-
//span.innerHTML = phrase.prefix + user.getAttribute("data-" + phrase.name );
-
}, false);
-
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?
Contents
ReBlogger Contents
Email TopXML