Are empty HTML data attributes valid?

Understanding the behavior of data attributes

Comparing boolean & data attributes

It's pivotal to comprehend that empty data-* attributes and boolean attributes (checked, disabled, etc.) don't operate under the same rules.

For custom data attributes:

• An empty data-* attribute actually possesses an empty string, not a true or false.
• To check if a data attribute exists, use element.hasAttribute('data-myattr') or element.dataset.myattr !== undefined.

Empty data-* and jQuery

jQuery plugins can use empty data attributes to automatically initiate plugins, like modals or lightboxes that do not require additional inputs:

<!-- I'm empty but ready for the modal-action. Bring it on! -->
<div data-modal></div>


Browser compatibility is typically not an issue, unless you're dealing with versions of Internet Explorer older than 9.

Digging deeper: Practical applications & validation

Verifying your code

If you're ever unsure, use validation tools like the W3C Validator (https://validator.w3.org/nu/#textarea) to ensure your data-* attributes are prim and proper.

CSS and JavaScript integration

Empty data attributes can be lassoed in by CSS for exclusive styling:

/* You HAVE to wear blue if your name is data-toggle! */
button[data-toggle] {
  background-color: blue;
}


And by JavaScript to alter behavior based on the attribute presence:

// Ready to run? Only if data-toggle is here!
if (document.querySelector('button').hasAttribute('data-toggle')) {
  // Let the fun begin...
}


Potential pitfalls

Although useful, data attributes can be a muddle if overused sans explicit documentation, or left as lone wolves without corresponding functionality. To fend off these issues, ensure regular code reviews and affectionate commenting 😉.