The Data Attribute: Custom Data in HTML
If you're just starting with HTML, you might think it’s only for text, images, and links. But HTML can also quietly hold extra information that your page (and your JavaScript) can use behind the scenes. That’s where data attributes come in.
In this guide, you’ll learn what data attributes are, why they’re useful, and how to use them step by step. We’ll walk through simple, hands-on examples you can copy, edit, and run yourself.
Learning to code can feel a bit overwhelming, but you don’t have to understand everything at once. Focus on one small concept at a time. Today, that concept is data-* attributes.
What is a data-* attribute?
A data attribute is a way to store custom information directly in an HTML element.
It looks like this:
<div data-color="blue"></div>
Let’s break that down:
data-is required. It tells the browser: “this is a custom data attribute.”coloris the name you chose for your data. You can pick other names too."blue"is the value of that data.
So data-color="blue" means: this element has a custom piece of information called color, and its value is blue.
You can use any name after data-, like:
data-user-id="123"data-price="9.99"data-role="admin"
As long as it starts with data-, the browser accepts it.
Why use data-* attributes?
You could put this information in many places (like in JavaScript variables), but data attributes have some big advantages:
- Keep data and HTML together – The data stays right on the element it belongs to.
- Easy to read and edit – Anyone looking at the HTML can quickly see the custom info.
- Simple to use with JavaScript – JavaScript can easily read and change these values.
You’ll often use data attributes to:
- Mark items with IDs or categories
- Store settings for buttons or widgets
- Pass information from HTML into JavaScript without hard-coding it in JS
Example 1: Adding a simple data-* attribute
Let’s start with a basic button that has a custom data-action attribute.
<!-- Example 1: A button with a custom data attribute -->
<button data-action="save">
Save
</button>
What’s happening here?
<button>creates a clickable button.data-action="save"says this button’s “action” is save.- The word
Savebetween the tags is the text that appears on the button.
Right now, the browser doesn’t do anything special with data-action by itself. But you (or your JavaScript code) can.
Try it yourself:
- Open a simple
.htmlfile in a text editor. - Paste the code inside the
<body>tag. - Open the file in your browser.
- Right-click → Inspect (or Inspect Element) and look at the button’s HTML. You’ll see the
data-actionattribute on it.
You’ve just added your first piece of custom data to an element.
Example 2: Using multiple data-* attributes
You can add more than one data attribute to the same element. Let’s say we have a product card.
<!-- Example 2: A product with multiple data attributes -->
<div class="product"
data-id="101"
data-name="Laptop"
data-price="799.99">
<h2>Laptop</h2>
<p>$799.99</p>
</div>
What each part does
class="product"is a regular HTML class, often used for styling with CSS.data-id="101"stores a product ID.data-name="Laptop"stores the product name.data-price="799.99"stores the product price.
This is powerful because all the product information is now attached directly to the HTML element. Later, JavaScript can grab this data and do things like:
- Add the product to a shopping cart
- Show a message: “You selected: Laptop ($799.99)”
Try it yourself:
Change the values:
- Set
data-name="Headphones" - Set
data-price="49.99"
Reload the page and imagine how your script could read those values.
Example 3: Reading data-* attributes with JavaScript
Data attributes become even more useful when you combine them with JavaScript.
This example will:
- Read the custom data from a button
- Show it in an alert when you click the button
<!-- Example 3: Reading data attributes with JavaScript -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data Attribute Example</title>
</head>
<body>
<button id="actionButton" data-action="delete">
Delete Item
</button>
<script>
// 1. Find the button element by its ID
const button = document.getElementById('actionButton');
// 2. Add a click event listener to the button
button.addEventListener('click', function () {
// 3. Read the data-action attribute using dataset
const action = button.dataset.action; // "delete"
// 4. Show the action in an alert
alert('Button action is: ' + action);
});
</script>
</body>
</html>
Step-by-step explanation
id="actionButton"gives the button a unique ID.data-action="delete"is our custom data.document.getElementById('actionButton')finds that button.button.dataset.actionreads thedata-actionvalue.datasetis a special object that holds alldata-*attributes.data-actionbecomesdataset.actionin JavaScript.
alert('Button action is: ' + action);shows a pop-up with that value.
What you’ll see:
- Open this file in your browser.
- Click the Delete Item button.
- An alert pops up:
Button action is: delete.
Try it yourself:
- Change
data-action="delete"todata-action="save". - Reload the page and click the button again.
- Notice how the alert now shows
savewithout changing the JavaScript.
You’ve just used custom HTML data to control how JavaScript behaves.
Example 4: Styling based on data-* attributes (CSS + JS)
Let’s combine HTML, CSS, and JavaScript. We’ll create a list of items with different priorities and color them based on a data-priority value.
<!-- Example 4: Styling items using data attributes -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Data Priority List</title>
<style>
/* Basic styling for the list */
.task {
padding: 8px;
margin: 4px 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="task" data-priority="high">Pay bills</div>
<div class="task" data-priority="medium">Clean the kitchen</div>
<div class="task" data-priority="low">Watch a movie</div>
<script>
// 1. Get all elements with class "task"
const tasks = document.querySelectorAll('.task');
// 2. Loop through each task
tasks.forEach(function (task) {
const priority = task.dataset.priority; // read data-priority
// 3. Change background color based on priority
if (priority === 'high') {
task.style.backgroundColor = '#ffcccc'; // light red
} else if (priority === 'medium') {
task.style.backgroundColor = '#fff4cc'; // light yellow
} else if (priority === 'low') {
task.style.backgroundColor = '#ccffcc'; // light green
}
});
</script>
</body>
</html>
What this does
- Each
.taskhas adata-priorityvalue:high,medium, orlow. - JavaScript reads
task.dataset.priorityfor each item. - Based on the value, it sets a different
backgroundColor.
What you’ll see:
- “Pay bills” gets a light red background (high priority).
- “Clean the kitchen” gets light yellow (medium).
- “Watch a movie” gets light green (low).
Try it yourself:
- Add a new task:
<div class="task" data-priority="high">Study HTML</div> - Reload the page. It should automatically get the high-priority color.
You just made your page respond visually to custom data in your HTML.
Tips for naming data-* attributes
A few simple rules and best practices:
Always start with
data-
Example:data-user-name,data-category,data-level.Use lowercase and dashes
For example,data-user-nameinstead ofdataUserNamein HTML.Access in JavaScript with camelCase
data-user-name→element.dataset.userNamedata-price→element.dataset.price
This pattern keeps your HTML clean and your JavaScript easy to read.
Quick recap and what’s next
You’ve learned how to:
- Add custom information to HTML elements using
data-*attributes - Store multiple pieces of data on the same element
- Read data attributes in JavaScript using
element.dataset - Use data attributes to control behavior (alerts) and appearance (colors)
These are small steps, but they’re powerful. You now know a simple way to connect your HTML structure with your JavaScript logic.
What’s next?
- Practice by adding data attributes to buttons, links, or list items.
- Try using
data-*values to control messages, styles, or simple animations. - Explore event listeners (like
clickandmouseover) and see how data attributes can guide what happens when users interact with your page.
Every experiment you try builds your skills. Keep going—you’re already thinking like a developer by separating data, structure, and behavior using data attributes!
