---
title: data-*
slug: Web/HTML/Global_attributes/data-*
tags:
  - Global attributes
  - HTML
  - Reference
translation_of: Web/HTML/Global_attributes/data-*
---
<p class="note">{{HTMLSidebar("Global_attributes")}}</p>

<p>Els <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributs globals</a> <strong>data-*</strong> formen una classe d'atributs anomenats <strong>atributs de dades personalitzades</strong>, que permeten que la informació propietària s'intercanviï entre l' <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" title="en/HTML">HTML</a> i la seva representació <a href="https://developer.mozilla.org/en-US/docs/DOM" title="en/DOM">DOM</a> mitjançan scripts. Totes aquestes dades personalitzades estan disponibles a través de la interfície {{domxref ("HTMLElement")}} de l'element en el qual s'estableix l'atribut. La propietat {{domxref ("HTMLElement.dataset")}} li dóna accés. El * pot ser reemplaçat per qualsevol nom que segueix <a href="http://www.w3.org/TR/REC-xml/#NT-Name">la regla de producció de noms XML</a> amb les següents restriccions:</p>

<ul>
 <li>el nom no ha de començar amb <code>xml</code>, qualsevol que sigui el cas que s'utilitzi per a aquestes lletres;</li>
 <li>el nom no ha de contenir cap punt i coma (U+003A);</li>
 <li>el nom no ha de contenir majúscules de l'A a la Z.</li>
</ul>

<p>Recordeu que la propietat {{domxref ("HTMLElement.dataset")}} és un {{domxref ("DOMStringMap")}}, i el nom de l'atribut de dades personalitzades <em>data-test-value</em> serà accessible a través de <code>HTMLElement.dataset.testValue</code> ( o <code>HTMLElement.dataset["testValue"]</code> ) com qualsevol guió (<code>u+002D</code>) se substitueix la següent lletra en majúscula, convertint el nom a (CamelCase).</p>

<h3 id="Ùs">Ùs</h3>

<p>Mitjançant la incorpoarció d'atributs <strong>data-</strong>*, fins i tot els elements HTML ordinaris poden convertir-se en programes-objectes força complexos i potents. Per exemple, una nau espacial "<a href="https://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29">sprite</a>" en un joc podria ser un simple element {{HTMLElement ("img")}} amb un atribut <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> i diversos atributs data- *:</p>

<pre>&lt;img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324"   data-weapons="laserI laserII"   data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()"
&lt;/img&gt;
</pre>

<p id="Specifications">(Veure més <em><a href="https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">aquí</a>)</em></p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Sense canvis des de l'última instantània, {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Instantània de {{SpecName('HTML WHATWG')}}, sense canvis des de {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Instantània de {{SpecName('HTML WHATWG')}}, definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoDesktop(6) }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoMobile(6) }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li>Tots els <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</li>
 <li>La propietat {{domxref ("HTMLElement.dataset")}} permet accedir i modificar aquests valors.</li>
</ul>