recursal/MDN huggingface dataset:
dir
===

L'attribut universel **`dir`** est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.

Exemple interactif
------------------

Les valeurs autorisées pour cet attribut sont :

* `ltr` : qui signifie *left to right* (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)
* `rtl` : qui signifie *right to left* (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)
* `auto` : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.

**Note :** Cet attribut est obligatoire pour l'élément `<bdo>`, pour lequel l'attribut a une sémantique différente.

* La valeur de l'attribut n'est pas héritée par l'élément `<bdi>`. S'il n'est pas défini, la valeur par défaut sera `auto`.
* Cet attribut peut être surchargé par les propriétés CSS `direction` et `unicode-bidi`, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).
* La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.
* La valeur `auto` doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-dir-attribute |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels
* La propriété `HTMLElement.dir` qui reflète cet attribut
translate
=========

L'attribut universel **`translate`** est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds `Text` descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :

* `"yes"` (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;
* `"no"`, qui indique que l'élément ne doit pas être traduit.

**Note :** Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.

Exemples
--------

### HTML


```html
<label for="postcode" translate="no">
  <span translate="yes">Enter your postcode to find the nearest store</span>
</label>
<input id="postcode" type="text" />
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # attr-translate |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels
* La propriété `HTMLElement.translate` (en-US) qui reflète cet attribut.
inert
=====

L'attribut universel **`inert`** est un attribut booléen indiquant au navigateur d'ignorer l'élément en termes d'interactivité. Avec l'attribut `inert`, tous les descendants de l'élément (comme les boîtes modales créées avec `<dialog>`) sont ignorés ainsi. L'attribut `inert` indique également qu'il faut ignorer les évènements déclenchés par l'utilisatrice ou l'utilisateur, que ce soit ceux liés au focus ou provenant d'outils d'assistance.

`inert` aura les effets suivants :

* Empêche le déclenchement de l'évènement `click` lorsque la personne clique sur l'élément.
* Empêche le déclenchement de l'évènement `focus` (en-US) en empêchant que l'élément reçoive le focus.
* Masque l'élément et son contenu des outils de l'assistance en le retirant de l'arbre d'accessibilité.


```html
<body inert>
  <!-- contenu -->
</body>
```


L'attribut `inert` peut être ajouté à des sections de contenu qui ne devraient pas être interactives. Lorsqu'un élément est inerte, ses descendants le sont également et les éléments normalement interactifs comme les liens, les boutons et les contrôles de formulaire sont désactivés, car ils ne peuvent pas recevoir de clic ou de focus.

L'attribut `inert` peut également être placé sur des éléments masqués ou en dehors de l'écran. En effet, un tel élément (avec ses descendants) est retiré de la navigation au clavier et de l'arbre d'accessibilité.

**Note :** Bien qu'`inert` soit un attribut universel qui puisse être appliqué à n'importe quel élément, on l'utilisera généralement pour des sections de contenu. Pour neutraliser des contrôles de façon individuelle, mieux vaudra utiliser l'attribut HTML `disabled` et la pseudo-classe CSS `:disabled`.

Accessibilité
-------------

Par défaut, il n'existe pas de méthode visuelle pour indiquer qu'un élément (avec ses descendants) est inerte. Il faut donc indiquer clairement les parties actives et celles qui sont inertes.

Lorsqu'on fournira des indications visuelles et non-visuelles à propos de cette inertie, il faudra se rappeler que la zone d'affichage peut ne contenir qu'une partie du contenu (les personnes peuvent avoir zoomé, ou avoir un handicap visuel par exemple). Si une section est inerte et n'est pas marquée comme telle, cela pourra être source de frustration et représenter une mauvaise ergonomie.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-inert-attribute |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'élément `<dialog>`
* La propriété `HTMLElement.inert` (en-US) du DOM
* Une introduction à `inert` (en anglais)
* L'attribut `inert` arrive enfin sur le Web (en anglais)
id
==

L'attribut universel **`id`** définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

Exemple interactif
------------------

**Attention :** La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut `class` qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut **`id`**.

**Note :** L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou`'_'`, `'-'` et `'.'` peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Element.id` qui reflète cet attribut
* Les différents attributs universels
autofocus
=========

L'attribut global **`autofocus`** est un attribut booléen indiquant qu'un élément devrait recevoir le focus au chargement de la page ou lorsque l'élément `<dialog>` dont il fait éventuellement partie est affiché.


```html
<input name="q" autofocus />
```


L'attribut `autofocus` ne devrait pas être placé sur plus d'un élément au sein du document. S'il est placé sur plusieurs éléments, c'est le premier qui recevra le focus.

**Note :** L'attribut `autofocus` s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone contenteditable.

Remarques sur l'accessibilité de la fonctionnalité
--------------------------------------------------

Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut `autofocus` est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.

Concernant l'accessibilité, l'attribut `autofocus` doit être utilisé avec précaution. Placer automatiquement le focus sur un élément de formulaire peut déclencher un défilement intempestif de la page lors de son chargement. Le focus peut aussi déclencher l'ouverture intempestive du clavier virtuel sur les appareils tactiles. Enfin, il faut noter que comme les lecteurs d'écrans annoncent le libellé d'un élément de formulaire recevant le focus, aucun autre élément placé avant le libellé ne sera lu par l'outil d'assistance. D'ailleurs, les personnes utilisant un appareil disposant d'un petit écran perdront également le contexte fourni par les éléments situés au-dessus de l'élément de formulaire recevant le focus.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-fe-autofocus |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
is
==

L'attribut **`is`** est un attribut universel qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (*custom element*) défini (voir Manipuler les *custom elements* pour plus de détails).

Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement défini dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.

Exemples
--------

Cet exemple est tiré de l'exemple `word-count-web-component` (voir le résultat en *live*).


```js
// On crée une classe pour l'élément
class WordCount extends HTMLParagraphElement {
  constructor() {
    // On appelle super() pour récupérer l'initialisation
    // des classes parentes
    super();

    // Le contenu du constructeur, etc.
    ...

  }
}

// On définit le nouvel élément.
customElements.define('word-count', WordCount, { extends: 'p' });
```



```html
<p is="word-count"></p>
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # attr-is |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels
virtualkeyboardpolicy
=====================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'attribut universel **`virtualkeyboardpolicy`** est un attribut à valeur contrainte. Lorsqu'il est appliqué sur un élément qui utilise également l'attribut `contenteditable`, il contrôle le comportement du clavier virtuel qui apparaît à l'écran pour les appareils comme les tablettes, téléphones tactiles ou les autres appareils où un clavier physique pourrait ne pas être disponible.

Cet attribut peut prendre l'une des valeurs suivantes :

`auto`

Le clavier virtuel sera automatiquement affiché lorsque l'élément recevra le focus ou sera touché.

`""` (la chaîne de caractères vide)

Synonyme de `auto`.

`manual`

L'état du clavier virtuel est découplé de la gestion du focus et du toucher sur l'élément.

Spécifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Tous les attributs universels
* `HTMLElement.contentEditable` et `HTMLElement.isContentEditable`
* L'API `VirtualKeyboard` (en-US)
exportparts
===========

L'attribut universel **`exportparts`** permet de sélectionner et de mettre en forme des éléments qui existent dans des *shadow trees* (en-US), en exportant leur nom `part`.

L'arbre du *Shadow DOM* est une structure isolée ou les identifiants, les classes et les styles ne peuvent être atteints par des sélecteurs ou des requêtes appartenant au DOM classique. Pour appliquer un style à un élément qui vit dans un arbre du *Shadow DOM* avec une règle CSS créée en dehors de cet arbre, il faudra utiliser l'attribut universel `part`. Cet attribut doit être affecté à un élément présent dans l'arbre et sa valeur est un identifiant. Les règles présentes en dehors de l'arbre du *Shadow DOM* doivent utiliser le pseudo-élément CSS `::part` et celui-ci doit contenir le même identifiant comme argument.

L'attribut universel `part` rend l'élément visible sur un seul niveau de profondeur. Lorsque l'arbre du *Shadow DOM* est imbriqué, les attributs `part` ne seront visibles que du parent direct de l'arbre, mais pas des autres ancêtres. `exportparts` permet d'exporter ces informations vers ces autres niveaux.

L'attribut `exportparts` doit être placé sur un hôte auquel l'arbre du *Shadow DOM* sera attaché. La valeur de l'attribut doit être une liste de valeurs de `part`, séparées par des virgules, qui doivent être rendues disponibles au DOM en dehors de la structure courante.

Spécifications
--------------

| Specification |
| --- |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les attributs universels.
title
=====

L'attribut universel **`title`** contient un texte d'information relatif à l'élément auquel il est rattaché.

Exemple interactif
------------------

On le trouve généralement utilisé pour :

* Fournir un libellé pour les éléments `<iframe>`
* Fournir un libellé associé automatiquement à un élément `<input>`
* Fournir un libellé pour les contrôles des tableaux de données

Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).

Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments `<link>`, `<abbr>`, `<input>` et `<menuitem>`.

Titre sur plusieurs lignes
--------------------------

Un attribut `title` peut contenir plusieurs lignes. Chaque caractère `U+000A LINE FEED` (`LF`) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.

### HTML


```html
<p>
  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
  <abbr
 title="Ceci est un
 titre sur plusieurs lignes"
 >Exemple</abbr
 >.
</p>
```

### Résultat

Héritage de `title`
-------------------

Lorsqu'un élément ne possède pas d'attribut `title`, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).

Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.

### HTML


```html
<div title="Une bubulle">
  <p>
    Si vous survolez cet élément, il y aura une bulle d'information "Une
    bubulle".
  </p>
  <p title="">Et au-dessus de celui-ci, aucune info.</p>
</div>
```

### Résultat

Accessibilité
-------------

L'attribut `title` est très problématique pour :

* Les personnes qui utilisent des appareils à interface tactile
* Les personnes qui naviguent au clavier
* Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles
* Les personnes souffrant de troubles musculaires ou cognitifs.

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

* Utiliser l'attribut HTML `title` - The Paciello Group (en anglais)
* *Tooltips & Toggletips - Inclusive Components* (en anglais)
* *The Trials and Tribulations of the Title Attribute* (en anglais) - 24 Accessibility
Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-title-attribute |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels
* `HTMLElement.title` that reflects this attribute.
itemref
=======

L'attribut universel **`itemref`** permet d'associer des propriétés à un objet via `itemscope` lorsque l'élement courant n'est pas un élément descendant. `itemref` fournit une liste d'identifiants d'éléments (à ne pas confondre avec `itemid`) dont des propriétés sont définies plus loin dans le document.

L'attribut `itemref` peut uniquement être défini sur des éléments pour lesquels un attribut `itemscope` a été défini.

**Note :** L'attribut `itemref` ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.

Syntaxe
-------

### Syntaxe formelle
```

itemref
```

Exemple
-------

### HTML


```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

### Structure de données correspondante

Au format JSON-LD :


```json
{
  "@id": "amanda",
  "name": "Amanda",
  "band": {
    "@id": "b",
    "name": "Jazz Band",
    "size": 12
  }
}
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # attr-itemref |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels
* Les autres attributs universels relatifs aux microdonnées :
    + `itemid`
    + `itemprop`
    + `itemscope`
    + `itemtype`
data-\*
=======

Les attributs universels **`data-*`** forment une classe d'attributs, appelés attributs de données (*data attributes*). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts.

Exemple interactif
------------------

 De tels attributs sont disponibles via l'interface `HTMLElement` de l'élément pour lequel l'attribut est utilisé. La propriété `HTMLElement.dataset` permet d'accéder à l'attribut.
 Ici, l'astérisque (`*`) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

* Le nom ne peut pas commencer par `xml`, quelle que soit la casse utilisée pour les différentes lettres
* Le nom ne doit pas contenir de point-virgule (`U+003A`)
* Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (`A` à `Z`).

La propriété `HTMLElement.dataset` est un objet `StringMap` et la valeur d'un attribut de donnée nommé `data-test-valeur` sera accessible via `HTMLElement.dataset.testValeur` car les tirets (`U+002D`) sont remplacés par la majuscule de la lettre suivante (CamelCase).

### Utilisation

Lorsqu'on ajoute des attributs de données `data-*`, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un *sprite* d'un vaisseau spatial dans un jeu peut être modélisé via un élément `<img>` auquel on associe un attribut `class` et plusieurs attributs de données sous la forme `data-*`.


```html
<img class="spaceship cruiserX3" src="shipX3.png"
 data-ship-id="324" data-weapons="laserI laserII"
 data-x="414354" data-y="85160" data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()">
</img>
```


Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # attr-data-\* |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels
* La propriété `HTMLElement.dataset` qui permet d'accéder à ces valeurs et de les modifier.
draggable
=========

L'attribut universel **`draggable`** est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API *Drag & Drop* ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :

* `true` : qui indique que l'élément peut être déplacé à la souris
* `false` : qui indique que l'élément ne peut pas être déplacé à la souris

Si l'attribut n'est pas défini, la valeur par défaut sera `auto` : le comportement de l'élément sera celui spécifié par défaut par le navigateur.

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite `true` ou `false`. La notation raccourcie `<img draggable>` (utilisant uniquement le nom de l'attribut) ne fonctionnera pas :


```html
<label draggable>Label exemple</label>
```


En revanche, on pourra correctement utiliser :


```html
<label draggable="true">Label exemple</label>
```


Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour `ondragstart` (en-US) afin de faire fonctionner le glisser-déposer. Cela est illustré dans cet exemple.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les différents attributs universels