## Introduction

Les éléments HTML peuvent être dotés d'attributs qui servent à tout, depuis l'ajout d'informations sur l'accessibilité jusqu'au contrôle stylistique.

```html


<div class="names" role="region" aria-label="Names"></div>
```

Ce qui est _déconseillé_, c'est d'_inventer_ vos propres attributs, ou de réaffecter des attributs existants pour une fonctionnalité sans rapport.

```html

<div highlight="true"></div>


<div width="large"></div>
```

C'est pas bien, et pour des tas de raisons. Votre HTML devient invalide, ce qui peut ne pas avoir de conséquences négatives réelles, mais vous prive de ce sentiment rassurant et flou d'avoir un HTML valide. La raison la plus convaincante est que le **HTML est un langage vivant** et ce n'est pas parce que des attributs et des valeurs ne font rien aujourd'hui qu'ils ne feront rien demain.

Bonne nouvelle cependant : vous pouvez créer vos propres attributs. Il vous suffit de les préfixer avec `data-*` et ensuite vous êtes libre de faire ce qui vous plaît&nbsp;!

## Syntaxe

Il est très pratique de pouvoir créer nos propres attributs HTML et d'y placer nos propres informations. Et c'est possible&nbsp;! c'est même exactement ce que sont les **data attributes** ([attributs de données](https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes)). Ils sont comme ceci&nbsp;:

```html

<div data-foo></div>


<div data-size="large"></div>


<li data-prefix="Attention au HTML ici."></li>
<li>
  
  <aside data-some-long-attribute-name><aside></aside></aside>
</li>
```

Les data attributes sont souvent appelés attributs `data-*`, car ils sont toujours formatés de cette façon. Le mot `data`, puis un tiret `-`, puis un autre texte que vous pouvez inventer.

### Pouvez-vous utiliser l'attribut data seul ?

```html
<div data=""></div>
```

Cela ne va probablement pas faire de mal, mais vous n'obtiendrez pas l'API JavaScript que nous verrons plus tard dans ce guide. Vous vous créez essentiellement un attribut pour vous-même, ce qui, comme je l'ai mentionné dans l'introduction, est _déconseillé_.

#### Ce qu'il ne faut pas faire avec les data attributes

Stockez du contenu qui doit être accessible. Si le contenu doit être vu ou lu sur une page, ne le mettez pas seulement dans des data attributes, mais assurez-vous que ce contenu se trouve quelque part dans le contenu HTML.

```html

<div data-name="Chris Coyier"></div>


<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>
```

Voici plus d'informations sur le [masquage des choses](/articles/cacher-des-elements-avec-css).

## Stylisation avec des data attributes

