What are data- attributes good for?

Answer 1

They are typically used to store some form of data for a particular tag that the can be used with JS. Bootstrap uses them a lot.

For instance I built a site that uses a data-linklabel="Month Year Newsletter" for a fallback link name for browsers that don't support loading a pdf natively and after trying to force it to load with pdf.js. If both tries fail then a download link with the value for that particular tags dat-linklabel attribute is created instead.

Here's snippet:

<div class="panel-body">
<div id="sep2016" data-linklabel="September 2016 Newsletter"></div>
<!-- September 2016 Newsletter PDF goes here. -->
</div>

Where the comment is, is where the pdf would dynamically be built and loaded if the browser supported it and if not then I would try to force it and if that failed then a link would be created using the value of the data-linklabel. This is all done with Javascript.