73

I have seen tags like this in HTML. What are these attributes?

This is NOT a duplicate of the data-* question.

Edit: I am looking for these two specific attributes, not data-* in general, nor data-required, as Google suggests. If you search the web, you can find these attributes are used in many places. I guess this is some like of dependency management software? 

<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

<script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
<script data-require="ui-bootstrap@0.5.0" data-semver="0.5.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
Shannon Dillman
  • 3
  • 4
J-16 SDiZ
  • 26,473
  • 4
  • 65
  • 84
  • @cimmanon, I am looking for this specific attribute.. Is there any pre-processor / library / builder using this attrubte? – J-16 SDiZ Feb 24 '14 at 03:51
  • 3
    Voted to reopen. I would be interested in further answers to this question explaining the specific `data-require` attribute as used by many ng (angularjs) modules. The generic html5 explanations do not answer this question adequately imo. – grenade Mar 26 '14 at 10:54
  • 3
    For what its worth. This question was wrongly labelled as duplicate by cimmanon @felix-kling jukka-k-korpela rink-attendant-6 and greg – AardVark71 May 20 '14 at 14:30
  • Great answer from @user1769113 This is the only reference I could find that data-require and data-semver are actually specific implementations by Plunker of the html5 custom data-* specification – AardVark71 May 20 '14 at 14:31

2 Answers2

94

I was curious about this as well. These appear to be data- attributes that are created by plunker when including external libraries in its editor. Since plunker is used heavily throughout the development community that is probably why you see it appearing a lot.

By themselves they don't do anything special, unless a library or service decides to use them.

The 'data-semver' attribute appears to be an implementation of Semantic Versioning

To the best of my knowledge no libraries actually use them for any sort of dependency checking/loading.

Pavlo
  • 43,301
  • 14
  • 77
  • 113
TimS
  • 1,113
  • 7
  • 10
-5

The data- attribute is new in HTML5 and can be used to store arbitrary (text) data. The part after the '-' can be chosen by the author of the document. So you could have an attribute called myAge on the image of a person: <img src="imageOfMe.jpg" data-myAge="42" />. It is mostly used to save data for javascript applications.

t.animal
  • 3,012
  • 1
  • 24
  • 25
  • 3
    I am looking for this specific attribute.. Is there any pre-processor / library / builder using this attribute? – J-16 SDiZ Feb 24 '14 at 03:52