← Back to HTML Course | Chapter 8: Modern HTML & Components | Lesson 9 of 10

HTML Data Attributes

Imagine buying a filing cabinet for your office. Each drawer is labeled with standard categories, like Invoices or Contracts. But inside, you decide to stick your own private color-coded dot labels on specific files so you can find them instantly. HTML data attributes are those private labels. HTML tags come with standard attributes like href or src, but sometimes you want to store your own custom information inside a tag, like a unique database ID or a progress percentage. Data attributes allow you to embed custom, private variables directly inside your HTML tags, making it easy to read and manipulate them using CSS or JavaScript.

In this page:

  1. Custom Data Attributes
  2. Reading Data Attributes with CSS
  3. Reading Data with dataset in JavaScript
  4. Dynamic State Toggles
  5. Accessibility and ARIA Concerns
Syntax
markup 
<tagname data-name="value">content</tagname>
<script>
  element.dataset.name;
</script>

Custom Data Attributes

Data attributes allow you to store custom information inside standard HTML tags without violating validation rules. Every custom data attribute must start with the prefix data- followed by your custom name in lowercase.

Note:
  • Choose clear, descriptive names for your custom data attributes, like data-tool-type or data-status.
  • Accepted values:
  • data-* — name is data- plus lowercase letters, digits, hyphens
  • Value — any string
  • Read via element.dataset (camelCase) or getAttribute
Warning: Do not use uppercase letters or spaces in your custom data attribute names, as it will break validation.

Example: Custom Data Attributes

markup 
<div data-tool-type="calculator" data-status="active">Widget</div>

Reading Data Attributes with CSS

You can target custom data attributes inside your stylesheets using standard attribute selectors, and even display their values as text on the screen using the CSS content property.

Note: Use data attributes in your stylesheets to apply conditional styling based on custom properties.
Warning: Do not put essential content inside data attributes; use standard text tags instead to keep your site accessible.

Example: Reading Data Attributes with CSS

markup 
<style>
  [data-status="active"] {
    border: 2px solid green;
  }
</style>
<div data-status="active">Active widget</div>

Reading Data with dataset in JavaScript

JavaScript can easily read and modify custom data attributes using the dataset property. The browser automatically translates your hyphenated data- attributes into camelCase object properties.

Note: Access your data attributes in JavaScript using camelCase names (e.g., data-tool-type becomes dataset.toolType).
Warning: All data attribute values are read by JavaScript as plain strings; convert them to numbers manually if needed.

Example: Reading Data with dataset in JavaScript

markup 
<div id="widget" data-tool-type="calculator"></div>
<script>
  console.log(document.getElementById('widget').dataset.toolType);
</script>

Dynamic State Toggles

You can use data attributes to manage interactive states on your page, like toggling between active/inactive settings or dark/light modes, using simple scripts and style rules.

Note: Use data attributes to control your layout toggles and style changes dynamically.
Warning: Make sure your interactive buttons are accessible to keyboard users who cannot navigate with a mouse.

Example: Dynamic State Toggles

markup 
<button data-state="inactive" onclick="this.dataset.state = 'active'">Toggle</button>

Accessibility and ARIA Concerns

While data attributes are highly useful for custom styling and scripting, they carry absolutely no semantic meaning.

Assistive devices like screen readers will ignore your data attributes entirely, so you must use standard ARIA attributes to keep your interactive elements accessible.

Note: Use standard ARIA attributes (like aria-expanded) to describe states to screen readers, and data attributes for custom CSS styles.
Warning: Never use data attributes as a replacement for standard ARIA roles and labels.

Example: Accessibility and ARIA Concerns

markup 
<button data-expanded="false" aria-expanded="false">Show more</button>
Live Example
Related Topics

HTML Global Attributes · HTML Input Form Attributes · HTML Input Attributes · HTML Form Attributes

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using uppercase letters or spaces in your custom data attribute names.
  2. Attempting to use data attributes as a replacement for standard accessibility ARIA roles.
  3. Forgetting that JavaScript reads dataset values as plain strings, which can cause calculation errors.
Chapter Summary
  • Custom data attributes allow developers to store private variables inside HTML tags using the data- prefix.
  • Style data attributes inside CSS using attribute selectors, or read and update their values in JavaScript using dataset properties.
  • Data attributes carry no semantic meaning; always pair them with standard ARIA attributes to keep your interactive elements accessible.
Browser Support

Standard HTML5 data attributes and JavaScript dataset properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Picture Element Next Lesson → HTML PWA Basics

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.