Global Attributes

Global Attributes

Global attributes work on EVERY element. They're the superpowers every tag can have!

id and class

• id: a unique name for ONE element. Only one element can have it. Great for linking to a spot with #.
• class: a shared name for MANY elements. Perfect for styling a group.

<p id="intro">I am unique.</p>
<p class="highlight">Me too!</p>
<p class="highlight">And me!</p>

style

Inline CSS right on the element.

<p style="color: blue;">Blue text!</p>

title

Extra info shown in a tooltip when you hover.

<p title="I'm a secret message!">Hover over me</p>

lang and dir

• lang: the language of the content.
• dir: text direction: ltr (left-to-right) or rtl (right-to-left).

<p lang="fr">Bonjour!</p>
<p dir="rtl">مرحبا</p>

hidden

Hides the element (and removes it from screen readers too).

<p hidden>You can't see me.</p>

tabindex

Controls tab order for keyboard users.

• tabindex="0": can be focused with Tab.
• tabindex="-1": can't be tabbed to, but can be focused by script.
• tabindex="1": a custom tab order (use carefully!).

<button tabindex="0">Focusable</button>

data-*: your own data

You can store your OWN data with the data- prefix. JavaScript can read it easily.

<button data-size="large" data-color="green">Big green button</button>

const btn = document.querySelector("button");
console.log(btn.dataset.size); // "large"

contenteditable

Lets the visitor edit the text right on the page!

<p contenteditable="true">Try editing me!</p>

draggable

Lets an element be dragged around.

<img src="icon.png" alt="Drag me" draggable="true">

spellcheck

Turns spell checking on/off for an element.

<textarea spellcheck="true"></textarea>

More useful ones

• autofocus: focus this element when the page loads.
• autocapitalize: control auto-capitalization on phones.
• autocorrect: control the phone's auto-correct.
• inputmode: pick the phone keyboard.
• enterkeyhint: pick the label on the phone's Enter key.
• inert: make an area unclickable and un-focusable.
• accesskey: a keyboard shortcut to the element.
• translate: no stops translation tools from translating it.
• nonce: a one-time security token (used with Content Security Policy).
• anchor: positions an element relative to another.
• popover: makes an element a pop-up panel.
• slot: fills a slot in a web component.
• part/exportparts: for styling web component internals.
• is: says an element is a customized built-in element.
• virtualkeyboardpolicy: controls the on-screen keyboard for contenteditable areas.
• writingsuggestions: controls browser writing suggestions (new).

Microdata attributes

itemscope, itemtype, itemprop, itemid, itemref give computers extra meaning (like marking a review or a recipe). Search engines use them.

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Ada Lovelace</span>
</div>

TL;DR

• id = unique name; class = shared name.
• style, title, lang, dir, hidden, tabindex = everyday tools.
• data-* stores your own values.
• contenteditable, draggable, spellcheck add abilities.
• Microdata attributes (itemscope, itemprop, ...) add meaning for machines.