Question

In writing javascript based apps, I’m often finding that I want to include information with an element that is not really appropriate as an id or a class, and I am wondering how to best include that structurally/semantically with html. Sometimes I want to contain an association with another element that’s not in an <a> so href is not appropriate. I have been appending a prefix like ‘tooltip_’ or ‘button_’ and then using string manipulation to convert it, but that’s a bit clunky.

So I’m wondering if any attributes are appropriate to use for alternate types of data.

Also curious because I see that with the jQuery plugin qTip, you can set an attribute to pull the tip description from, but if I’m going to have <p> <a> <img> <h2> tags all with tips and ideally set up the same way.. what attribute could I use in that situation?

Answer 1

If the information is primarily for the JavaScript to interact with, such as storing extra data, attributes prefixed with data- are the way to go. The jQuery library supports this through it’s Data methods.

For user content, it depends on what the content is, and also on how it is supposed to be used.

For images, the alt attribute is specifically for holding a textual alternative to the content in the image. A good rule of thumb for this is that all words (that matter) in the image should be in the alt attribute, as well as a description of what the image is depicting. To test yourself on this, turn images off (a number of browser extensions can do this) and read through your page. If it still all makes sense when the alt text replaces the images and you have not lost any information, you are good.

The title attribute is for holding information that would be appropriate for a tooltip.

longdesc and figcaption are some other attributes designed for this purpose as well. I would highly recommend a read through the html5 spec if you really want to learn when to use what.