Det er et mønster jeg har sett i kodebaser overalt: utviklere trenger å knytte tilpassede data til et DOM-element, så de koder det inn i klassenavn (class="item item-42 status-active"), lagrer det i skjulte inputfelt, eller legger til et JavaScript-objekt indeksert etter et ID. Alt dette er omveier. data-*-attributter er det riktige verktøyet for jobben, og de er bygget rett inn i HTML Living Standard.

Hva data-*-attributter er

Spesifikasjonen for data-*-attributter lar deg knytte vilkårlige tilpassede nøkkel-verdi-data til et hvilket som helst HTML-element. Navnet må starte med data-, etterfulgt av minst ett tegn. Verdien er alltid en streng.

html
<!-- data-* attributes: custom data right on the element -->
<button
  data-action="delete"
  data-item-id="284"
  data-item-name="Summer Newsletter"
  data-confirm="true"
>
  Delete
</button>

<li
  data-product-id="SKU-9921"
  data-price="29.99"
  data-in-stock="true"
  data-category="electronics"
>
  Wireless Keyboard
</li>

De påvirker ikke renderingen i det hele tatt. De legger ikke til klasser, stiler eller layoutadferd. De er rent metadata, lesbare av JavaScript og CSS, ignorert av nettleserens rendering-motor.

Navnekonvensjoner

Dataattributtnavn er ufølsomme for store/små bokstaver i HTML (spesifikasjonen gjør dem om til små bokstaver), og de mappes til camelCase i JavaScripts dataset-API. Konverteringen skjer automatisk:

html
<!-- HTML attribute names use kebab-case -->
<div
  data-user-id="42"
  data-first-name="Alice"
  data-account-type="premium"
  data-last-login-at="2026-04-16T09:00:00Z"
>
</div>
js
// JavaScript dataset uses camelCase (automatic conversion)
const el = document.querySelector('div');

el.dataset.userId;       // "42"       (from data-user-id)
el.dataset.firstName;    // "Alice"    (from data-first-name)
el.dataset.accountType;  // "premium"  (from data-account-type)
el.dataset.lastLoginAt;  // "2026-04-16T09:00:00Z" (from data-last-login-at)

Regelen: bindestreker i HTML blir til camelCase i JavaScript. data-item-count → dataset.itemCount. Denne konverteringen er toveis — å skrive til dataset.itemCount oppdaterer data-item-count i DOM.

Lese og skrive med dataset

Egenskapen dataset er et DOMStringMap — det oppfører seg som et vanlig JavaScript-objekt for lesing og skriving, og DOM oppdateres live:

js
const card = document.querySelector('.product-card');

// Reading
const productId  = card.dataset.productId;  // "SKU-9921"
const price      = parseFloat(card.dataset.price); // 29.99 (remember: always a string, parse as needed)
const inStock    = card.dataset.inStock === 'true'; // convert string to boolean

// Writing (updates the DOM attribute in real time)
card.dataset.price   = '24.99';       // sets data-price="24.99"
card.dataset.inStock = 'false';       // sets data-in-stock="false"
card.dataset.badgeText = 'Sale';      // adds data-badge-text="Sale" (new attribute)

// Deleting
delete card.dataset.badgeText;        // removes data-badge-text from the element

// Checking existence
if ('productId' in card.dataset) {
  console.log('This is a product card');
}
Husk: Alle data-*-verdier er strenger i HTML. Parse alltid tall med parseInt() eller parseFloat(), og boolske verdier ved å sammenligne med strengen 'true'. Å behandle dem som sin opprinnelige type uten parsing er en vanlig kilde til feil.

Hendelsesdelegering med data-*-attributter

Et av de mest praktiske bruksområdene for dataattributter: hendelsesdelegering. I stedet for å knytte individuelle hendelseslyttere til dusinvis av knapper, knytt én lytter til et foreldreelement og les handlingen fra elementets dataset:

html
<ul id="task-list">
  <li data-task-id="101" data-status="pending">
    Write article draft
    <button data-action="complete" data-task-id="101">Complete</button>
    <button data-action="delete"   data-task-id="101">Delete</button>
  </li>
  <li data-task-id="102" data-status="pending">
    Review pull request
    <button data-action="complete" data-task-id="102">Complete</button>
    <button data-action="delete"   data-task-id="102">Delete</button>
  </li>
</ul>
js
const taskList = document.getElementById('task-list');

// One listener handles all buttons — even ones added dynamically later
taskList.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-action]');
  if (!button) return; // click was somewhere else in the list

  const action = button.dataset.action;
  const taskId = button.dataset.taskId;

  switch (action) {
    case 'complete':
      markTaskComplete(taskId);
      break;
    case 'delete':
      deleteTask(taskId);
      break;
  }
});

function markTaskComplete(id) {
  const item = taskList.querySelector(`li[data-task-id="${id}"]`);
  item.dataset.status = 'complete'; // CSS can react to this change
  console.log(`Task ${id} marked complete`);
}

function deleteTask(id) {
  const item = taskList.querySelector(`li[data-task-id="${id}"]`);
  item.remove();
  console.log(`Task ${id} deleted`);
}

Dette mønsteret skalerer til et vilkårlig antall elementer. event.target.closest() går opp i DOM fra det klikkede elementet for å finne nærmeste matchende forgjenger — så å klikke på knappteksten (en underordnet tekstnode) finner likevel knappen. Det er renere enn å sammenligne event.target.tagName og mer pålitelig enn å sjekke nøyaktige elementmatcher.

Bruke data-* med CSS attr()

CSS kan lese dataattributtverdier ved hjelp av funksjonen attr() i content-deklarasjoner. Dette er nyttig for tooltips, merker og etiketter som kommer fra data heller enn markup:

