recursal/MDN huggingface dataset:
<br> : l'élément de saut de ligne
=================================

L'élément HTML **`<br>`** crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).

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

Comme vous pouvez le voir dans l'exemple ci-dessus, un élément `<br>` est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le `<br>` recommence au début de la ligne suivante du bloc de texte.

**Note :** Attention, `<br>` ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété CSS `margin` sur l'élément HTML `<p>`.

Attributs
---------

Comme pour tous les éléments, on peut utiliser les attributs universels.

### Attributs obsolètes

**`clear`** 
Obsolète

Cet attribut indique où commencer la prochaine ligne après le saut de ligne.

Mise en forme avec CSS
----------------------

`<br>` n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.

Bien qu'il soit possible d'appliquer une marge (`margin` sur les éléments `<br>` afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété `line-height`.

Exemples
--------

### Simple rupture de ligne

Dans l'exemple suivant, nous utilisons des éléments `<br>` pour créer des sauts de ligne entre les différentes lignes d'une adresse postale :


```html
Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />
```


#### Résultat

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

Utiliser une suite d'éléments `<br>` pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.

Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS `margin`.

Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de flux,
 contenu phrasé.
  |
| Contenu autorisé | 
 Aucun, c'est un
 élément vide.
  |
| Omission de balise | 
 Cet élément doit avoir une balise de début et ne doit pas avoir de
 balise de fin. Pour les documents XHTML, on écrira cet élément
 `<br/>`.
  |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé.
  |
| Rôle ARIA implicite | Pas de rôle correspondant |
| Rôles ARIA autorisés | `none`,
 `presentation` |
| Interface DOM | `HTMLBRElement` |

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

| Specification |
| --- |
| HTML Standard # the-br-element |

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

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

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

* L'élément `<address>`
* L'élément `<p>`
* L'élément `<wbr>`
<code> : l'élément de code en ligne
===================================

L'élément HTML **`<code>`** représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (*monospace*) afin d'afficher le texte contenu dans cet élément.

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

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de flux,
 contenu phrasé,
 contenu tangible.
  |
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | 
 Aucune, la balise d'ouverture et la balise de fermeture sont
 obligatoires.
  |
| Parents autorisés | 
 Tout élément acceptant du
 contenu phrasé.
  |
| Rôle ARIA implicite | Pas de rôle correspondant |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLElement`. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait
 l'interface
 `HTMLSpanElement`
 pour cet élément.
  |

Attributs
---------

Cet élément prend uniquement en charge les attributs universels.

Exemples
--------

Un paragraphe de texte qui contient `<code>` :


```html
<p>
  La fonction <code>selectAll()</code> met en évidence tout le texte du champ de
  saisie afin que l'utilisateur puisse, par exemple, le copier ou le supprimer.
</p>
```

### Résultat

Notes
-----

Pour représenter plusieurs lignes de code, enveloppez l'élément `<code>` dans un élément `<pre>`. L'élément `<code>` en lui-même ne représente qu'une seule phrase de code ou ligne de code.

Une règle CSS peut être définie pour le sélecteur `code` afin de remplacer la fonte par défaut du navigateur. Les préférences définies par l'utilisateur peuvent avoir la priorité sur la règle CSS spécifiée.

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

| Specification |
| --- |
| HTML Standard # the-code-element |

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

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

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

* L'élément `<samp>`
* L'élément `<kbd>`
* L'élément `<var>`
* L'élément `<pre>`
===

L'élément HTML **`
`** permet d'afficher du texte qui est barré car il n'est plus pertinent ou car il est obsolète. `
` ne doit pas être employé pour indiquer des éditions dans un document (on utilisera alors `<del>` et `<ins>`).

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

Attributs
---------

Cet élément inclut uniquement les attributs universels.

Exemples
--------

### HTML


```html
<p>
Le plat du jour : saumon à la hollandaise
 <em>plus disponible</em></p>
```

### Résultat

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

Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément `s`. On peut le rendre annonçable via la propriété CSS `content` et grâce aux pseudo-éléments `::before` et `::after`.


```css
s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [Début du texte rayé]";
}

