What is data dash attribute and how it is used?


Prior to HTML5,  there was few option to store data associated with DOM i.e. either in class attribute or rel attribute. Fortunately, HTML5 introduces custom data attributes. You can use any lowercase name prefixed with data- to create attribute and store any arbitrary data in it corresponding to any DOM.

For example:

<div id="listOfData" data-length="180" data-line-size="5" data-info="This is Demo Version"></div>

The best part about the data attribute is that we can also use it to provide JSON data as shown below:

<div id="listOfData" data-length="180" data-line-size="5" data-info='{"company":"Modern Pathshala"}'></div>

Share this thread


comments powered by Disqus


Social Media