HTML Data Attributes

HTML data attributes allow you to store custom information directly inside HTML elements. They are useful when you want to associate extra data with buttons, products, user interface components, or other elements and access that information using JavaScript.

In this tutorial, you will learn how HTML data attributes work, how to create them, and how to read their values using JavaScript.

What Are HTML Data Attributes?

HTML data attributes are custom attributes that begin with data-. They let developers attach additional information to an HTML element without using non-standard attributes.

For example:

<div data-username="karim" data-role="admin">
    User Profile
</div>

Here, data-username stores the username, while data-role stores the user’s role.

These attributes are especially useful for interactive websites because JavaScript can read their values when needed.

Like the HTML class attribute, data attributes can be used on many different HTML elements.

HTML Data Attribute Syntax

The basic syntax is:

<tagname data-name="value">Content</tagname>

The attribute name must begin with data-, followed by a descriptive name.

For example:

<button data-product-id="101" data-price="499">
    Buy Now
</button>

This button stores a product ID and a price. JavaScript can retrieve those values when the button is clicked.

Use meaningful attribute names to make your HTML easier to understand and maintain.

Rules for Using Data Attributes

Follow these guidelines when creating custom data attributes:

• Attribute names must begin with data-.
• Use lowercase letters and hyphens for readable names.
• Attribute values are written as strings in HTML.
• You can add multiple data attributes to the same element.
• Do not store passwords, secret keys, or other sensitive information in data attributes.
• Use standard HTML attributes when an existing attribute already provides the required functionality.

For example:

<article
    data-category="technology"
    data-author="Alex"
    data-published="2026">
    HTML Data Attributes Tutorial
</article>

This article element stores its category, author, and publication year.

Accessing Data Attributes with JavaScript

JavaScript provides the dataset property to access an element’s data attributes.

<button id="buyButton" data-product="Laptop" data-price="50000">
    View Product
</button>

<script>
    const button = document.getElementById("buyButton");

    console.log(button.dataset.product);
    console.log(button.dataset.price);
</script>

The console displays:

Laptop
50000

Although the price looks like a number, its value is initially a string. Convert it with Number() if you need to perform calculations.

const price = Number(button.dataset.price);
console.log(price + 1000);

The output is 51000.

To learn how JavaScript targets a specific HTML element, see the HTML ID attribute guide.

Using Data Attributes in Button Click Events

Data attributes are useful when multiple buttons need to store different values.

<button class="product" data-name="Laptop">
    Laptop
</button>

<button class="product" data-name="Phone">
    Phone
</button>

<script>
    document.querySelectorAll(".product").forEach(button => {
        button.addEventListener("click", function () {
            alert("Selected: " + this.dataset.name);
        });
    });
</script>

When a user clicks a button, the browser displays the product name stored in that button’s data-name attribute.

This technique is helpful for shopping carts, filters, menus, and interactive components.

HTML Data Attributes vs. Regular HTML Attributes

Feature	Data Attributes	Regular HTML Attributes
Purpose	Store custom information	Provide standard HTML functionality or information
Naming	Starts with data-	Uses defined attribute names
Example	data-product-id="101"	href="page.html"
JavaScript access	element.dataset.productId	Depends on the attribute and DOM property

For example, use href to specify a link destination. Use data-product-id to associate a product identifier with an element.

Frequently Asked Questions

Can I create my own HTML data attributes?

Yes. You can create custom attributes that begin with data-, provided they follow HTML naming rules.

Can an element have multiple data attributes?

Yes. An element can contain multiple data attributes, each storing a separate value.

Are HTML data attribute values always strings?

Values read through dataset are strings. Convert them to numbers or other suitable types when your JavaScript needs a different data type.

Are data attributes visible on a webpage?

Their values are not normally displayed as visible text, but users can inspect them through browser developer tools. Do not use data attributes to store confidential information.

Are data attributes useful for SEO?

Data attributes are primarily intended for application-specific information and JavaScript behavior. They should not replace meaningful page content, semantic HTML, or standard attributes.