Best Way To Add Metadata To Html Elements

I'm trying to put together a way of marking up various components in HTML that get parsed by a jQuery script and created when the page loads. For example, at the moment I can put t

Solution 1:

Go ahead and use an attribute for this, but use a data- prefix on it. Attributes with the prefix data- are explicitly allowed on all elements as of HTML5. Example:

<ahref="#"class="Theme-Button"data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

It works today in all browsers, and because it's now specified behavior, it's future-proofed.

Solution 2:

Use jquery's ".data" property. This is very handy and many people don't know about it.

See this link for more information.

Solution 3:

Look at the jQuery .data() function.

Solution 4:

The Prototype library supports:

element.store("key","value")

and

element.retrieve("key","value").

Simple. Nice. Effective.

Solution 5:

One could also use classes for this sort of thing.

<ahref="#"class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

You will have to pre define a lot of classes, but it doesn't feel too much different than handling each key value pair that you have to create.