One of the most awesome new features of HTML5 is having the ability to set data-attributes on any element on the page. This is an incredibly powerful feature, and you can really go wild with your imagination if you want to. The sky is the limit. The awesome Twitter Bootstrap Framework makes heavy use of data attributes when working with their JavaScript and jQuery plugins. So if you’ve ever wondered what those various data- attributes are or what they do, you are in the right place. Let’s jump right into HTML5 Data Attributes!
Data Attributes are Awesome
The addition of data attributes to HTML5 is one of the key features that enables HTML5 to compete with native style applications in the closed platform world. Developers are no longer building static websites with HTML, but rather full blow applications that need to run in all sorts of different environments. Data attributes help make this a reality.
Always Starts With data-something
When you want to use data attributes in your HTML, the attribute will always begin with data-. After the dash is where you begin your own naming convention that makes sense for the application. If you are working with a video game application maybe you have things like data-player data-score data-high-score and data-start-game.
Embed Any Data on Any Element
Data attributes can be assigned to any element on the page. In addition, you can store whatever value you need in whatever data attribute you are using for the application.
Access The Data With the Dataset Object
When you assign values to the data attributes, they are inserted into the dataset object in JavaScript. You can then access those values in the JavaScript you write for the page and you will see an example shortly of how to do this.
Works With Native JavaScript and jQuery
HTML5 data attributes were created with JavaScript integration in mind. In addition to accessing this data with native JavaScript, you can also use this approach with jQuery via the data() or attr() methods.
Data Attributes are Converted to Camel Case in JavaScript
You’ll see many times in the HTML5 that you come across that data attributes often use a hyphenated style. Just like we mentioned the video game example that may have data-player data-score data-high-score and data-start-game attributes, those attributes will get converted to camel case JavaScript variables. So these examples would result in the JavaScript variables of player score highScore and startGame. You would then access them in JavaScript via the dataset object such as dataset.player dataset.score dataset.highScore and dataset.startGame.
Data Attributes are Super Flexible
As you can see, data attributes are very flexible. If you’ve ever been building an application where you dynamically generate HTML and attributes to the page, you know that you often are setting all kinds of different values. With so much interactivity being built into websites and applications now, we need a way to be able to grab those values from the webpage with JavaScript and jQuery. Data attributes give us all of this and more.
HTML5 data attributes are supported in all the modern web browsers including Google Chrome, Mozilla Firefox, and Apple Safari. Both JavaScript and jQuery work equally well with data attributes. With these key concepts in mind, let’s take a look at some simple markup that will show these ideas in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Working With HTML5 data attributes
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($){
// accessing data- attributes with jQuery
jQuery('a.btn').click(function () {
var myAttribute = $(this).attr('data-my-attribute');
jQuery('#content').after('<div class="alert alert-info"><h3>' + myAttribute + '</h3></div>');
})
});
// accessing data- attributes with native JavaScript
function answer(evt) {
game = evt.dataset.videoGame;
status = evt.dataset.gameStatus;
time = evt.dataset.gameTimeFrame;
var newlyCreated = document.createElement('h2');
newlyCreated.innerHTML = game + status + time;
var native = document.getElementById('native');
native.appendChild(newlyCreated);
}
</script>
</head>
<body class="container">
<h1>
Working With HTML5 data attributes
</h1>
<p class="lead">
You can specify your own data attributes on your tags in the page. This is super useful for placing data dynamically into the HTML via a server side technology, then accessing those values by grabbing them with JavaScript.
</p>
<a class="btn btn-primary btn-lg btn-block" href="#" data-my-attribute="BOOM!">Click, Click</a>.
<div id="content"></div>
<button class="btn btn-success btn-lg btn-block" data-video-game="Super Mario Brothers " data-game-status="is the greatest " data-game-time-frame="of all time!" onclick="answer(this)">
Click to Learn the Greatest Video Game of All Time!
</button>
<div id="native"></div>
</body>
</html>
Cool! This was a super simple nonsense example, but it gets the point across. For the first example, we have a button on the page, with some jQuery set up that will act when the button is clicked. When we click the button, jQuery fetches the value of the data attribute in question and places that value into the myAttribute variable. Then using jQuery, we simply insert a snippet of HTML after the empty content div in the HTML and include the value of myAttribute in the output.
For the second example we use native JavaScript to accomplish a similar effect. This example shows how multiple data attributes assigned to the same element are handled. Basically, all of the various data attributes get auto converted to camel case and placed into the dataset object. In the HTML, we simply attach an onclick event and run the function answer when the user clicks to find out what the greatest video game of all time is. Inside our function we set up three variables and assign their values using the data we were able to access from the three different data attributes that were a part of the element on the page. We then use native DOM functions to assemble a new element and manually append the element to the div on the page. Thanks goodness for jQuery 🙂
