HTML5 Data Attributes
Something I learned about recently is HTML5’s Data Attributes
data-* attributesallow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.
In other words, Data Attributes allow us to store data in your markup that you can access easily in your CSS and JS in order to expand the potential of your page styling and behavior.
example:
// HTML
<p class="item" data-price="3">Apple: $3</p>
<p class="item" data-price="4">Orange: $4</p>
<p class="item" data-price="10">Pineapple: $10</p>
<p class="total"></p>// JS
const foods = document.querySelectorAll('.item');
const totalElement = document.querySelector('.total');
let total = 0;foods.forEach(item => {
total = total + parseInt(item.dataset.price);
})totalElement.textContent = `Total: $${total}`;
In that final paragraph tag will be the final price of all the elements listed above. This is a fairly useless use case that my sleepy brain is coming up with, but there are far more use cases in which you would benefit from the ability to create arbitrary data-sets in a simple way and access them in other parts of your code.
This page presents a nice deep dive into the topic which include a few important things to note if using data sets (note that I needed to parse the string into an integer), how to use this feature in your CSS as well as more info on the syntax, and how you could’ve implemented something like this in the past.
disclaimer: The datalist API is supported by all modern browsers but not IE10 and below