s::after {
  content: " [Fin du texte rayé] ";
}
```


Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été rayé.

* *Short note on making your mark (more accessible) | The Paciello Group* (en anglais)
* *Tweaking Text Level Styles | Adrian Roselli* (en anglais)
Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu phrasé
 ou
 contenu de flux.
  |
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé.
  |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # the-s-element |

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

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

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

* Obsolète
 `<strike>` qui était un ancien synonyme de `
`, désormais obsolète et qui ne doit plus être utilisé sur le Web
* `<del>` qui est utilisé afin d'indiquer des données ou des portions de texte qui ont été supprimées
* La propriété CSS `text-decoration-line` qui permet de contrôler l'aspect de la ligne utilisée sur le contenu de l'élément `
`
<dt> : l'élément pour le terme d'une description
================================================

L'élément HTML **`<dt>`** identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément `<dl>` et est généralement suivi d'un élément `<dd>`. Plusieurs éléments `<dt>` qui se suivent indiqueront qu'ils partagent la définition/description fournie par le prochain élément `<dd>`.

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

|  |  |
| --- | --- |
| Catégories de contenu | Aucune. |
| Contenu autorisé | Contenu de flux, sans élément
 `<header>`,
 `<footer>`, sans contenu sectionnant et sans titre parmi les descendants.
  |
| Omission de balises | 
 Cet élément doit avoir une balise ouvrante. La balise de fin peut être
 omise si l'élément est immédiatement suivi par un autre élément
 `<dd>` ou par un élément `<dt>` ou s'il
 n'y a plus de contenu au sein de l'élément parent.
  |
| Parents autorisés | 
 L'élement doit être situé avant un élément
 `<dt>` ou
 `<dd>` et à
 l'intérieur d'un élément
 `<dl>`. Sinon (selon le WHATWG), au sein d'un élément
 `<div>`
 situé dans un élément
 `<dl>`.
  |
| Rôle ARIA implicite | term |
| Rôles ARIA autorisés | `listitem (en-US)` |
| Interface DOM | `HTMLElement`
 Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface
 `HTMLSpanElement`
 pour cet élément.
  |

Attributs
---------

On peut employer les attributs universels sur cet élément.

Exemples
--------

Pour des exemples, voir les exemples fournis pour l'élément `<dl>`.

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

| Specification |
| --- |
| HTML Standard # the-dt-element |

Compatiblité des navigateurs
----------------------------

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

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

* L'élément `<dd>`
* L'élément `<dl>`
<output> : l'élément de sortie
==============================

L'élément HTML **`<output>`** représente un conteneur dans lequel un site ou une application peut injecter le résultat d'un calcul ou d'une action utilisateur.

Attributs
---------

Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

`for`

Une liste d'identifiants d'autres éléments, séparés par des espaces, qui ont joué un rôle dans le calcul (en tant que valeurs d'entrée ou autrement).

`form`

L'identifiant d'un élément de formulaire (`<form>`) auquel cet élément est rattaché. La valeur de cet attribut doit être un identifiant (`id`) d'un formulaire qui fait partie du même document. Cet attribut n'est pas nécessaire si l'élément `<output>` est situé dans un formulaire ou si l'élément `<output>` n'est pas du tout associé à un formulaire. Cet attribut permet ainsi de placer l'élément `<output>` où on veut dans le document, pas nécessairement comme descendant d'un formulaire.

`name`

Le nom de l'élément, utilisé pour identifier l'élément `<output>` lors de l'envoi du formulaire.

Exemples
--------

Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 ainsi qu'un élément `<input>` dans lequel on peut saisir un deuxième nombre. Les deux nombres sont additionnés et le résultat est affiché dans l'élément `<output>` et est actualisé lorsqu'une des deux valeurs est modifiée.

### HTML


```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result">60</output>
</form>
```

### Résultat

Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de flux,
 contenu phrasé,
 contenu associé au formulaire (énuméré, étiquetable,
réinitialisable),
 contenu tangible.
  |
| Contenu autorisé | Contenu phrasé. |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé.
  |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLOutputElement` (en-US) |

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

