Introduction

HTML elements share a common set of global attributes—properties you can add to almost any tag, from <div> and <p> to <table> and <svg>. They handle identity (id, class), language (lang, dir), custom data (data-*), visibility (hidden), accessibility (aria-*), and more.

Understanding global attributes is essential because they are the glue between your HTML structure, CSS styling, JavaScript behavior, and assistive technologies. This hub page explains what each common global attribute does, how it differs from element-specific attributes like href and src, and how to use them correctly in real pages.

What You’ll Learn

What Are Global Attributes?

Global attributes are defined in the HTML specification as attributes that are allowed on all elements, unless a specific element’s definition says otherwise. They do not belong to one tag—you can put class="note" on a paragraph, a list item, or an image alike.

The core set includes: accesskey, autocapitalize, class, contenteditable, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title, and translate. In addition, all aria-* attributes and on* event handler attributes (such as onclick) are global.

Global vs Element-Specific Attributes

HTML attributes fall into two broad categories. Knowing the difference helps you write valid markup and choose the right tool for each job.

Global attributes often cooperate with element-specific ones. For example, an <input> with type="email" uses the global id for a <label> for="..." association and the specific type attribute to control validation.

• Reuse — class and data-* work the same way on every tag.
• Validation — putting href on a <div> has no effect and is invalid HTML.
• Layering — combine globals for structure/accessibility with specific attrs for element behavior.

📝 Global Attributes Reference

Quick lookup for the most commonly used global attributes in modern HTML.

Identity & styling

Language & text

Behavior & state

Accessibility (aria-*)

All WAI-ARIA state and property attributes are global. Common examples:

See individual attribute guides for deeper coverage: id, class, lang, dir, hidden, data-*, and more in the attribute sidebar.

Event Handler Attributes (on*)

Attributes like onclick, onchange, oninput, and onkeydown are global—you can attach them to any element. The browser runs the attribute value as JavaScript when the event fires.

<button type="button" onclick="alert('Clicked!')">Click me</button>

Inline event handlers work for quick demos, but in production code prefer addEventListener in a separate script. That keeps behavior out of markup, avoids Content Security Policy issues, and is easier to test.

• Global scope — inline handlers run in a special scope with this bound to the element.
• One handler per event — assigning onclick in HTML replaces any previous inline handler for that event.
• Prefer JS files — use element.addEventListener('click', fn) for maintainable apps.

Deprecated, Removed & Obsolete Globals

Not every attribute that once appeared on many elements is still valid. HTML evolves—some globals were removed entirely; others remain parseable but should not be used for new pages.

Removed from the specification

• contextmenu — removed. Use JavaScript and the oncontextmenu event instead of an HTML attribute.
• dropzone — removed. Handle drag-and-drop with the Drag and Drop API in script.

Obsolete presentation attributes

These were once global (or widely used) for visual styling. In HTML5 they are obsolete—use CSS instead:

Common Pitfalls

• Duplicate id values — ids must be unique per document. Duplicates break accessibility, labels, and querySelector expectations.
• Overusing inline style — hard to maintain and overrides cascade unpredictably. Use classes in a stylesheet.
• Using title as the only accessible name — tooltips are not reliably exposed to all assistive tech. Use visible text or aria-label when the name matters.
• Invalid data-* names — after data-, names must be lowercase, no spaces; use hyphens (data-user-id), which become dataset.userId.
• hidden vs display:none — hidden is semantic; CSS can still override it. Prefer hidden for content that is not yet relevant.
• Positive tabindex — values greater than 0 disrupt natural tab order. Use 0 or -1 in most cases.
• Obsolete globals for layout — align, bgcolor, and border on random elements are outdated; use CSS.

Examples Gallery

Six examples showing global attributes on everyday elements. Each includes View Output and Try It Yourself links to the live editor.

<style>
  .highlight { background: #fef9c3; padding: 0.2rem 0.4rem; }
  #intro { font-size: 1.1rem; }
</style>

<div id="intro" class="card">
  <p>Welcome to <span class="highlight">global attributes</span>.</p>
  <p class="highlight">The class works on any element.</p>
</div>

<p lang="en">Hello, welcome!</p>
<p lang="fr">Bonjour, bienvenue !</p>
<p lang="ar" dir="rtl">مرحباً بك في موقعنا</p>

<article
  class="product"
  data-product-id="42"
  data-price="19.99"
  data-in-stock="true">
  Wireless Mouse
</article>

<script>
  const el = document.querySelector('.product');
  console.log(el.dataset.productId); // "42"
  console.log(el.dataset.price);     // "19.99"
</script>

dataset.productId → "42"
dataset.price → "19.99"

<p title="This tooltip appears on hover">
  Hover over this paragraph.
</p>

<p hidden>
  This paragraph is hidden until you remove the hidden attribute.
</p>

<p>Only the first and third paragraphs are visible by default.</p>

<p contenteditable="true" spellcheck="true">
  Click here and edit this sentence. Misspelled wrds get underlined.
</p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Global Attributes Demo</title>
  <style>
    .note { border-left: 4px solid #3b82f6; padding-left: 1rem; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  </style>
</head>
<body>
  <header id="top">
    <h1>Global Attributes Demo</h1>
  </header>

  <main class="note" data-section="intro" title="Main content area">
    <p lang="en">This page combines several global attributes.</p>
    <p hidden>Draft paragraph not shown yet.</p>
  </main>

  <button type="button"
    aria-label="Back to top"
    tabindex="0"
    onclick="location.hash='#top'">
    ↑ Top
  </button>
</body>
</html>

💡 Best Practices