O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Custom data attributes

Another new feature of HTML5 is custom data attributes. Custom data attributes allow you to store custom data private to your application as an attribute on any element in the DOM. All you have to do is prefix the attribute name with data-. The name should be all lower case letters. You can assign any string value to the attribute.

For example, say we had a list of products and we wanted to store information about the products, such as product ID and category. All we have to do is add data-product-id and data-category attributes to the associated elements:

<ul id="product-list">
  <li data-product-id="d1e0ddde" data-category="widgets">
    Basic Widget
  </li>
  <li data-product-id="e6b2c03f" data-category="widgets"> Super Widget </li> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required