HTML Global Attributes

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

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