HTML Global Attributes Reference

Badar KhalilUpdated September 27, 2026 2 min read

HTML Global Attributes Reference

HTML global attributes are attributes that can be applied to almost any HTML element, regardless of tag type. Mastering these global attributes gives you fine control over styling, accessibility, scripting hooks, and user interaction across your entire webpage.

What Are Global Attributes?

Unlike attributes that only work on specific tags (like href on <a>), HTML global attributes work on virtually every element — from <div> to <p> to <button>. This makes them essential building blocks for CSS styling, JavaScript interactivity, and accessible web design.

1. Identification Attributes

Attribute	Description
id	Unique identifier for an element, used in CSS/JS targeting
class	Assigns one or more class names for styling/scripting
name	Names an element (mostly for form elements)

2. Styling Attributes

Attribute	Description
style	Applies inline CSS directly to an element
class	Links an element to CSS rules defined in a stylesheet

3. Content and Behavior Attributes

Attribute	Description
title	Adds a tooltip shown on hover
hidden	Hides an element from rendering
contenteditable	Allows the user to edit the element's content
draggable	Marks an element as draggable
spellcheck	Enables or disables spellchecking on editable content
translate	Indicates if content should be translated

4. Data Attributes

Attribute	Description
data-*	Custom attributes used to store extra data, accessed via JavaScript's dataset API

5. Accessibility & Language Attributes

Attribute	Description
lang	Specifies the language of the element's content
dir	Sets text direction: ltr, rtl, or auto
tabindex	Controls keyboard focus order
accesskey	Defines a keyboard shortcut to focus/activate the element

6. Event Handler Attributes

Global event attributes like onclick, onmouseover, and onfocus can be attached to nearly any element to trigger JavaScript directly from HTML.

Attribute	Description
onclick	Runs script when the element is clicked
onmouseover	Runs script when the mouse hovers over the element
onchange	Runs script when an element's value changes

Why Global Attributes Matter for Modern Web Development

Using HTML global attributes correctly improves accessibility (via lang, tabindex, title), enables dynamic behavior (via data-* and event attributes), and keeps your code clean and reusable through id and class.

Try It Yourself

Practice with the live code examples below to see global attributes in action.

Try it Yourself HTML

<div id='profile-card' class='card' title='User Profile' data-user-id='102'>
  <p contenteditable='true'>Click here to edit this text!</p>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<button onclick="this.style.background='lightgreen'; this.innerText='Clicked!'">Click Me</button>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const card = document.getElementById('profile-card');
console.log(card.dataset.userId); // reads data-user-id attribute
card.setAttribute('hidden', true); // hides the element

Output

Press Run to execute.

Exercise: Use Data Attributes in JavaScriptHTML

Create a div with a data-* attribute storing a product price. Write JavaScript that reads the value using the dataset API and logs it to the console.

Try it Yourself HTML

<div id='product' data-price=''></div>
<script>
  // Access the data-price attribute here
</script>

Output

Press Run to execute.

Show expected output

Console logs the price value stored in the data-price attribute.

This is a self-check — compare your result with the expected output above.

Was this page helpful?