HTML Global Attributes

Previous Next

A global attribute is an attribute that can be used on almost any HTML element, not just one specific tag. You've likely already used several of these — id and class — without thinking of them as a separate category.

Attribute	Purpose
`id`	Unique identifier for one element on the page.
`class`	One or more class names used for CSS/JS selection.
`style`	Inline CSS applied directly to the element.
`title`	Advisory text, usually shown as a tooltip on hover.
`lang`	Language of the element's content (e.g. `en`, `fr`, `hi`).
`dir`	Text direction: `ltr`, `rtl`, or `auto`.
`tabindex`	Controls keyboard focus order.
`hidden`	Hides the element from view entirely.
`contenteditable`	Lets the user edit the element's content directly in the browser.
`draggable`	Allows the element to be part of the HTML Drag and Drop API.
`spellcheck`	Suggests whether the browser should spell-check editable text.
`data-*`	Custom attributes for storing extra data, read via JavaScript.

1) id, class, and style


<div id="main-banner" class="card highlight" style="padding:10px;">
  Welcome!
</div>

id must be unique per page and is often targeted by CSS (#main-banner) or JavaScript (getElementById). class can repeat across many elements and accepts multiple space-separated values. See HTML Classes & IDs for a deeper look. style applies CSS directly but is best kept for quick tweaks — a stylesheet is easier to maintain.

2) title (Tooltip Text)


<abbr title="HyperText Markup Language">HTML</abbr>

Live demo — hover over the underlined word below:

HTML stands for a markup language used to structure web pages.

3) lang and dir


<p lang="fr">Bonjour tout le monde</p>
<p dir="rtl">مرحبا بالعالم</p>

lang helps screen readers use correct pronunciation and helps browsers offer accurate translation. dir="rtl" flips text direction for right-to-left languages like Arabic or Hebrew.

4) contenteditable, draggable, and spellcheck


<div contenteditable="true" spellcheck="true">
  Click here and start typing...
</div>

<img src="logo.png" draggable="true" alt="Logo">

Live demo — click inside the box and edit the text directly:

This text is editable. Click here and try typing something!

contenteditable turns any element into an in-place text editor — no JavaScript required for basic editing. draggable="true" makes an element a valid source for the HTML Drag and Drop API. spellcheck toggles the browser's built-in spell checker on editable content.

5) tabindex and hidden


<input type="text" tabindex="1">
<input type="text" tabindex="2">

<p id="secretMsg" hidden>You can't see me yet.</p>

Live demo — click the button to toggle the hidden attribute:

Surprise! This paragraph had the hidden attribute a moment ago.

tabindex controls the order in which elements receive keyboard focus when pressing Tab (tabindex="0" inserts an element into the natural tab order; negative values remove it). The hidden boolean attribute removes an element from the rendered page entirely, similar to display:none in CSS.

6) data-* Custom Attributes


<li data-user-id="482" data-role="admin">Sonu</li>

data-* attributes let you attach any custom information to an element without inventing non-standard attributes. The name after data- can be anything you choose, as long as it doesn't contain uppercase letters.

Tip: Every data-* attribute is readable and writable in JavaScript through the element's dataset property — for example, data-user-id becomes element.dataset.userId. This makes data-* attributes a clean way to pass server-rendered values into your client-side scripts.

Previous Next