| Specification |
| --- |
| HTML Standard # the-output-element |

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

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

**Note :** La plupart des navigateurs implémente cet élément comme s'il avait l'attribut `aria-live` par défaut. Les outils d'assistance annonceront donc les résultats des interactions avec l'interface utilisateur qui arrivent sur cet élément sans demander à avoir passé le focus depuis un autre contrôle. Toutefois, ce comportement n'est pas précisément décrit dans les spécifications actuelles.

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

* Les autres éléments relatifs aux formulaires : `<form>`, `<input>`, `<button>`, `<datalist>`, `<legend>`, `<label>`, `<select>`, `<optgroup>`, `<option>`, `<textarea>`, `<fieldset>`, `<progress>` et `<meter>`.
<noscript>
==========

L'élément HTML **`<noscript>`** définit un fragment HTML qui doit être affiché si les fonctionnalités de script ne sont pas prises en charge ou si elles sont désactivées.

Attributs
---------

On peut uniquement utiliser les attributs universels sur cet élément.

Exemples
--------

### HTML


```html
<noscript>
  <!-- élément d'ancre qui mène à un fichier externe -->
  <a href="https://www.mozilla.org/">Lien externe</a>
</noscript>
<p>Elle est où, la poulette ?</p>
```

### Résultat avec JavaScript activé

Elle est où, la poulette ?

### Résultat avec JavaScript désactivé

Lien externe

Elle est où, la poulette ?

Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de métadonnées,
 contenu de flux,
 contenu phrasé.
  |
| Contenu autorisé | 
 Lorsque les fonctionnalités de script sont désactivées et que l'élément
 est un descendant d'un élément `<head>` : zéro
 ou plusieurs éléments `<link>`,
 `<style>`,`<meta>`.Lorsque
 les fonctionnalités de script sont désactivées et que cet élément n'est
 pas un descendant d'un élément `<head>` : du
 contenu transparent
 mais sans élément `<noscript>` parmi les descendants.Sinon
 : du contenu de flux ou du
 contenu phrasé.
  |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé
 et qui n'a pas d'ancêtre qui soit un élément
 `<noscript>` ; ou, s'il s'agit d'un document HTML, un
 élément `<head>` (sans ancêtre
 `<noscript>`).
  |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLElement` |

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

| Specification |
| --- |
| HTML Standard # the-noscript-element |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<progress> : l'élément d'indicateur de progression
==================================================

L'élément HTML **`<progress>`** indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.

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

Attributs
---------

Comme tous les autres éléments HTML, cet élément inclut les attributs universels.

`max`

Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut `max` est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.

`value`

Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max` (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).



**Note :** La valeur minimale est toujours 0 et il n'existe pas d'attribut `min` pour l'élément `progress`. La propriété CSS `-moz-orient` peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement.
 La pseudo-classe CSS `:indeterminate` permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser `element.removeAttribute("value")`.


Exemples
--------

### HTML


```html
<progress value="70" max="100">70 %</progress>
```

### Résultat

Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de flux,
 contenu phrasé,
 contenu de formulaire (étiquetable),
 contenu tangible.
  |
| Contenu autorisé | Contenu phrasé
 sans élément `<progress>` parmi ses descendants.
  |
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé.
  |
| Rôles ARIA autorisés | Aucun. |
| Interface DOM | `HTMLProgressElement` (en-US). |

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

| Specification |
| --- |
| HTML Standard # the-progress-element |

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

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

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

