Using HTML5 data-* Attributes

The data- attributes were introduced in the HTML5 standard because there wasn’t any good solution for adding unique data to HTML elements.

I’m sure everybody knows the situation when you van to add dynamic data into your HTML code in your complex application, but you are not sure how to do it; this was quite a problem some years before because of the lack of concept. You can do it through class or rel attribute, but there wasn’t for this kind of purpose. Of course, we still use the class attribute to status checking with JS, but we can also use a data-* attribute.

Note that one of the problems was the valid HTML code and the broad browser support.

A data attribute could be anything started with a data-* attribute like so:

<div class="js-canvi-navbar--right canvi-navbar animate--in" 
     data-position="right" 
     data-push-content="false">

The value of the attribute is always a string, but you can also use a stringified object and convert it back as you do it with cookies and local storage. These data aren’t visible for the end user.

How to Access the Data

In JavaScript, we have two option to access the data: getAttribute/setAttribute function and the dataset property. Both can get and set.

Note that the dataset is only work in the newer browsers, below IE10 it isn’t.
navbar.setAttribute('data-position', options.position);
navbar.getAttribute('data-position');

Using the attribute functions, you need to name the prefix too.

navbar.dataset.position;
navbar.dataset.position = 'left';

With the dataset property, you only need the suffix value. The dashes are converted to camelCase.

You also can access data attribute values through CSS with the attr() function. The only place where you can use this value is the content property like the following:

.file-upload-wrapper:after {
    content: attr(data-text);
}

The previous method can be handy in a lot of cases but if you want a concrete example check out this file upload field example:

See the Pen Pure CSS File Upload Field by Adam Laki (@adamlaki) on CodePen.

Data Attribute Use Cases

Using data-* as an architect feature may result in cleaner and better maintainable code. We have a small off-canvas JS menu project where we use data values to style the menu position to left or right. Thus we can style our navbar elements like this:

.canvi-navbar[data-position="right"] {
    right: 0;
    transform: translate3d(100%, 0, 0);

    &[data-push-content="true"] {
        transform: translate3d(0, 0, 0);
    }
    
    &.is-canvi-open {
        transform: translate3d(0, 0, 0);
    }
}

.canvi-navbar[data-position="left"] {
    left: 0;
    transform: translate3d(-100%, 0, 0);

    &[data-push-content="true"] {
        transform: translate3d(0, 0, 0);
    }

    &.is-canvi-open {
        transform: translate3d(0, 0, 0);
    }
}

The attribute selectors have the same specificity as the class selectors.

You can also use this as configuration parameters for your JS plugin like in Fancybox 3:

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>