07. Data Attributes and Standard Attributes

Introduction

HTML provides standard attributes that work on most elements, as well as custom data-* attributes for storing extra information. Understanding standard attributes and data attributes helps create more functional, maintainable HTML. Data attributes are particularly useful for JavaScript interactions and storing metadata.

Standard Attributes

Global Attributes

Work on all elements:

<div id="content" class="container" title="Tooltip text" lang="en">
    Content
</div>

Common Standard Attributes

id: Unique identifier
class: CSS class names
style: Inline styles
title: Tooltip text
lang: Language
hidden: Hide element
tabindex: Tab order

Data Attributes

Basic Usage

<div data-user-id="123" data-role="admin">Content</div>

Accessing in JavaScript

const element = document.querySelector('div');
console.log(element.dataset.userId); // "123"
console.log(element.dataset.role);   // "admin"

Common Use Cases

Storing Metadata

<article data-author="John Doe" data-published="2024-01-15">
    Content
</article>

JavaScript Configuration

<button data-action="delete" data-item-id="456">Delete</button>

Testing

<div data-testid="user-profile">Profile</div>

Best Practices

Use Standard Attributes First

<!-- Good: Standard attributes -->
<div id="content" class="container" title="Description">

<!-- Avoid: Data attributes when standard works -->
<div data-id="content" data-class="container">

Semantic Data Attributes

<!-- Good: Meaningful names -->
<div data-product-id="123" data-category="electronics">

<!-- Avoid: Generic names -->
<div data-id="123" data-cat="electronics">