convert content to md

1 files changed, 220 insertions, 264 deletions

diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md
index 56d928e2ab..e9f7950ab4 100644
--- a/files/fr/web/html/element/input/url/index.md
+++ b/files/fr/web/html/element/input/url/index.md
@@ -8,252 +8,213 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/url
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div>
-
-<p>La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type<code>"url"</code> utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.</p>
-</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :</p>
-
-<ol>
- <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.</li>
- <li>Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme <code>"schema://restedelurl"</code>.</li>
-</ol>
-
-<p>Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Le nombre de caractères qui doivent être visibles à l'écran.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("spellcheck")}}</code></td>
-   <td>Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"url"`** sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.
 
-<p>Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut <code>minlength</code>.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}
 
-<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est supérieure à cet attribut.</p>
+La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.
 
-<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+> **Note :** Les navigateurs qui ne prennent pas en charge le type`"url"` utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.
 
-<p>Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut <code>maxlength</code>.</p>
+## Valeur
 
-<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est inférieure à cet attribut.</p>
+La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :
 
-<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+1.  Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.
+2.  Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme `"schema://restedelurl"`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.
 
-<p>Voir <a href="#format">la section ci-après sur le format</a> pour plus de détails et d'exemples.</p>
+## Attributs supplémentaires
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+| Attribut                           | Description                                                                                                        |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `{{anch("maxlength")}}`     | La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. |
+| `{{anch("minlength")}}`     | La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. |
+| `{{anch("pattern")}}`         | Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.                       |
+| `{{anch("placeholder")}}` | Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.                                   |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.          |
+| `{{anch("size")}}`             | Le nombre de caractères qui doivent être visibles à l'écran.                                                       |
+| `{{anch("spellcheck")}}`     | Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.                         |
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+### {{htmlattrdef("maxlength")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p>
+Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut `minlength`.
 
-<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est supérieure à cet attribut.
 
-<p>Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.</p>
+### {{htmlattrdef("minlength")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>Autorise ou non la correction automatique lors de l'édition de ce champ. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur.<strong> Uniquement pris en charge par Firefox pour Android.</strong></td>
-  </tr>
- </tbody>
-</table>
+Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut `maxlength`.
+
+La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est inférieure à cet attribut.
+
+### {{htmlattrdef("pattern")}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}
+
+Voir [la section ci-après sur le format](#format) pour plus de détails et d'exemples.
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}
 
-<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+## Attributs non-standard
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.
 
-<h2 id="Utiliser_des_champs_de_saisie_d'URL">Utiliser des champs de saisie d'URL</h2>
+| Attribut                           | Description                                                                                                                                                                                                                                                                                                                                                          |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocorrect")}}` | Autorise ou non la correction automatique lors de l'édition de ce champ. **Uniquement pris en charge par Safari.**                                                                                                                                                                                                                                                   |
+| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur. **Uniquement pris en charge par Firefox pour Android.** |
 
-<p>Lorsqu'on crée un champ avec un attribut <code>type</code> qui vaut <code>"url"</code>, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.</p>
+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
 
-<p>Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
 
-<h3 id="Un_simple_champ">Un simple champ</h3>
+{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
 
-<p>Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :</p>
+## Utiliser des champs de saisie d'URL
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"&gt;</pre>
+Lorsqu'on crée un champ avec un attribut `type` qui vaut `"url"`, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.
 
-<p>{{EmbedLiveSample('Un_simple_champ', 600, 40)}}</p>
+Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.
 
-<p>La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.</p>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<p>Ainsi, si l'utilisateur saisit l'URL <code>http://www.example.com</code>, voici ce qui sera envoyé vers le serveur : <code>monURL=http%3A%2F%2Fwww.example.com</code> (on notera la façon dont certains caractères sont échappés).</p>
+### Un simple champ
 
-<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs <em>- placeholders</em></h3>
+Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :
 
-<p>Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut <code>placeholder</code>.</p>
+```html
+<input id="monURL" name="monURL" type="url">
+```
 
-<p>Dans l'exemple qui suit, le contrôle contient le texte indicatif <code>"http://www.example.com"</code>. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.</p>
+{{EmbedLiveSample('Un_simple_champ', 600, 40)}}
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       placeholder="http://www.example.com"&gt;</pre>
+La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.
 
-<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p>
+Ainsi, si l'utilisateur saisit l'URL `http://www.example.com`, voici ce qui sera envoyé vers le serveur : `monURL=http%3A%2F%2Fwww.example.com` (on notera la façon dont certains caractères sont échappés).
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+### Textes indicatifs _- placeholders_
 
-<p>Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).</p>
+Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut `placeholder`.
 
