Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

1. Hacking the Semantic Way > Hack 8. Add Rich Context to Your Markup with Cust...

Hack 8. Add Rich Context to Your Markup with Custom Data

HTML5 formalizes the ability to store data directly in the page element. The data is simple to add, and just as simple to access.

Custom data attributes give us the ability to add more richness and depth to our markup than we’ve ever been able to before. Custom data attributes, often called the data-* attributes, are an easy way to add contextual data to HTML5 markup. Just come up with an attribute name, prefix it with “data-”, and add it to any HTML markup tag:

<ul id="carInventory" >
    <li class="auto" data-make="toyota" data-bodytype="sedan" data-
    Light blue Toyota Prism

In the preceding example, we have information we want to present to the user that we include as text inside the tag. We also have contextual information that our app will want to use to provide additional functionality to the user. Before HTML5, this additional data would have been stored in one of two ways. Either we would have hacked up another attribute (such as the class attribute or the id) with a string that encoded all this information, or we would have kept a separate data source in JavaScript that had a reference to this tag linked to it. Neither of these options is very fun, and both require quite a few lines of JavaScript to become useful.


You are currently reading a PREVIEW of this book.


Get instant access to over $1 million worth of books and videos.


Start a Free 10-Day Trial

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint