## HTML data-* Global Attribute
The `data-*` attribute is an HTML5 global attribute that allows developers to embed custom, private data on all HTML elements. This custom data can then be easily accessed via JavaScript to create highly interactive user experiences without requiring server-side queries or AJAX requests.
---
## Definition and Usage
The `data-*` attribute is used to store custom data private to the page or application.
* **Universal Application:** It can be used on any valid HTML element.
* **Two-Part Structure:**
1. **The Prefix:** Must start with `data-` and must be followed by at least one character. The attribute name **must not contain uppercase letters**.
2. **The Value:** Can be any string value.
* **Client-Side Behavior:** The browser completely ignores the custom `data-` prefix, leaving it purely for developer use and script access.
---
## Syntax
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| *value* | Specifies the value of the attribute as a string. |
---
## Browser Support
| Chrome | Edge/IE | Firefox | Safari | Opera |
| :---: | :---: | :---: | :---: | :---: |
| Yes | Yes | Yes | Yes | Yes |
All modern web browsers fully support the `data-*` attribute.
---
## Code Examples
### Basic Usage: Embedding Custom Data
In this example, we use `data-animal-type` to store the category of each animal directly within the list items:
```html
```
### Advanced Usage: Accessing Data via JavaScript
You can read or write `data-*` attributes in JavaScript using either the standard `getAttribute()`/`setAttribute()` methods or the modern `dataset` property.
```html
John Doe
```
### Styling with CSS
You can also target elements with specific `data-*` attributes using CSS attribute selectors:
```css
/* Style any list item that represents a bird */
li {
color: #1da1f2;
font-weight: bold;
}
/* Display the data attribute value using the attr() function in pseudo-elements */
li::after {
content: " (" attr(data-animal-type) ")";
font-size: 0.8em;
color: gray;
}
```
---
## Key Considerations
1. **Naming Conventions:**
* Do not use uppercase letters in the HTML attribute name (e.g., use `data-user-id`, not `data-userId`).
* When accessing the attribute in JavaScript via `dataset`, the hyphenated name is automatically converted to camelCase (e.g., `data-user-id` becomes `dataset.userId`).
2. **Data Types:** The value of a `data-*` attribute is always retrieved as a **string**. If you store numbers or JSON objects, you must parse them manually in JavaScript (e.g., using `parseInt()` or `JSON.parse()`).
3. **Search Engine Optimization (SEO):** Search engine crawlers generally do not index content stored inside `data-*` attributes. Do not use them to store critical content that needs to be indexed.
4. **HTML4 vs HTML5:** The `data-*` attribute is a standard feature introduced in HTML5. In older HTML 4.01 specifications, custom attributes were considered invalid HTML.
YouTip