Global attributes and custom data

Introduction

You have used attributes that belong to particular elements, such as href and src. Some attributes work on every element. These are the hooks that join HTML to CSS and JavaScript, and using them cleanly is a large part of what separates tidy pages from tangled ones.

How it works

id and class both name elements, and they have different jobs.

An id must be unique on the page. Use it for a target: a fragment link, a label's for, or an element a script will look up. A class can be shared by many elements, and one element can have many classes, separated by spaces: class="card featured". Use classes for styling. Name a class for what it is (warning), not how it looks (red-text), since the look may change.

data-* attributes let you attach your own information to an element. The name must start with data- and be lowercase. In a shop, each product button could carry its own product code:

<button data-product="tea-500" data-price="120">Add to basket</button>

JavaScript reads them through dataset, converting the dashes in names to capital letters: data-unit-price becomes dataset.unitPrice. CSS can select them too: [data-state="open"].

Never put a secret there. Everything in your HTML can be read by anyone who views the source, and a visitor can change the values. So a server must never trust a price sent to it from data-price.

Other global attributes:

A word in another language should be marked, so that a screen reader can pronounce it correctly: <span lang="bn">ধন্যবাদ</span>.

Syntax

<li id="item-3" class="task done" data-due="2030-06-01">Pay rent</li>

Example

Line by line

1. Each li shares the class task, and has its own data-due.
2. The CSS selects only the task whose data-due is Friday.
3. The script finds the tasks by class and reads dataset.due.
4. id="out" marks the single place where the result goes.

Expected result

Two list items, with "Call home" in bold green, and below them the line "Friday is the last due date."

In the real world

Component libraries often use data-state to record whether something is open or closed, and CSS responds to it. Analytics tools use data attributes to label buttons. Translation tools respect translate="no" for brand names.

Common mistakes

• Repeating an id. Lookups find only the first, and labels connect to the wrong field.
• Storing trusted values in the page, such as a price or a user's role.
• Using title as the only explanation, since it does not appear on touch screens.
• Writing data- names in capitals. HTML lowercases attribute names.

Best practices

• Use classes for styling and ids for unique targets.
• Name classes by purpose.
• Use hidden rather than leaving unused content on the page.

Summary

Global attributes work on any element. id is unique, while class is shared. data-* carries information for scripts and CSS, hidden, lang and dir control presentation and language, and nothing in your HTML is secret.

Mark lesson complete