Input HarborISSUE #43 of 46

attribute reference · global attributes

FormaVSCaptain Invalid Input

Forma saysGlobal attributes work on any element: id, class, style, title, hidden, tabindex, contenteditable, and data-*.

Some attributes aren't tied to one element — they apply everywhere. The everyday set: id, class, style, title, lang, hidden. The powerful ones: data-* (store custom data read via element.dataset), contenteditable (make anything editable), tabindex (control focus order), draggable, spellcheck.

The data-* attributes are the sanctioned way to attach your own info to elements without inventing non-standard attributes — JS reads them straight off dataset.

Power-ups you unlock

Global attributes apply to any element
data-* stores custom data, read via element.dataset
contenteditable makes content directly editable
tabindex controls focus order; hidden hides an element

Captain Invalid Input attacks — common mistakes

Inventing custom attributes instead of using data-*
tabindex values above 0 (creates a confusing focus order)
Trusting contenteditable content without sanitizing it

Boss battleStore a value in a data-* attribute and read it via dataset in JS, then make a paragraph contenteditable.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <div id="box" data-user-id="42" data-role="admin">read my data attributes →</div>
  <p contenteditable="true" style="border:1px dashed #2a1d4a;padding:8px">edit me directly</p>
  <pre id="out" style="color:#8aff9d"></pre>
  <script>
    const b = document.getElementById('box');
    document.getElementById('out').textContent =
      'id=' + b.dataset.userId + '  role=' + b.dataset.role;
  </script>
</body></html>

▶ Open the interactive comic issue

‹ Tag Reference · The Full Element List Event Reference · Every Browser Event ›