CSS peut [sélectionner des éléments HTML sur la base d'attributs](https://css-tricks.com/almanac/selectors/a/attribute/) et de leurs valeurs.

```css
/* Sélectionner tout élément ayant cet attribut de données et cette valeur */
[data-size='large'] {
  padding: 2rem;
  font-size: 125%;
}

/* Vous pouvez l'étendre à un élément, une classe ou n'importe quoi d'autre */
button[data-type='download'] {
}
.card[data-pad='extra'] {
}
```

Cela peut être convaincant. Les principaux _hooks_ de style en HTML/CSS, ce sont les **classes**, et bien que les classes soient excellentes (elles ont une spécificité moyenne et de belles méthodes JavaScript via `classList`), un élément en est doté ou non, c'est l'un ou l'autre, (essentiellement _activé_ ou _désactivé_). Avec les attributs `data-*`, vous obtenez cette capacité d'activation/désactivation, **_et_** la possibilité de sélectionner en fonction de la valeur qu'il possède au même niveau de spécificité.

```css
/* Sélectionne si l'attribut est présent du tout */
[data-size] {
}

/* Sélectionne si l'attribut a une valeur particulière */
[data-state='open'],
[aria-expanded='true'] {
}

/* Sélecteur "Commence par", ce qui signifie que cela correspond à "3" ou à tout ce qui commence par 3, comme "3.14" */
[data-version^='3'] {
}

/* "Contient" signifie que la valeur contient la chaîne de caractères n'importe où à l'intérieur */
[data-company*='google'] {
}
```

### La spécificité des sélecteurs d'attributs

C'est exactement la même chose qu'une classe. Nous pensons souvent à la spécificité comme à une valeur en quatre parties&nbsp;:

style en ligne, IDs, classes/attributs, balises.

Ainsi, un sélecteur d'attribut seul est **0, 0, 1, 0**. Un sélecteur comme celui-ci&nbsp;:

```css
div.card[data-foo='bar'] {
}
```

... serait **0, 0, 2, 1** — le 2 est dû au fait qu'il y a une classe (`.card`) et un attribut (`[data-foo="bar"]`), et le 1 est dû au fait qu'il y a une balise (`div`).



<figure role="group"><img src="/images/specificity-selector.webp" alt="schéma montrant la spécificité : une div (spécificité = 1) avec une classe (specificité = 1) et un attribut de données avec une valeur (spécificité = 1)"/><figcaption>Illustration d'un sélecteur CSS incluant un attribut data.</figcaption></figure>

Les sélecteurs d'attributs ont moins de spécificité qu'un ID, plus qu'un élément/balise, et la même chose qu'une classe.

### Valeurs d'attributs insensibles à la casse

Au cas où vous auriez besoin de corriger d'éventuelles incohérences de capitalisation dans vos data attributes, le sélecteur d'attribut dispose d'une variante insensible à la casse pour cela.

```html

[data-state="open" i] { }
```

C'est le petit `i` à l'intérieur du sélecteur entre crochets.

### Utilisation visuelle des data attributes

CSS vous permet d'extraire la valeur de l'attribut de données et de l'afficher si nécessaire.

```css
/* <div data-emoji="✅"> */

[data-emoji]::before {
  content: attr(data-emoji); /* Retourne '✅' */
  margin-right: 5px;
}
```

### Exemple de cas d'utilisation du style

Vous pourriez utiliser des data attributes pour spécifier le nombre de colonnes que vous souhaitez pour un conteneur de grille.

```html
<div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_rNaEvgp" src="//codepen.io/chriscoyier/embed/rNaEvgp?height=500&amp;theme-id=light&amp;slug-hash=rNaEvgp&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/chriscoyier/pen/rNaEvgp">
  Data Attribute Based Columns</a> de chriscoyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Accéder aux data attributes en JavaScript

Comme tout autre attribut, vous pouvez accéder à la valeur avec la méthode générique `getAttribute`.

```js
let value = el.getAttribute('data-state')

// Vous pouvez également définir la valeur.
// Returns data-state="collapsed"
el.setAttribute('data-state', 'collapsed')
```

Mais les data attributes ont également leur propre API spéciale. Admettons que vous ayez un élément avec plusieurs data attributes (ce qui est tout à fait ok) :

```html
<span
  data-info="123"
  data-index="2"
  data-prefix="Dr. "
  data-emoji-icon="🏌️♀️"
></span>
```

Si vous avez une référence à cet élément, vous pouvez définir (_set_) et obtenir (_get_) les attributs comme suit :

```js
// GET
span.dataset.info // 123
span.dataset.index // 2

// SET
span.dataset.prefix = 'M. '
span.dataset.emojiIcon = '🎪'
```

Notez l'utilisation du camelCase dans la dernière ligne. Elle convertit automatiquement les attributs de style kebab en HTML, comme `data-this-little-piggy`, en style camelCase en JavaScript, comme `dataThisLittlePiggy`.

Cette API n'est sans doute pas aussi agréable que [`classList`](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) avec ses méthodes claires d'ajout, de suppression, de basculement (_toggle_) et de remplacement, mais c'est mieux que rien.

Vous avez également accès aux ensembles de données en ligne :

```html
<img src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
```

### Données JSON à l'intérieur des data attributes

```html
<ul>
  <li
    data-person='
    {
      "nom" : "Chris Coyier",
      "job" : "Personne Web"
    }
  '
  ></li>
</ul>
```

Hé, pourquoi pas ? Ce n'est qu'une chaîne de caractères et il est possible de la formater en [JSON](/articles/json-pour-les-debutants) valide (attention aux guillemets et autres). Vous pouvez extraire ces données et les parser selon vos besoins.

```js
const el = document.querySelector('li')

let json = el.dataset.person
let data = JSON.parse(json)

console.log(data.name) // Chris Coyier
console.log(data.job) // Personne Web
```

### Cas d'utilisation de JavaScript

Le concept est que vous pouvez utiliser les data attributes pour mettre dans le HTML des informations auxquelles JavaScript peut avoir besoin d'accéder pour faire certaines choses.

Un cas courant serait lié à la fonctionnalité de la base de données. Disons que vous avez un bouton "J'aime" :

```html
<button data-id="435432343">♡</button>
```

Ce bouton pourrait être doté d'un _click handler_ qui exécute une requête Ajax vers le serveur pour incrémenter le nombre de _j'aime_ dans une base de données à chaque clic. Il sait quel enregistrement mettre à jour car il l'obtient du data attribute.

### Spécifications

- [Sélecteurs niveau 4](https://drafts.csswg.org/selectors-4/#attribute-selectors) (projet)
- [Sélecteurs niveau 3](https://drafts.csswg.org/selectors-3/#attribute-selectors) (recommandé)
- [Sélecteurs de niveau 2](https://www.w3.org/TR/CSS2/selector.html#attribute-selectors), révision 1 (définition initiale)

La Cascade

json

Ressources complémentaires en français

Ressources complémentaires en anglais

Outils