What are data- attributes in HTML and what are they used for?

Joanna

HTML

Data- attributes in HTML – what are they and what are they used for?

When writing a website in HTML, we often need to store some extra information about an element. This can be information that is not visible to the user but is useful in JavaScript or CSS – for example, it can be used for searching, filtering, or grouping data on the page. This is exactly what data- attributes are for. They are special attributes in HTML that allow you to store custom data in individual elements.

You can compare them to “sticky notes” – if we think of each HTML element as a box, then data- attributes are like labels with extra information that we can stick onto that box.

Example of use:

<div data-user-id="12345" data-user-role="admin">User profile</div>

Why use data- attributes?

Data- attributes have a few common uses. They are usually used for:

  • Storing IDs or names
  • Passing settings to scripts
  • Storing metadata
  • Adding information for CSS or JavaScript
<div class="slider" data-speed="3000" data-autoplay="true"></div>

<li data-status="done">Done</li>
<li data-status="in-progress">In progress...</li>

How to read data- attributes?

Data- attributes have the advantage that they can be used both in the style layer (CSS) and in the logic of the page (JavaScript). In CSS, they are used for conditional styling – we can change the color, layout, or appearance depending on the value of the attribute. This way, one HTML tag can take on different styles without the need to add extra classes.

In JavaScript, data- attributes work like a “mini storage” of data. Scripts can read them, use them to make decisions, or change their values while the page is running. This makes elements more interactive – for example, buttons can store information about which dialog window to open, and lists can hold data about the status of individual items.

Css

[data-status="active"] {
    color: green;
}

[data-status="inactive"] {
    color: red;
}

JavaScript

<button id="myBtn" data-user-id="123" data-role="admin">Click me!</button>

const btn = document.getElementById('myBtn');
console.log(btn.dataset.userId); // "123"
console.log(btn.dataset.role);   // "admin"

Best practices

  • Use consistent naming: for example data-user-id, data-product-name (lowercase letters and hyphens).
  • Do not store sensitive data: Data- attributes are visible in the page source code, so keeping passwords, logins, or API keys there is not a good idea. Only store data that can safely be shared openly.
  • Store only what is needed: Data- attributes work best with simple values such as strings or numbers. Remember, their purpose is to make working with page elements easier, not to replace a database or hold large blocks of information.
  • Document your attributes: Especially in bigger projects, it is a good idea to keep a list of all data- attributes that are being used.

Data- attributes are a powerful tool that allows you to create more dynamic and interactive websites. They let you pass information between HTML, CSS, and JavaScript in a clean and organized way. This is one of the HTML5 features that really makes life easier for developers and is definitely worth learning. 😉