Global attributes can be used on almost any HTML element — they're not tied to a specific tag the way href is tied to <a>.
The Most-Used Global Attributes
| Attribute | Purpose |
|---|---|
id | A unique identifier for one specific element on the page |
class | One or more class names, for CSS/JavaScript targeting — reusable across many elements |
style | Inline CSS for that one element — see Inline Styles |
title | Extra info shown as a browser tooltip on hover |
lang | Overrides the document's language for that element specifically |
hidden | Hides the element (boolean attribute) |
tabindex | Controls keyboard tab order — see Keyboard Accessibility |
data-* | Custom data attributes for your own JavaScript — see Data Attributes |
Example
<p id="intro-text" class="lead highlight" title="Introduction paragraph">
Welcome to CodingNow.
</p>id vs class — When to Use Which
id— unique per page, used for one specific element (a target for an in-page link, or a single JavaScript hook)class— reusable, used for styling or grouping many elements the same way
Full comparison in id attribute and class attribute.
Practical Use Case
Global attributes are what connect static HTML to CSS (via class/id) and JavaScript (via id, data-*) — without them, HTML would just be static text with no way for other technologies to hook into specific elements.
Common Mistakes
- Reusing the same
idvalue on multiple elements on one page —idmust be unique; duplicate IDs break JavaScript methods likegetElementByIdand are invalid HTML - Using
idfor styling that should really be a reusableclass
Interview Relevance
Q: "Can two elements share the same id?" No — ids must be unique per page; that's the core distinction from class, which is explicitly designed to be reused.
Practice Question
Add appropriate id and class attributes to a navigation <nav> element and its three <a> links.
