HTML Global Attributes

Global attributes can be used on any HTML element. Master these essential attributes to enhance your HTML markup.

Quick Answer

What are HTML global attributes?

HTML global attributes can be used on any HTML element. Key global attributes include class (CSS styling), id (unique identifier), style (inline CSS), title (tooltip text), lang (language), data-* (custom data), and contenteditable (editable content). These attributes work universally across all HTML elements.

16+

Global Attributes

100%

Element Coverage

Universal

Browser Support

What are Global Attributes?

Global attributes are attributes that can be used with any HTML element. Unlike element-specific attributes (like href for <a> tags), global attributes work universally across all HTML elements, giving you consistent ways to style, script, and enhance your markup.

classEssential

Specifies one or more class names for an element. Classes are used to apply CSS styles and JavaScript functionality to multiple elements.

Usage:

Apply CSS styles to multiple elements
Select elements with JavaScript
Multiple classes separated by spaces
Case-sensitive in HTML

Example:

<!-- Single class --> <div
                  class="container">Content</div> <!-- Multiple
                  classes --> <button class="btn btn-primary
                  btn-large">Click Me</button> <!-- CSS -->
                  <style> .btn { padding: 10px 20px; } .btn-primary {
                  background: blue; color: white; } .btn-large { font-size:
                  18px; } </style>

idEssential

Specifies a unique identifier for an element. Each id must be unique within the entire HTML document.

Important: IDs must be unique! Never use the same id on multiple elements in one page.

Usage:

