Custom data attributes in HTML5 should be used to store small, non-sensitive pieces of data directly in HTML for access by JavaScript or CSS. 1. They are ideal for storing item IDs, UI states, or configuration options. 2. Access them via getAttribute() or the dataset property in JavaScript, with dataset using camelCase naming conventions. 3. Avoid overuse, sensitive data, and assume all values are strings requiring manual conversion. Always ensure changes trigger corresponding JavaScript logic as they do not affect page behavior automatically.

Custom data attributes in HTML5 are a way to store extra information in HTML elements without affecting the layout or behavior of the page. They start with data- followed by a name you choose, and they can hold any string value.

For example:

<div data-product-id="12345">Product Details</div>

This data-product-id attribute doesn’t do anything on its own, but it gives JavaScript or CSS a way to access custom values tied to that element.

When should you use custom data attributes?

They’re most useful when you need to pass small bits of data from HTML to JavaScript. Instead of hardcoding values in your scripts or making extra server requests, you can embed them directly into the markup.

Common use cases:

• Storing item IDs for dynamic content (like products in a list)
• Keeping track of UI states (e.g., data-expanded="true")
• Passing configuration options to widgets or plugins

Just remember: these attributes aren’t meant for large data sets or sensitive info. Keep them simple and public-facing.

How to access data attributes with JavaScript

You can read and write them using standard DOM methods.

To get a value:

const element = document.querySelector('[data-product-id]');
const productId = element.getAttribute('data-product-id');

To set a value:

element.setAttribute('data-product-id', '67890');

If you're using modern JavaScript, there's also dataset, which is a bit cleaner:

const productId = element.dataset.productId; // "12345"
element.dataset.productId = '67890';

Note that dataset uses camelCase for names after data-. So data-user-id becomes dataset.userId.

Things to watch out for

• Don’t overuse them: It’s easy to clutter your HTML with too many data attributes. Only use them when necessary.
• Avoid sensitive data: Since they’re visible in the source code, don’t store passwords or tokens.
• Use appropriate types: Data attributes always store strings, so if you need numbers or booleans, convert them manually:

  const count = parseInt(element.dataset.count, 10);
  const isActive = element.dataset.active === 'true';

  Also, keep in mind that changing a data attribute won’t automatically update anything on the page — you still need JavaScript logic to respond to those changes.

  ---

  Basically, custom data attributes give you a clean way to attach extra info to HTML elements. They’re widely supported and fit well into modern web development practices when used thoughtfully.

  The above is the detailed content of What are custom data attributes and how are they used in html5?. For more information, please follow other related articles on the PHP Chinese website!