Hey there! Let's demystify HTML5's data-* attributes for you—since you're curious about their purpose, how they work, and why they matter.

What Exactly is "Custom Data"? #

Custom data here refers to any extra, app-specific information tied to an HTML element that isn't covered by standard HTML attributes. Think of it as little metadata "sticky notes" you attach to elements that only your website or app needs to know about. Examples include:

• A product card storing a unique product ID, hidden sale price, or stock status
• A navigation link holding a category tag for dynamic filtering
• A carousel slide saving a caption that only loads when the slide is active

How to Store Custom Data with data-* Attributes #

Using these attributes is straightforward—here's the breakdown:

1. Name Your Attribute: Start with data-, followed by a descriptive, lowercase name (no spaces, uppercase letters, or special characters except hyphens). This suffix is your custom key.

   <!-- Storing product data on a div element -->
   <div class="product" data-product-id="456" data-sale-price="19.99" data-in-stock="true"></div>
   

2. Assign Values: You can store strings, numbers, booleans (as strings), or even JSON (just make sure it's properly escaped). All values are treated as strings by default.

Accessing & Using the Data in JavaScript #

This is where data-* attributes really earn their keep—they let you connect your HTML directly to your JavaScript logic without messy workarounds. Here are two common methods:

Method 1: getAttribute() (Browser-Compatible) #

Works in all browsers, including older ones:

const productCard = document.querySelector('.product');
const productId = productCard.getAttribute('data-product-id');
const salePrice = parseFloat(productCard.getAttribute('data-sale-price'));

Method 2: The dataset Property (Cleaner HTML5 Approach) #

HTML5 introduced the dataset object, which converts hyphenated data- names to camelCase for easier access:

const productCard = document.querySelector('.product');
const productId = productCard.dataset.productId; // Maps to data-product-id
const isInStock = productCard.dataset.inStock === 'true'; // Convert string to boolean

You can also update the data directly via dataset:

// Update stock status and reflect it in the HTML attribute
productCard.dataset.inStock = 'false';

Why data-* Attributes Matter #

• Clean, Organized Markup: No need for hidden inputs or extra elements to store metadata—keep data tied directly to the element it belongs to.
• Maintainable Code: Other developers (or future you) will immediately see what data is associated with an element, making debugging and updates easier.
• Seamless HTML-JavaScript Integration: Bridge your markup and logic without cluttering your code with workarounds.

内容的提问来源于stack exchange，提问作者Indranil