About attributes data-*

HTML5 was created with the extensibility of data that needs to be associated with a given element but does not necessarily have a definite meaning.

data-* faults, commonly used in conjunction with the framework Bootstrap , allow you to store extra information in standard and semantic HTML elements, without the needs of hacks like classList , nonstandard attributes, extra properties in the DOM, or the obsolete setUserData method.

See an example below of use in the <article> tag:

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

See that extra attributes have been created for the element in question and added multiple values to it, without the need to do anything strange and / or non-semantic.

Recommended and interesting reading on the subject in this other response .

Data Toggle

data-toggle is an HTML5 data attribute that automatically links the element to the corresponding type .

For example, if you have a dropdown , such as in this other answer :

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>

You can see that using data-toggle is reaffirmed, that the element in question is a dropdown .

Some other elements that are commonly used :

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

data-toggle , in these examples, declare that the element, respectively, is a modal , href="http://getbootstrap.com/javascript/#collapse"> accordion , dropdown , and tab structure .

Data Target

The data-target usually used in Bootstrap is next to modals, but not only. By its own name, it is understood that it will reference your target, . This attribute must contain a CSS selector that points to the HTML element that will participate in the event.

See an example using a modal:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

When you click the button (and if everything is correct), it will open a modal box with the id that is equal to myModal . Without much effort you will be using through data-target plus one of the pre-developed JavaScript components.

Addendum

You can see the difference when comparing the above code, which will open a modal with id myModal , using the data-* attributes and having to do the manual encoding, see below:

• Using data attributes - *

<button data-toggle="modal" data-target="#myModal">
    Novo
</button>

• Without using the data attributes - *

<button id="btnModal">
    Novo
</button>

And then in the script tag, I would have to code something similar to this to open the modal:

$("#btnModal").click(function(){
    $("#myModal").modal();
});

We have questions answered on this subject in our Big Brother SO, more specifically here and here . You also have MDN this article, from which I took most of the information.

Note on date attributes - *:

The data-* attribute, as stated above, is most commonly used together with the framework Bootstrap . However, you can use your functions through JavaScript only:

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Or through this example:

var button = document.getElementById('your-button-id');

var cmd = button.getAttribute('data-cmd');
var id = button.getAttribute('data-id');

button.setAttribute('data-cmd', yourNewCmd);
button.setAttribute('data-id', yourNewId);

But , as it was said by W3C :

  

Custom data attributes are intended to store private custom data for the page or application, for which there are no more attributes or appropriate elements .

That said, you can understand that the data-* attribute is intended to store small amounts of invisible data that is not crucial to the user and may become visible later . If the data is crucial to the user, it should be presented visibly and more easily. Remembering also that semantically speaking, there are more appropriate elements for cases like these.

And while it's possible to manipulate data with JavaScript, is not recommended .

As well explained by fellow UzumakiArtanis, data-* attributes are created to add more element-related information, and this is widely used in many libraries and plugins .

In the case of data-target and data-toggle , this also happens. Most likely you're talking about the plugin for Bootstrap modal dialogs. This plugin is what defines the meaning of these attributes, not the HTML5 specification.

The bootstrap defined that the plugin Modal will find all data-toggle="modal" and work with this element to be able to open the dialog window, which is linked to it by the% p>

Fonts :

• Modal Bootstrap
• Get Bootstrap