HTML 5: The data attribute you must know

HTML 5's Data attribute allows you to customize the data for the element. This article is to think about how to use the Data property better.

**介绍**

Before HTML 5, we had to rely on the class and rel attributes to store the data fragments that need to be used on the website. This approach sometimes creates a conflict between the appearance and usability of the website. The existence of HTML 5 Data attributes can meet the needs.

As the website itself has more and more data, some specific elements have begun to save data. For example, to create an audio application, the code is as follows:

<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" />
</audio>

The above code is completely acceptable, but sometimes we need to save more information about the audio itself, such as duration, speed and author, rather than the audio source. This requires the Data property, examples are as follows:

<audio controls="controls">
  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>

Through these custom Data attributes, you can perform search, filtering, and grouping actions on audio.

How to use the Data property

The name of the custom Data attribute must start with data-, and there must be at least one character that conforms to the HTML specification after the hyphen. (HTML naming convention.)

The W3C document explains the Data property as follows:

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

This also means that we can only use data data within the application, and should not present it to the user. More importantly, you can customize any number of Data attributes for the elements and assign any meaningful values.

When do I need to use the Data property?

Through the above description, you already know how to use the Data property. But in order to better understand this property, let's look at a few more examples.

There are already good examples of using data attributes in the Webdesign section of Tuts +. One of the tuts, the Data attribute is applied to the style, so that the menu has a "bubble" notification effect. In this example, the data attribute is used for values that only want bubble notifications.

<a href="#" class="pink" data-bubble="2">Profile</a>

Another example: quick tip, how the Data attribute is used as prompt information in the prompt box

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

When shouldn't the Data property be used?

When the element has established or more appropriate attributes, the Data attribute should not be used. Using data in the following example is inappropriate:

<span data-time="20:00">8pm<span>

Because in an element representing time, there is already a datetime attribute:

<time datetime="20:00">8pm</time>

At the same time, the Data attribute should not be used as an alternative metadata or microformat. Microformats are primarily designed for humans to introduce contextual information. For example, if you have a Vcard about the contact information of an individual or an organization, you should assign a class attribute called vcard to let the machine understand that it contains some contact information.

The code using the micro format is as follows:

<div class="vcard">
    <span class="fn " >Aaron Lumsden</span>
</div>

Instead, the code that uses the Data property is as follows:

<div class="vcard">
    <span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>

Learn more about microformats: Mircorformats.org.

Use the Data property in CSS

Now that the Data attribute is implemented in the HTML markup, this attribute can also be used in CSS. Note: Although it is more suitable to use the Data property directly in some cases, it should not be used directly for any style rules. Simple use is as follows:

[data-role="page"] {
  /* Styles */
}

Use the Data property in JQuery

How to use the Data property in JQuery? JQuery provides many ways to get data from elements. For example, like this:

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

If there is an anchor text tag similar to the above, there is a data attribute named data-info. Using the following method, you can get any attribute, including data-info

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

First translation:http://www.ido321.com/1304.html

Guess you like