Question

I want to be able to embed certain information into HTML elements (images) without breaking valid HTML markup. Would the following be valid HTML?

<img src="..." class="isearcher:tags(paris+hilton,gary+suneese)" >

The hope is to latter extract it with a regex in javascript/jQuery.

Answer 1

The format is slightly different, but there’s a plugin specifically for this, the metadata plugin. The format looks looks like this (for an array, which seems to be the most useful here…just think JSON):

<img src="..." class="isearcher {tags : ['paris hilton', 'gary suneese']}" >

Here’s an example of using the plugin to get the data:

var data = $("img").metadata();
data.tags        // this is an array with both tags
data.tags.length // 2
data.tags[0]     // "paris hilton"

You can try it out here

If you’re using HTML5, take a look at data attributes, they work now but are valid (a concern you listed) in HTML5 used for just thing kind of thing. If you want to store complex things in there, e.g. arrays, objects, etc…the meta data plugin covers those as well.