Question

I would like to insert a special element inside of a container div to store some information about an image that is located inside of the container. I know I can store the data in the container div data attributes itself or the image but I find it easier and cleaner when coming back later to projects to put them in their own DOM element. The data attributes are mainly for UI user actions like updating an element with jquery when a thumbnail is dragged into a droppable handle.

EXAMPLE:

<div class="container">
   <img class="thumbnail" src="/path/to/thumbnail" />
   <div data-imagefull="path/to/fullsize/image" data-imageid="179"></div>
</div>

In that example I would like to replace the div containing the data attr. with a different tag that is compliant with ie7 through to html5.

UPDATE :
Let me rephrase a bit. I like, and will continue to use the data attributes. I’ts the “div” tag alone that I would like to replace. There has to be a better tag than div since div is meant to display and I am not displaying anything. Just storing information.

Answer 1

You can use hidden attribute on your div tag:

<div class="container">
   <img class="thumbnail" src="/path/to/thumbnail" />
   <div data-imagefull="path/to/fullsize/image" data-imageid="179" hidden></div>
</div>

As stated in spec:

User agents should not render elements that have the hidden attribute specified.

hidden attribute is HTML5’s feature,so for supporting older browsers, you need this CSS also:

*[hidden] {
   display:none;
}