html
<!-- Tooltip text from data attribute -->
<span class="tooltip" data-tip="Saves automatically every 30 seconds">
  Auto-save enabled
</span>

<!-- Status badge text from data attribute -->
<li class="task" data-status="in-progress">Review PR #412</li>
<li class="task" data-status="complete">Write unit tests</li>
css
/* Tooltip using attr() in CSS */
.tooltip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #1a1a2e;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip:hover::after,
.tooltip:focus::after {
  opacity: 1;
}

/* Status badge via attr() */
.task::before {
  content: '[' attr(data-status) '] ';
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
}

.task[data-status="complete"] { text-decoration: line-through; color: #6b7280; }
.task[data-status="in-progress"] { color: #d97706; }

Merk at attr() for øyeblikket bare fungerer i content-egenskaper — du kan ikke bruke den for width, color eller andre CSS-egenskaper ennå (selv om CSS Values Level 5-spesifikasjonen arbeider med å utvide dette). For nå er attributtselektorer ([data-status="complete"]) den praktiske måten å variere stiler basert på dataattributtverdier.

Et komplett interaktivt eksempel — trekkspill med data-*

Her er en ekte trekkspill-komponent drevet utelukkende av dataattributter for tilstand. Ingen klassebytte for adferd, bare dataattributter — klasser forblir kun for styling:

html
<div id="faq-accordion" role="list">
  <div class="accordion-item" role="listitem" data-open="false">
    <button
      class="accordion-trigger"
      data-target="faq-1"
      aria-expanded="false"
      aria-controls="faq-1"
    >
      What is the difference between article and section?
    </button>
    <div id="faq-1" class="accordion-panel" data-panel hidden>
      <p>An <code>article</code> is self-contained content that could stand alone.
      A <code>section</code> is a thematic grouping within a larger context.</p>
    </div>
  </div>

  <div class="accordion-item" role="listitem" data-open="false">
    <button
      class="accordion-trigger"
      data-target="faq-2"
      aria-expanded="false"
      aria-controls="faq-2"
    >
      When should I use ARIA roles?
    </button>
    <div id="faq-2" class="accordion-panel" data-panel hidden>
      <p>Only when no native HTML element conveys the same semantics.
      Native elements should always be preferred.</p>
    </div>
  </div>
</div>
js
const accordion = document.getElementById('faq-accordion');

accordion.addEventListener('click', (event) => {
  const trigger = event.target.closest('.accordion-trigger');
  if (!trigger) return;

  const targetId = trigger.dataset.target;
  const panel    = document.getElementById(targetId);
  const item     = trigger.closest('.accordion-item');
  const isOpen   = item.dataset.open === 'true';

  // Toggle this item
  item.dataset.open       = isOpen ? 'false' : 'true';
  trigger.ariaExpanded    = isOpen ? 'false' : 'true';
  panel.hidden            = isOpen;
});
css
.accordion-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1rem;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Arrow rotates based on data-open state */
.accordion-item[data-open="false"] .accordion-trigger::after {
  content: '▼';
  transition: transform 0.2s;
}

.accordion-item[data-open="true"] .accordion-trigger::after {
  content: '▲';
}

.accordion-panel {
  padding: 0 1rem 1rem;
}

.accordion-panel[hidden] {
  display: none;
}

Tilstanden lever i data-open på containeren. CSS leser det attributtet for å rotere pil-indikatoren. JavaScript bytter attributtet og administrerer aria-expanded og hidden. Hvert lag gjør nøyaktig én jobb, og de kombineres rent.

Ytelses- og tilgjengelighetsmerkader

  • Ytelse. data-*-attributter er en del av DOM og å lese dem er veldig raskt — i praksis det samme som å lese et hvilket som helst annet attributt. For ekstremt varme kodestier (tusenvis av lesinger per frame) er et JavaScript Map indeksert etter elementreferanse raskere. Men for typisk UI-kode er dataset utmerket.
  • Data-* er for skript, ikke semantikk. Disse attributtene er usynlige for skjermlesere med mindre du eksplisitt knytter dem til ARIA-tilstander. Ikke bruk data-role eller data-label for å forsøke å formidle semantikk — bruk riktige HTML-elementer og WAI-ARIA-attributter for det.
  • Sikkerhet. Legg aldri sensitiv data (tokens, passord, personopplysninger) i dataattributter. De er synlige i nettleserens elementinspektør og kan leses av hvilket som helst JavaScript på siden, inkludert tredjepartsskript.
  • Spørringer. Du kan velge elementer etter dataattributt med CSS-attributtselektorer: document.querySelectorAll('[data-action="delete"]') — dette fungerer akkurat som forventet og er veldig nyttig for masseoperasjoner.

Verktøy for HTML-utvikling

Når du arbeider med HTML, holder HTML Formatter din attributttunge markup lesbar, og HTML Validator fanger feil som duplikerte ID-er som kan bryte aria-controls-assosiasjoner. For live-redigering og forhåndsvisning av komponentmønstre som trekkspillet ovenfor, lar HTML Editor deg se endringer i sanntid uten et byggesteg.

Oppsummering

Dataattributter er den rene, offisielle måten å knytte tilpassede metadata til DOM-elementer. De slår klassenavns-hacks, skjulte inputfelt og eksterne JavaScript-kart i de fleste brukstilfeller. dataset-API-et gjør det enkelt å lese og skrive dem, camelCase-konverteringen er automatisk, og de kombineres naturlig med CSS-attributtselektorer og hendelsesdelegeringsmønstre. Husk bare: dataattributter er for skriptlesbar metadata, ikke for tilgjengelighetssemantikk — det er hva ARIA er til.

← All HTML articles Browse all categories →