* `<meter>`
* `:indeterminate`
* `-moz-orient`
* `::-moz-progress-bar`
* `::-ms-fill`
* `::-webkit-progress-bar`
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element`
<ins>
=====

L'élément HTML **`<ins>`** représente un fragment de texte qui a été ajouté dans un document.

**Note :** À l'inverse, on pourra utiliser l'élément `<del>` afin de représenter un fragment de texte supprimé.

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

Attributs
---------

On peut utiliser les attributs universels pour cet élément.

`cite`

Cet attribut définit l'URI d'une ressource qui explique la modification (par exemple, un compte-rendu de réunion ou un lien vers un rapport).

`datetime`

Cet attribut indique la date et l'heure de la modification. La valeur de cet attribut doit être une date valide avec une chaîne de caractères optionnelle pour l'heure. Si la valeur ne peut pas être analysée comme une date, l'indication temporelle sera absente de l'élément. Voir l'article sur les formats pour la représentation d'une date seule ou d'une date avec une heure.

Exemples
--------

### HTML


```html
<p>Le texte <ins>Ce texte a été ajouté</ins> original.</p>
```

### Résultat

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

Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément `ins`. On peut le rendre annonçable via la propriété CSS `content` et grâce aux pseudo-éléments `::before` et `::after`.


```css
ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [Début de l'insertion]";
}

ins::after {
  content: " [Fin de l'insertion] ";
}
```


Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été inséré.

* *Short note on making your mark (more accessible) | The Paciello Group* (en anglais)
* *Tweaking Text Level Styles | Adrian Roselli* (en anglais)
Résumé technique
----------------

|  |  |
| --- | --- |
| Catégories de contenu | Contenu phrasé
 ou
 contenu de flux.
  |
| Contenu autorisé | Contenu transparent. |
| Omission de balise | Aucune, la balise ouvrante et la balise fermante doivent être présentes. |
| Parents autorisés | 
 Tout élément qui accepte du
 contenu phrasé.
  |
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | `HTMLModElement` (en-US) |

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

| Specification |
| --- |
| HTML Standard # the-ins-element |

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

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

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

* `<del>` qui permet d'indiquer la suppression d'un fragment dans un document.
<rt> : l'élément de texte Ruby
==============================

L'élément HTML **`<rt>`** indique la composante texte d'une annotation Ruby, il est notamment utilisé pour la prononciation, la traduction ou la translitération des caractères d'Asie orientale. Cet élément est toujours contenu dans un élément `<ruby>`.

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

Attributs
---------

Cet élément inclut uniquement les attributs universels.

Exemples
--------

### Avec prise en charge de ruby

#### HTML


```html
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>
```


```
body {
  font-size: 22px;
}
```


#### Résultat

### Sans prise en charge de ruby

Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :
```

漢 Kan 字 ji
```


```
body {
  font-size: 22px;
}
```

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

| Specification |
| --- |
| HTML Standard # the-rt-element |

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

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

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

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `text-transform: full-size-kana`
<dd> : l'élément de détail d'une description
============================================

L'élément HTML **`<dd>`** fournit la description, la définition ou la valeur du terme précédent (`<dt>`) dans une liste de description (`<dl>`).

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

|  |  |
| --- | --- |
| Catégories de contenu | Aucune. |
| Contenu autorisé | Contenu de flux. |
| Omission de balises | 
 Cet élément doit avoir une balise ouvrante. La balise de fin peut être
 omise s'il est immédiatement suivi par un autre élément
 `<dd>` ou un autre élément `<dt>` ou
 s'il n'y a plus d'autre contenu dans l'élément parent.
  |
| Parents autorisés | 
 Au sein d'un élément
 `<dl>` après
 un élément
 `<dt>` ou
 après un élément
 `<dd>`. Sinon (selon le WHATWG), au sein d'un élément
 `<div>`
 situé dans un élément
 `<dl>`.
  |
| Rôle ARIA implicite | `definition` |
| Rôles ARIA autorisés | Aucun. |
| Interface DOM | `HTMLElement` |

Attributs
---------

Cet élément inclut les attributs universels.

`nowrap` 
Non-standard

Si la valeur de cet attribut est `yes`, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est `no`.

Exemples
--------

Pour des exemples, voir les exemples fournis pour l'élément `<dl>`.

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

| Specification |
| --- |
| HTML Standard # the-dd-element |

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

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

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

* L'élément `<dl>`
* L'élément `<dt>`