-<h4 id="La_taille_physique">La taille physique</h4>
+Dans l'exemple qui suit, le contrôle contient le texte indicatif `"http://www.example.com"`. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.
 
-<p>C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :</p>
+```html
+<input id="monURL" name="monURL" type="url"
+       placeholder="http://www.example.com">
+```
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       size="30"&gt;</pre>
+{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}
 
-<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p>
+### Contrôler la taille du champ
 
-<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4>
+Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).
 
-<p>L'attribut <code>size</code> ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.</p>
+#### La taille physique
 
-<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.</p>
+C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       size="30" minlength="10" maxlength="80"&gt;
-</pre>
+```html
+<input id="monURL" name="monURL" type="url"
+       size="30">
+```
 
-<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p>
+{{EmbedLiveSample('La_taille_physique', 600, 40)}}
 
-<div class="note">
-<p><strong>Note :</strong> Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p>
-</div>
+#### La longueur de la valeur
 
-<h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3>
+L'attribut `size` ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.
 
-<p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p>
+Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       value="http://www.example.com"&gt;</pre>
+```html
+<input id="monURL" name="monURL" type="url"
+       size="30" minlength="10" maxlength="80">
+```
 
-<p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p>
+{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}
 
-<h4 id="Fournir_des_suggestions">Fournir des suggestions</h4>
+> **Note :** Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`.
 
-<p>On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut <code>list</code> est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut <code>value</code> de chacun de ces éléments <code>&lt;option&gt;</code> correspondra à la valeur qui sera suggérée dans le champ de saisie.</p>
+### Fournir des valeurs par défaut
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       list="defaultURLs"&gt;
+On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :
 
-&lt;datalist id="defaultURLs"&gt;
-  &lt;option value="http://www.example.com"&gt;
-  &lt;option value="https://www.example.com"&gt;
-  &lt;option value="http://www.example.org"&gt;
-  &lt;option value="https://www.example.org"&gt;
-&lt;/datalist&gt;</pre>
+```html
+<input id="monURL" name="monURL" type="url"
+       value="http://www.example.com">
+```
 
-<p>{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}</p>
+{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}
 
-<p>Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).</p>
+#### Fournir des suggestions
 
-<h2 id="Validation">Validation</h2>
+On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut `list` est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut `value` de chacun de ces éléments `<option>` correspondra à la valeur qui sera suggérée dans le champ de saisie.
 
-<p>Il existe deux niveaux de validation pour les contrôles de type <code>"url"</code>. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.</p>
+```html
+<input id="monURL" name="monURL" type="url"
+       list="defaultURLs">
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+<datalist id="defaultURLs">
+  <option value="http://www.example.com">
+  <option value="https://www.example.com">
+  <option value="http://www.example.org">
+  <option value="https://www.example.org">
+</datalist>
+```
 
-<h3 id="Validation_simple">Validation simple</h3>
+{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}
 
-<p>Les navigateurs qui prennent en charge le type <code>"url"</code> fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.</p>
+Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).
 
-<h3 id="Rendre_le_champ_URL_obligatoire">Rendre le champ URL obligatoire</h3>
+## Validation
 
-<p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p>
+Il existe deux niveaux de validation pour les contrôles de type `"url"`. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;input id="monURL" name="monURL" type="url" required&gt;
-  &lt;button&gt;Envoyer&lt;/button&gt;
-&lt;/form&gt;</pre>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p>
+### Validation simple
 
-<p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p>
+Les navigateurs qui prennent en charge le type `"url"` fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.
 
-<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3>
+### Rendre le champ URL obligatoire
 
-<p>S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que la valeur saisie doit respecter afin d'être valide.</p>
+Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :
 
-<p>Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine <code>maboite</code>.</p>
+```html
+<form>
+  <input id="monURL" name="monURL" type="url" required>
+  <button>Envoyer</button>
+</form>
+```
 
-<p>Les contrôles de type <code>"url"</code> utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :</p>
+{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}
 
-<pre class="brush: css hidden">div {
+Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.
+
+### Utiliser un format particulier
+
+S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une [expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) que la valeur saisie doit respecter afin d'être valide.
+
+Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine `maboite`.
+
+Les contrôles de type `"url"` utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :
+
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
   }
@@ -276,113 +237,108 @@ translation_of: Web/HTML/Element/input/url
     content: '✓';
     padding-left: 5px;
   }
-</pre>
+```
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="myURL"&gt;Veuillez saisir l'adresse de la page problématique:&lt;/label&gt;
-    &lt;input id="myURL" name="myURL" type="url"
+```html
+<form>
+  <div>
+    <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label>
+    <input id="myURL" name="myURL" type="url"
            required pattern=".*\.maboite\..*"
-           title="L'URL doit être sur le domaine maboite."&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="myComment"&gt;Quel est le problème ?&lt;/label&gt;
-    &lt;input id="myComment" name="myComment" type="text"
-           required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-</pre>
+           title="L'URL doit être sur le domaine maboite.">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <label for="myComment">Quel est le problème ?</label>
+    <input id="myComment" name="myComment" type="text"
+           required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}</p>
+{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}
 
-<p>Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.</p>
+Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.
 
-<p>Ensuite, on utilise l'attribut <code>pattern</code> avec l'expression rationnelle <code>".*\.maboite\..*"</code>. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.</p>
+Ensuite, on utilise l'attribut `pattern` avec l'expression rationnelle `".*\.maboite\..*"`. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.
 
-<p>Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.</p>
+Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.
 
-<p>Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut <code>pattern</code>. Dans ce cas, l'attribut <code>title</code> doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans <code>title</code> pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans <code>title</code>. Si la valeur de <code>title</code> est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).</p>
+Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut `pattern`. Dans ce cas, l'attribut `title` doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans `title` pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans `title`. Si la valeur de `title` est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).
 
-<p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p>
+C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.
 
-<div class="note">
-<p><strong>Note :</strong> Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p>
-</div>
+> **Note :** Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>En plus des exemples précédents, vous pouvez consulter <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">l'exemple de validation de format sur GitHub</a> (et voir <a href="https://mdn.github.io/learning-area/html/forms/url-example/">le résultat <em>live</em></a>).</p>
+En plus des exemples précédents, vous pouvez consulter [l'exemple de validation de format sur GitHub](https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html) (et voir [le résultat _live_](https://mdn.github.io/learning-area/html/forms/url-example/)).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une URL ou une chaîne de caractères vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente une URL ou une chaîne de caractères vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}},
+        {{htmlattrxref("pattern", "input")}},
+        {{htmlattrxref("placeholder", "input")}},
+        {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}
+        et {{htmlattrxref("size", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>list</code>, <code>value</code>, <code>selectionEnd</code>,
+        <code>selectionDirection</code>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}},
+        {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '&lt;input type="url"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '&lt;input type="url"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("URL", "#urls", "URL syntax")}}</td>
-   <td>{{Spec2("URL")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '&lt;input type="url"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '&lt;input type="url"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
+| {{SpecName("URL", "#urls", "URL syntax")}}                                                                 | {{Spec2("URL")}}             |                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-url")}}</p>
+{{Compat("html.elements.input.input-url")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
-</ul>
+- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel)
+- [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email)