i usually use data-*** to store some data.

<a href="#" data-address="some data">click</a>

i can get it in jquery using

alert($("a").data("address"));

it works fine. but i want to know is it the right way of doing and is there any patibility issues??

or does i need to use the rel ie:

<a href="#" rel="some data">click</a>

alert($("a").attr("rel"));

i updated a fiddle /

i usually use data-*** to store some data.

<a href="#" data-address="some data">click</a>

i can get it in jquery using

alert($("a").data("address"));

it works fine. but i want to know is it the right way of doing and is there any patibility issues??

or does i need to use the rel ie:

<a href="#" rel="some data">click</a>

alert($("a").attr("rel"));

i updated a fiddle http://jsfiddle/suhailvs/XYZQK/

• javascript
• jquery
• html

• What data do you need to store in there? Abusing rel is never the right solution. – Blender Commented Jul 17, 2013 at 5:30
• i want to store alots of html. so that i can use it in bootstrap model. – suhailvs Commented Jul 17, 2013 at 5:32
• Attributes aren't really good places for HTML. – Blender Commented Jul 17, 2013 at 5:33
• i updated a fiddle jsfiddle/suhailvs/XYZQK – suhailvs Commented Jul 17, 2013 at 5:41
• Why do you need to store all of this data in your anchor tag? – Blender Commented Jul 17, 2013 at 5:43

5 Answers 5

the rel attribute when referrering to an a tag is for search engines to determine the relationship between the document and the one it's linking to.

the data attribute can be used by developers to make custom attributes while storing data in it.

that being said data-*** is the correct way to store some data.

MDN HTML attribute reference

DON'T USE REL FOR CUSTOM DATA STORAGE

COMPATIBILITY CONCERNS

Since the data and rel(referrering to a tag) attributes are suppose to be ignored by browsers, you can use both, either/or. Although it's best practice to use the data tag to store 'data' .

RICH SEARCH RESULTS

if you want search engines to recongize certain links or elements as data describing your content, like page description, publish date, page image, so and so forth, you might want to read up on 'rich search result' and 'rich snippets' from google.

these link will start you out Rich search results or About rich snippets and structured data

If you want the data to stored temporarily (ie only for the duration of the page) then using the .data() api is the right way

Here's an article about why you should not use rel, and what you could try if you're not sure about using data-.

http://www.sitepoint./rel-not-a-custom-attribute/

Bootstrap already makes heavy use of data-, no reason not to take it even further.

It is correct to store data with custom data attributes which starts with "data-".

It meets HTML5 specification.

See the following link.

http://www.w3/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

You're abusing data- attributes, so for your use case, neither of them are correct (rel never is).

I would either change the structure of the HTML to acmodate the extra information (i.e. use other tags) or just store the content in a JavaScript object to begin with. Cramming it all into a single anchor tag isn't a good idea.