what are data-* HTML attributes?

by

data-* attributes are custom HTML attributes.

Basically, there are standard HTML attributes like style, src, width, height, class… and these have a special meaning to browsers and are ‘reserved’.

However, custom attributes have no special meaning generally and are only special to the owner’s application. They can be used to simplify an application’s logic.

Using data- before your attribute name ensures that future standard attributes will not use your current attribute. For example, imagine today you are using a sound attribute but then the HTML standard adds a sound attribute meaning something other than what you meant. Had you used data-sound, you would have been fine because there would be no conflict. The specification says no future standard browser attributes will start with data-.

See jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity for some useful info on why we use data-* attributes.

Also, see MDN docs for some useful information.

More Related Contents:

  1. Can I use all the HTML tags inside a script tag of type javascript [closed]
  2. When we using alert vs popup div tag? [closed]
  3. javascript runs twice [closed]
  4. How to change the href attribute for a hyperlink using jQuery
  5. jQuery Get Selected Option From Dropdown
  6. How to check file MIME type with javascript before upload?
  7. Browser detection versus feature detection
  8. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  9. Streaming a video file to an html5 video player with Node.js so that the video controls continue to work?
  10. How to select multiple files with ?
  11. How can I disable an in a based on its value in JavaScript?
  12. keyCode on android is always 229
  13. How to find a parent with a known class in jQuery?
  14. JavaScript: Extract video frames reliably
  15. SecurityError: The operation is insecure – window.history.pushState()
  16. How to prevent submitting the HTML form’s input field value if it empty
  17. How to append timestamp to the javascript file in tag url to avoid caching
  18. CSS delivery optimization: How to defer css loading?
  19. how to move a div with arrow keys
  20. Accessing localStorage from a webWorker
  21. How can I find a user’s country using HTML5 geolocation?
  22. What is viewport in HTML.
  23. Bootstrap Dropdown with Hover
  24. How to get a number value from an input field?
  25. Check if file has changed using HTML5 File API
  26. How to host material icons offline?
  27. Resize external website content to fit iFrame width
  28. Keep tabbing within modal pane only
  29. No sound on iOS 6 Web Audio API
  30. find words in html page with javascript

Leave a Comment