Adding data to XHTML tags.

Question

My website is XHTML 1.1, and I had added 'rel' attributes to the <li> and <div> tags on my page, to store data for a jQuery script on the page. When validating my page, I get the error: "there is no attribute 'rel'". So, what is the best way to store arbitrary data in HTML tags?

I am working on a comments page for my website. When a comment is entered, it is POSTed via AJAX, which returns JSON of all comments. I then look at the 'rel' values to see which comments are already on the page, and only add the new ones.

The jQuery code works fine, it's just the 'rel' attributes don't validate.

Answer 1

Since rel isn't valid attribute for li, you should use id instead attribute instead and it is valid there too.

Answer 2

While it's not XHTML spec, you could use the data-* attributes that are included in HTML5's spec.

http://html5doctor.com/html5-custom-data-attributes/

If you want to remain fully XHTML 1.1 compliant, you'll need to create a schema and include its namespace in the html element, where the schema defines the attributes you want to use, and the elements to which they apply.

http://stackoverflow.com/questions/434450/extending-xhtml

Answer 3

I think it goes against the spirit of XHTML to store "arbitrary" data in tags. You should use the jQuery.data method instead.

Answer 4

JQuery seems to like classes as a way to store state for different html elements.

One example would be how jQuery UI Tabs use the ui-state-active class to define which tab is currently selected.

One benefit of this method is how easy you can select elements by the different states you are looking for.

As a reminder, you can add (virtually) as many classes to an element as you want and just separate them by spaces.

<li class="client_data already_added red_text etc">Bob</li>