Target specific elements with CSS
Create anchor links (#section-id)
Reference elements in JavaScript
Label form elements

Example:

<!-- Unique identifier --> <header
                  id="main-header">Site Header</header> <section
                  id="about">About Section</section> <!-- Anchor
                  link --> <a href="#about">Jump to About</a>
                  <!-- JavaScript --> <script>
                  document.getElementById('main-header').style.color = 'blue';
                  </script>

styleStyling

Specifies inline CSS styles for an element. While convenient, external stylesheets are generally preferred for maintainability.

Best Practice: Use external CSS files instead of inline styles for better code organization and reusability.

Example:

<p style="color: red; font-size: 18px; font-weight:
                  bold;"> Red bold text </p> <div style="background:
                  #f0f0f0; padding: 20px; border-radius: 8px;"> Styled
                  container </div>

titleAccessibility

Provides additional information about an element, typically displayed as a tooltip when the user hovers over the element.

Example:

<button title="Click to submit the
                  form">Submit</button> <abbr title="HyperText
                  Markup Language">HTML</abbr> <img src="cat.jpg"
                  alt="Cat" title="A cute orange cat">

data-*Custom Data

Allows you to store custom data private to the page or application. The * can be replaced with any name you choose.

Usage:

Store configuration values
Pass data from HTML to JavaScript
Track state information
Accessed via dataset property in JavaScript

Example:

<!-- Custom data attributes --> <div
                  data-user-id="12345" data-role="admin" data-status="active"
                  data-created-at="2024-01-15"> User Profile </div>
                  <button data-action="delete" data-confirm="true"
                  data-item-id="999"> Delete Item </button> <!--
                  Access in JavaScript --> <script> const div =
                  document.querySelector('div');
                  console.log(div.dataset.userId); // "12345"
                  console.log(div.dataset.role); // "admin"
                  console.log(div.dataset.status); // "active"
                  console.log(div.dataset.createdAt); // "2024-01-15"
                  </script>

langAccessibility

Specifies the language of the element's content. Important for screen readers, search engines, and translation tools.

Example:

<!-- Document language --> <html lang="en">
                  <!-- Different language sections --> <p
                  lang="en">Hello, World!</p> <p lang="es">¡Hola,
                  Mundo!</p> <p lang="fr">Bonjour, le
                  Monde!</p> <p
                  lang="ja">こんにちは世界</p>

hiddenBehavior

Boolean attribute that hides an element from display. The element won't be visible, but still exists in the DOM.

Example:

<!-- Hidden element --> <div hidden> This content
                  is hidden </div> <!-- Toggle with JavaScript -->
                  <button onclick="toggleSection()">Toggle</button>
                  <div id="section" hidden>Hidden section</div>
                  <script> function toggleSection() { const section =
                  document.getElementById('section'); section.hidden =
                  !section.hidden; } </script>

tabindexAccessibility

Specifies the tab order of an element for keyboard navigation. Important for accessibility.

Values:

tabindex="0" - Element is focusable in natural tab order
tabindex="-1" - Element is focusable programmatically, but not in tab order
tabindex="1+" - Defines custom tab order (avoid if possible)

Example:

<!-- Natural tab order --> <div
                  tabindex="0">Focusable div</div> <!--
                  Programmatically focusable --> <div tabindex="-1"
                  id="modal">Modal content</div> <script>
                  document.getElementById('modal').focus();
                  </script>

contenteditableBehavior

Specifies whether the content of an element is editable by the user.

Example:

<!-- Editable div --> <div contenteditable="true"
                  style="border: 1px solid #ccc; padding: 10px;"> Click here
                  to edit this text! </div> <!-- Editable list -->
                  <ul contenteditable="true"> <li>Edit this
                  item</li> <li>Or this one</li>
                  </ul>

draggableBehavior

Specifies whether an element is draggable using the HTML5 Drag and Drop API.

Example:

<!-- Draggable element --> <div draggable="true"
                  ondragstart="drag(event)" style="width: 100px; height: 100px;
                  background: lightblue;"> Drag me! </div> <!-- Drop
                  zone --> <div ondrop="drop(event)"
                  ondragover="allowDrop(event)" style="width: 200px; height:
                  200px; border: 2px dashed #ccc;"> Drop here
                  </div>

dirAccessibility

Specifies the text direction of the element's content.

Values:

ltr - Left-to-right (default for most languages)
rtl - Right-to-left (Arabic, Hebrew, etc.)
auto - Browser determines direction

Example:

<p dir="ltr">Left to right text</p> <p
                  dir="rtl">نص من اليمين إلى اليسار</p> <p
                  dir="auto">Auto-detected direction</p>

spellcheckBehavior

Specifies whether the element should have spelling and grammar checking enabled.

Example:

<!-- Spellcheck enabled --> <textarea
                  spellcheck="true">Type your text here...</textarea>
                  <!-- Spellcheck disabled (for code, etc.) -->
                  <textarea spellcheck="false">const x =
                  10;</textarea> <!-- Contenteditable with spellcheck
                  --> <div contenteditable="true" spellcheck="true">
                  Editable text with spell check </div>

translateBehavior

Specifies whether the content of an element should be translated by translation tools.

Example:

<!-- Don't translate brand names --> <p>Welcome
                  to <span translate="no">HTML Free
                  Codes</span></p> <!-- Don't translate code
                  --> <code
                  translate="no">console.log('Hello');</code> <!--
                  Translate this content --> <p translate="yes">This
                  should be translated</p>

accesskeyAccessibility

Specifies a keyboard shortcut to activate or focus an element.

Note: The key combination varies by browser and operating system (often Alt + key or Ctrl + Alt + key).

Example:

<!-- Press Alt+S to focus search --> <input
                  type="text" accesskey="s" placeholder="Search (Alt+S)">
                  <!-- Press Alt+H to go home --> <a href="/"
                  accesskey="h">Home (Alt+H)</a> <!-- Press Alt+U to
                  submit --> <button accesskey="u">Submit
                  (Alt+U)</button>

Best Practices for Global Attributes

IDs must be unique: Never use the same id twice on a page
Use semantic class names: Choose descriptive names like nav-menu instead of div1
Prefer external CSS: Avoid inline styles when possible
Always include lang: Set the language on your <html> tag
Use data attributes wisely: Perfect for configuration and state, not for styling
Accessibility first: Use tabindex, lang, and title thoughtfully
Test keyboard navigation: Verify tabindex and accesskey work correctly
Be consistent: Establish naming conventions for classes and data attributes