2

I would like to add some metadata to my list elements so they look something like this:

<ul>
    <li summary="A White Drink">Milk</li>
    <li summary="A tiny White football">Eggs</li>
    <li summary="A Cube of gooey sliminess">Butter</li>
</ul>

What property do I use? I don't want to make one up, and I don't want to use the title property because the metadata would then display in the browsers tooltip.

Web_Designer
  • 72,308
  • 93
  • 206
  • 262
  • P.S. it doesn't have to be search engine friendly. I just want to be able to grab that value for later use. – Web_Designer Aug 03 '11 at 05:19
  • Related: http://stackoverflow.com/questions/6222359/does-using-custom-data-attributes-produce-browser-compatibility-issues – Ray Toal Aug 03 '11 at 05:35

3 Answers3

3

Do you need to do this in the HTML proper? I think metadata is best stored in the DOM. If you are using jQuery, try .data(): http://api.jquery.com/jQuery.data/

The best solution for HTML proper is, IMHO, to use a custom data attribute. From the HTML5 spec: "Every HTML element may have any number of custom data attributes specified, with any value."

Custom data attributes are specified at http://www.w3.org/TR/html5/elements.html#custom-data-attribute.

Ray Toal
  • 86,166
  • 18
  • 182
  • 232
  • I'm not wanting to have to use javascript for this. Any other methods such as `alt` or `name`? – Web_Designer Aug 03 '11 at 05:24
  • 2
    Fair enough. Are you using HTML5? Try a [custom data attribute](http://www.w3.org/TR/html5/elements.html#custom-data-attribute). Won't validate under HTML < 5, though. – Ray Toal Aug 03 '11 at 05:30
  • Wow Thank you so much! I am using HTML5 :), and I am definitely going to use the custom data attribute. – Web_Designer Aug 03 '11 at 05:52
2

There is a specific attribute introduced in the HTML5 spec known as custom data attributes. These allow you to embed non-visible information related to the element. Here is the spec page that details it. Also, see John Resig's blog post discussing how to use them with jQuery (though you do not need to be using jQuery to use custom data attributes, you can retrieve the data quite easily from the DOM through the element.dataset property).

In the end, you dont really need to change your HTML much at all:

<ul>
    <li data-summary="A White Drink">Milk</li>
    <li data-summary="A tiny White football">Eggs</li>
    <li data-summary="A Cube of gooey sliminess">Butter</li>
</ul>
Moses
  • 9,033
  • 5
  • 44
  • 67
1

You can use the JQuery meta data... http://plugins.jquery.com/project/metadata

JQuery's meta data will let you make-up keys (such as your "summary") and values, and put them directly in the element.

Chains
  • 12,541
  • 8
  • 45
  • 62