Why should I prepend my custom attributes with “data-“?

by

There are several benefit for keeping custom attributes prefixed with data-*.

  1. It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the required attribute on input elements is known to have had some clashes on some popular websites in the past)

  2. There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.

  3. They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.

More Related Contents:

  1. Difference between id and name attributes in HTML
  2. Is there a limit to the length of HTML attributes?
  3. HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*)
  4. What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
  5. Are empty HTML5 data attributes valid?
  6. How to remove “onclick” with JQuery?
  7. HTML5 iFrame Seamless Attribute
  8. What’s the purpose of the HTML “nonce” attribute for script and style elements?
  9. Are empty HTML data attributes valid?
  10. Blank Space To Right Of Webpage? (Hidden min-width?) [closed]
  11. How to ignore HTML element from tabindex?
  12. How to Copy Contents of One Canvas to Another Canvas Locally
  13. autocomplete =’off’ is not working when the input type is password and make the input field above it to enable autocomplete
  14. How to access a mobile’s camera from a web app?
  15. Scroll particular DIV contents with browser’s main scrollbar
  16. Is it correct to use alt tag for an anchor link?
  17. CSS horizontal centering of a fixed div?
  18. Giving a border to an HTML table row,
  19. Can tags have any type of tags inside them?
  20. In HTML5, can the and tags appear outside of the tag?
  21. Font Awesome icons are not working, I have included all required files [closed]
  22. Tooltip with HTML content without JavaScript
  23. Change color of one character in a text box HTML/CSS [duplicate]
  24. What does “for” attribute do in an HTML tag?
  25. Blank iFrame in IE
  26. All html canvas shapes are given the color of the last object added
  27. IE7 CSS Scrolling Div Bug
  28. Image placeholder fallback for HTML5 Video
  29. Is there a way to get the parent URL from an Iframe’s content?
  30. HTML Form File Uploads doesn’t upload file

Leave a Comment