Global Attributes and data-*

Global attributes are available on most HTML elements. The most common are id, class, title, lang, dir, hidden, tabindex, and contenteditable.

An id should be unique in a document. A class can be shared by many elements and is commonly used as a CSS hook. lang identifies the language of an element’s content. hidden hides content from normal presentation and the accessibility tree. Use it when the content is genuinely not currently relevant, not as a way to hide a visible control from assistive technology.

Custom data attributes begin with data-:

<button type="button" data-course-id="html">Save course</button>

JavaScript can read the value using button.dataset.courseId. Data attributes are useful for associating small pieces of application data with an element. Do not put secrets or sensitive user data in them; values in the DOM are visible to the browser and page scripts.

tabindex needs care. tabindex="0" makes an otherwise non-focusable element reachable in the normal keyboard order. Positive values create a custom tab sequence and are almost always a maintenance problem. Prefer native controls rather than adding tabindex to generic elements just to make them clickable.