Are empty HTML5 data attributes valid?

html custom-data-attribute html5-data
Adam picture Adam · Mar 15, 2012 · Viewed 31.9k times · Source

I'd like to write a simple jQuery plugin that displays inline modals under specified elements. My idea is for the script to auto-init based on data attributes specified on elements.

A very basic example:

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

I'm just wondering if data-modal-target in the above example is valid, or does it have to be data-modal-target="true"? I don't care about anything crappier than IE9 etc, my only requirement is that it be valid HTML5.

Answer

Lloyd picture Lloyd · Mar 15, 2012

Yes, perfectly valid. In your case, data-modal-target would represent a boolean attribute:

2.4.2 Boolean attributes

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Related questions

How to get the data-id attribute?

I'm using the jQuery quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice. How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for …

Read More
Selecting element by data attribute

Is there an easy and straight-forward method to select elements based on their data attribute? For example, select all anchors that has data attribute named customerID which has value of 22. I am kind of hesitant to use rel or other …

Read More
How to set data attributes in HTML elements

I have a div with an attribute data-myval = "10". I want to update its value; wouldn't it change if I use div.data('myval',20)? Do I need to use div.attr('data-myval','20') only? Am I getting confused between HTML5 …

Read More