initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:40:17 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:40:17 -0500
commit: 33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree: 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/htmlelement
parent: 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
download: translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
21 files changed, 2232 insertions, 0 deletions
diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.html b/files/fr/web/api/htmlelement/beforeinput_event/index.html
new file mode 100644
index 0000000000..72f9239a17
--- /dev/null
+++ b/files/fr/web/api/htmlelement/beforeinput_event/index.html
@@ -0,0 +1,96 @@
+---
+title: 'HTMLElement: beforeinput event'
+slug: Web/API/HTMLElement/beforeinput_event
+translation_of: Web/API/HTMLElement/beforeinput_event
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>L’évènement DOM <strong><code>beforeinput</code></strong> est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.</p>
+
+<p>Dans le cas de <code>contenteditable</code> et <code>designMode</code>, la cible de l’évènement est <em>l’hôte d’édition.</em> Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété gestionnaire d’évènement</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th>Sync / Async</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th>Composé</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Mettre à jour l’élément DOM</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Saisissez du texte" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènement associé : <code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..552a6d0e70
--- /dev/null
+++ b/files/fr/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,167 @@
+---
+title: change
+slug: Web/API/HTMLElement/change_event
+tags:
+  - Change
+  - DOM
+  - Event
+  - HTML
+  - Reference
+  - Web
+  - Élément HTML
+translation_of: Web/API/HTMLElement/change_event
+---
+<p>{{APIRef}}</p>
+
+<p>L'événement <strong>change</strong> est déclenché pour les éléments {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> et {{HTMLElement("textarea")}} <em>(zone de texte)</em> lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, <strong>change</strong> n'est pas nécessairement déclenché pour chaque changement de valeur.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Propagation</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement <strong>change</strong> se déclenche à un moment différent :</p>
+
+<ul>
+ <li>Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour <code>&lt;input type="radio"&gt;</code> et <code>&lt;input type="checkbox"&gt;</code><em>(case à cocher</em>).</li>
+ <li>Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" <em>(sélecteur de date)</em> pour <code>&lt;input type="date"&gt;</code>, en sélectionnant un fichier d'un "file picker" <em>(sélecteur de fichier)</em> pour <code>&lt;input type="file"&gt;</code>, etc.).</li>
+ <li>Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou <code>&lt;input type="text"&gt;</code>).</li>
+</ul>
+
+<p>Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement <strong>change</strong> doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du &lt;select&gt; (voir {{bug("126379")}}).</p>
+
+<p><a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">La spécification HTML répertorie les types <code>&lt;input&gt;</code> qui doivent déclencher l'événement <code>change</code>.</a></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Lélément_&lt;select>">L'élément &lt;select&gt;</h3>
+
+<p>Le code suivant gère l'événement <strong>change</strong> sur {{HTMLElement("select")}} en appellant la fonction <code>changeEventHandler() </code>dans<code> l'attribut <em>onchange</em>. Il lit la valeur de la cible de l'événement et la montre dans une alerte.</code></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label&gt;Choose an ice cream flavor:
+  &lt;select class="ice-cream" name="ice-cream"&gt;
+    &lt;option value=""&gt;Select One …&lt;/option&gt;
+    &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
+    &lt;option value="sardine"&gt;Sardine&lt;/option&gt;
+    &lt;option value="vanilla"&gt;Vanilla&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+
+&lt;div class="result"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "select result";
+}
+
+select {
+  grid-area: select;
+}
+
+.result {
+  grid-area: result;
+}</pre>
+</div>
+
+<h4 id="Javascript">Javascript</h4>
+
+<pre class="brush: js">const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) =&gt; {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Lélément_&lt;select&gt;', '100%', '75px') }}</p>
+
+<h3 id="Lélément_dentrée_de_texte">L'élément d'entrée de texte</h3>
+
+<p>Pour certains éléments, notamment <code>&lt;input type="text"&gt;</code>, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}</p>
+
+<ul>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Cet événement est aussi déclenché dans plusieurs API non-standard:</p>
+
+<ul>
+ <li>{{domxref("NetworkInformation.connection")}} déclenche l'événement <strong>change</strong> lorsque les informations de connexions changent.</li>
+ <li>{{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..554b3ec9a7
--- /dev/null
+++ b/files/fr/web/api/htmlelement/click/index.html
@@ -0,0 +1,123 @@
+---
+title: element.click
+slug: Web/API/HTMLElement/click
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/click
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>La méthode <b>click</b> simule un clic sur un élément.</p>
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+<pre class="syntaxbox">element.click()</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>Lorsque la méthode <code>click</code> est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement <code>click</code> de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements <code>click</code>. Cependant, la propagation d'un évènement <code>click</code> ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.</p>
+<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p>
+<div class="geckoVersionNote">
+ <p>{{gecko_callout_heading("5.0")}}</p>
+ <p>Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode <code>click</code> qu'avec des éléments {{HTMLElement("input")}} de type
+  <i>
+   button</i>
+  ,
+  <i>
+   checkbox</i>
+  ,
+  <i>
+   radio</i>
+  ,
+  <i>
+   reset</i>
+  ou
+  <i>
+   submit</i>
+  . Gecko n'implémentait pas la méthode <code>click</code> sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.</p>
+ <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5" title="/fr/docs/HTML/HTML5">HTML5</a>.</p>
+ <p>D'autres implémentations du DOM peuvent se comporter différemment.</p>
+</div>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>5</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>input@file (limited)</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>12.10</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>input@file (full)</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome pour Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="note">
+ <p><strong>Note :</strong> <em>Support de base</em>, se réfère ici au minimum requis pas la spécification.</p>
+</div>
+<p><br>
+  </p>
diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..1863ffa2aa
--- /dev/null
+++ b/files/fr/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,113 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Référence(2)
+  - contenteditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><code>La propriété </code><strong><code>HTMLElement.contentEditable</code></strong> est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :</p>
+
+<ul>
+ <li><code>"true"</code> <em>(vrai)</em> indique que l'élément est éditable.</li>
+ <li><code>"false"</code> <em>(faux)</em> indique que l'élément ne sera pas éditable.</li>
+ <li><code>"inherit"</code>  <em>(hérité)</em> indique que l'élément héritera de l'état editable de son parent.</li>
+</ul>
+
+<p>Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = element.contentEditable
+element.contentEditable = "true"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>10.6</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer a un tas de bogues concernant l'implémentation de cette fonctionnalité. IE10 se bloque dans certains cas lors de la modification des listes (<a href="https://connect.microsoft.com/IE/feedback/details/796187/internet-explorer-10-crash-with-contenteditable-list">bug 796187</a>). IE11 + utilise un positionnement non valide pour lorsqu'un élément est flottant (<a href="https://connect.microsoft.com/IE/feedback/details/858749">bug 858749</a>). Dans IE9-10, la fenêtre se fige lorsque vous utilisez la molette de la souris pendant le déplacement (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/809254">bug 809254</a>). IE10-11 ne déclenche pas l'événement d'<a href="/en-US/docs/Web/Events/input"><code>input</code></a> (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/794285">bug 794285</a>). IE10 se bloque après avoir sélectionné "Couper" dans le menu contextuel (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/801770">bug 801770</a>). IE11 + ne permet pas de placer le caret dans une cellule de tableau vide (bug 807199). IE10 ne déclenche pas d'événement de <a href="https://developer.mozilla.org/fr/docs/Web/Events/contextmenu"><code>contextmenu</code></a> lorsque vous cliquez avec le bouton droit sur des mots mal orthographiés (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/774350">bug 774350</a>). IE11 ajoute des éléments {{HTMLElement ("br")}} à {{HTMLElement ("body")}} lors de l'affichage / dissimulation d'un {{HTMLElement ("iframe")}} avec un document contenteditable à l'intérieur (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/864804">bug 864804</a>). IE11 ne permet pas de désactiver les poignées de redimensionnement pour les images / entrées (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/907422">bug 907422</a>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>  <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..fa7ece8acc
--- /dev/null
+++ b/files/fr/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,102 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Propriété
+  - Référence(2)
+  - dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef }}</p>
+
+<p>La propriété <code><strong>HTMLElement.dataset</strong></code> fournit un accès en mode lecture et écriture, à tous les <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*" title="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_globaux/data-*">attributs de données sur mesure</a> (<em>data-*</em>) définis sur l'élément. C'est un <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">tableau associatif de DOMString</a>, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.</p>
+
+<p>Le nom d'un attribut de données sur mesure commence par <code>data-</code>. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (<code>-</code>), point (<code>.</code>), deux-points (<code>:</code>), tiret bas (<code>_</code>). De plus, il ne doit pas contenir des lettres majuscules ASCII (<code>A</code> à <code>Z</code>).</p>
+
+<p>Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :</p>
+
+<ul>
+ <li>le préfixe <code>data-</code> est enlevé (y compris le tiret) ;</li>
+ <li>pour tout tiret (<code>U+002D</code>) suivi par une <span style="line-height: 1.5;"> lettre minuscule ASCII</span><code> a</code><span style="line-height: 1.5;"> à </span><code>z</code><span style="line-height: 1.5;">, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;</span></li>
+ <li>les autres caractères (y compris les autres tirets) ne sont pas modifiés.</li>
+</ul>
+
+<p>La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :</p>
+
+<ul>
+ <li>Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII <code>a</code> à <code>z</code> (avant la transformation) ;</li>
+ <li>un préfixe <code>data-</code> est ajouté ;</li>
+ <li>toute lettre majuscule ASCII <code>A</code> à <code>Z</code> est transformée en un tiret suivi de la minuscule correspondante ;</li>
+ <li>les autres caractères ne sont pas modifiés.</li>
+</ul>
+
+<p>La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.</p>
+
+<p>Par exemple, l'attribut nommé <code>data-abc-def</code> correspond à la clef <code>abcDef</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chaîne</em> = <em>element</em>.dataset.<em>nomEnCamelCase</em>;
+<em>element.</em>dataset.<em>nomEnCamelCase</em> = <em>chaîne</em>;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">&lt;div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance&gt;Monsieur Tartempion
+&lt;/div&gt;
+
+var el = document.querySelector('#utilisateur');
+
+// el.id == 'utilisateur'
+// el.dataset.id === '1234567890'
+// el.dataset.utilisateur === 'Monsieur Tartempion'
+// el.dataset.dateDeNaissance === ''
+
+el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
+
+// 'unAttributDeDonnees' in el.dataset === false
+
+el.dataset.unAttributDeDonnees = 'mes données';
+// 'unAttributDeDonnees' in el.dataset === true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La classe des attributs globaux HTML <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*"><strong>data-*</strong></a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html
new file mode 100644
index 0000000000..e4bd63a25e
--- /dev/null
+++ b/files/fr/web/api/htmlelement/dir/index.html
@@ -0,0 +1,48 @@
+---
+title: element.dir
+slug: Web/API/HTMLElement/dir
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/dir
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p>
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
+<pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir;
+referenceElement.dir = <var>NouvelleDirection</var>;
+</pre>
+<p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p>
+<p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="brush: js">var para = document.getElementById("para1");
+para.dir = "rtl";
+// change la direction du texte sur un paragraphe identifié par "para1"
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).</p>
+<p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p>
+<p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p>
+<div class="geckoVersionNote">
+ <p>{{ gecko_callout_heading("7.0") }}</p>
+ <p>Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.</p>
+</div>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html
new file mode 100644
index 0000000000..3659a5a75b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/focus/index.html
@@ -0,0 +1,223 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La méthode <strong><code>HTMLElement.focus()</code></strong> donne le focus à l'élément spécifié, s'il peut prendre le focus.</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Syntaxe</h2>
+
+<pre class="syntaxbox">element.focus();
+element.focus(focusOption); // Paramètre objet</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet ayant les propriétés suivantes:</dd>
+ <dd>
+ <dl>
+  <dt><code>preventScroll</code> {{optional_inline}}</dt>
+  <dd>Est une valeur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
+  <ul>
+   <li>Si <code>false</code>, la méthode fera défiler la page pour que l'élément soit visible à l'écran.</li>
+   <li>Si <code>true</code>,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<h3 id="Focus_on_a_text_field" name="Focus_on_a_text_field">Donner le focus à un champ texte</h3>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myTextField"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myTextField<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Champ texte</span>.<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au champ texte!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h3 id="Focus_on_a_button" name="Focus_on_a_button">Donner le focus à un bouton</h3>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour donner le focus au bouton</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
+
+<h3 id="Focus_prevent_scroll" name="Focus_prevent_scroll">Focus avec option</h3>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">false</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+focusNoScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocusWithoutScrolling</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusNoScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton sans défilement!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si vous appelez <code>HTMLElement.focus()</code> à partir d'un gestionnaire d'événement mousedown, vous devez appeler <code>event.preventDefault()</code> pour empêcher le focus de quitter l'<code>HTMLElement</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>focusOptions</code></td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile</th>
+   <th>Edge mobile</th>
+   <th>IE mobile</th>
+   <th>Opera Android</th>
+   <th>Safari iOS</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>focusOptions</code></td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode DOM {{domxref("HTMLElement.blur()")}} pour retirer le focus.</li>
+ <li>{{domxref('document.activeElement')}} pour savoir quel élément a actuellement le focus.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html
new file mode 100644
index 0000000000..28cc5255d5
--- /dev/null
+++ b/files/fr/web/api/htmlelement/hidden/index.html
@@ -0,0 +1,145 @@
+---
+title: HTMLElement.hidden
+slug: Web/API/HTMLElement/hidden
+translation_of: Web/API/HTMLElement/hidden
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><span class="seoSummary">La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</span> La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p>
+
+<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p>
+
+<ul>
+ <li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li>
+ <li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li>
+ <li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li>
+ <li>la création d'un canevas hors écran comme tampon de dessin.</li>
+</ul>
+
+<p>Des cas inappropriés d'utilisation comprennent :</p>
+
+<ul>
+ <li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li>
+ <li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li>
+</ul>
+
+<div class="note">
+<p>Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>estCaché</em> = <em>HTMLElement</em>.hidden;
+
+<em>HTMLElement</em>.hidden = true | false;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.getElementById("boutonOk")
+        .addEventListener("click", function() {
+  document.getElementById("bienvenue").hidden = true;
+  document.getElementById("impressionnant").hidden = false;
+}, false);</pre>
+
+<p>Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p>
+
+<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4>
+
+<pre class="brush: html notranslate">&lt;div id="bienvenue" class="panneau"&gt;
+  &lt;h1&gt;Bienvenue à Machin.com !&lt;/h1&gt;
+  &lt;p&gt;En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !&lt;/p&gt;
+  &lt;button class="bouton" id="boutonOk"&gt;OK&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.</p>
+
+<h4 id="Le_panneau_de_suite">Le panneau de suite</h4>
+
+<p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div id="impressionnant" class="panneau" hidden&gt;
+  &lt;h1&gt;Merci !&lt;/h1&gt;
+  &lt;p&gt;Merci &lt;strong&gt;vraiment&lt;/strong&gt; beaucoup d'avoir accepté d'être
+  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
+  d'une façon impressionnante pour rendre le monde plus impressionnant !&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p>
+
+<pre class="brush: css notranslate">.panneau {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.bouton {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table compatibilité de cette page est générée à partir de données structurées. Au cas où vous souhaiteriez contribuer aux données, merci de please de vous regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</div>
+
+<p>{{Compat("api.HTMLElement.hidden")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.hidden")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..5e9cfbda3b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/index.html
@@ -0,0 +1,230 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Interface_des_éléments_HTML">Interface des éléments HTML</h2>
+<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM" title="en-US/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>La touche de navigation clavier assignée à l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Une chaîne de caractères définissant la touche de navigation clavier assignée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.className", "className")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la classe <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> définie pour l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMStringMap")}}</td>
+   <td>Un tableau associatif des attributs  <code>data-*</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.dir", "dir")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut <code>dir</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.id", "id")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'ID de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.lang", "lang")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut  <code>lang</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.title", "title")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut <code>title</code> de l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom et paramètres</th>
+   <th scope="col">Renvoie</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Retire le focus clavier de l'élément actuellement sélectionné.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Envoie un évènement <code>click</code> à l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Place le focus clavier sur l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKey", "accessKey")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>17.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
+    <td>{{CompatGeckoDesktop("8.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.blur()", "blur()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.click()", "click()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.dataset", "dataset")}}</td>
+    <td>{{CompatGeckoDesktop("6.0")}}</td>
+    <td>9.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>11.10</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.focus()", "focus()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKey", "accessKey")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
+    <td>{{CompatGeckoMobile("8.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.blur()", "blur()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.click()", "click()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.dataset", "dataset")}}</td>
+    <td>{{CompatGeckoMobile("6.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.focus()", "focus()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..3e20f0e2bb
--- /dev/null
+++ b/files/fr/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,261 @@
+---
+title: input
+slug: Web/API/HTMLElement/input_event
+tags:
+  - DOM
+  - Element
+  - Entrée
+  - HTML5
+translation_of: Web/API/HTMLElement/input_event
+---
+<p>L'évènement DOM <code>input</code> <em>(entrée)</em> est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> ou {{ HTMLElement("textarea") }} <em>(zone de texte)</em> est modifiée. (Pour les éléments <code>input</code> avec <code>type=checkbox</code> <em>(case à cocher)</em> ou <code>type=radio</code> , l'évènement <code>input</code>  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).</p>
+
+<p>De plus, l'évènement  <code>input</code> se déclenche sur les éditeurs <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . <span class="short_text" id="result_box" lang="fr"><span>S'il y a deux éléments ou plus qui ont</span></span> <code>contenteditable</code> à true <em>(vrai)</em>, "editing host" <span id="result_box" lang="fr"><span>est l'élément ancêtre le plus proche dont le parent n'est pas modifiable</span></span> . <span id="result_box" lang="fr"><span>De même, il est déclenché sur l'élément racine des éditeurs</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode" title="document.designMode"><code>designMode</code></a> .</p>
+
+<h2 id="Information_générale">Information générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}, {{domxref("InputEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élement</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">La valeur ou le contenu est modifié</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9<sup>[2][3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup>
+    <p> </p>
+   </td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is "on"</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt;select&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("12")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is "on"</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt;select&gt;</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="fr"><span>Avant Gecko 12.0 {GeckoRelease ("12.0")}}, Gecko ne déclenchait pas les événements </span></span> "input" <span lang="fr"><span> pendant que la composition était en cours en utilisant des IME ou lorsque des clés mortes étaient utilisées sur Mac OS X.</span></span></p>
+
+<p>[2] IE 9 ne déclenche pas un événement "input" lorsque l'utilisateur supprime des caractères d'une entrée (par exemple en appuyant sur Retour arrière ou Suppr., ou en utilisant l'opération "Cut" <em>(couper)</em>).</p>
+
+<p>[3] IE 10 et 11 ont un bogue, l'évènement "input"  s'y déclenche lors des changements de l'attribut "placeholder" (espace réservé).</p>
+
+<p>[4] <span id="result_box" lang="fr"><span>Avant Opera 15, Opera ne déclenchait pas un événement </span></span> "input" <span lang="fr"><span> après la suppression du texte dans un champ de saisie</span></span> .</p>
+
+<p>[5] <span id="result_box" lang="fr"><span>La cible de l'événement est l'élément "</span></span> innermost" <span lang="fr"><span> à la position du curseur.</span></span></p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<p>L'évènement <a href="/en-US/docs/Web/Reference/Events/change">change</a> est lié . "change"<span id="result_box" lang="fr"><span> se déclenche moins souvent que "input" - il n'est lancé que lorsque les modifications sont validées par l'utilisateur.</span></span></p>
diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html
new file mode 100644
index 0000000000..ba62e2d99d
--- /dev/null
+++ b/files/fr/web/api/htmlelement/iscontenteditable/index.html
@@ -0,0 +1,127 @@
+---
+title: HTMLElement.isContentEditable
+slug: Web/API/HTMLElement/isContentEditable
+tags:
+  - HTML DOM
+  - Propriété
+  - Reference
+  - lecture seule
+  - Édition
+  - Élément HTML
+translation_of: Web/API/HTMLElement/isContentEditable
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propriété en lecture seule <strong><code>HTMLElement.isContentEditable</code></strong> renvoie un  {{jsxref("Boolean")}} qui est <code>true </code><em>(vrai)</em> si le contenu de l'élément est éditable ; sinon elle renvoie <code>false</code><em>(faux)</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Uneditable Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText2<span class="punctuation token">"</span></span> <span class="attr-name token">contentEditable</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Editable Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Can edit the first paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Can edit the second paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de la dernière image, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Image de  {{SpecName('HTML WHATWG')}},  definition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.contentEditable")}}</li>
+ <li>L'attribut global <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html
new file mode 100644
index 0000000000..990a1cd780
--- /dev/null
+++ b/files/fr/web/api/htmlelement/lang/index.html
@@ -0,0 +1,46 @@
+---
+title: element.lang
+slug: Web/API/HTMLElement/lang
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/lang
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.</p>
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
+<pre class="brush: js">var <var>langueUtilisee</var> = référenceElement.lang; // Récupérer la valeur de lang
+référenceElement.lang = <var>NouvelleLangue</var>; // Définir la valeur de lang
+</pre>
+<p><var>langueUtilisee</var> est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. <var>NouvelleLangue</var> est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.</p>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="brush: js">// ce bout de code compare la langue de base et
+// redirige vers une autre URL suivant la langue
+if (document.documentElement.lang === "en") {
+    window.location.href = "un_document.html.en";
+} else if(document.documentElement.lang === "ru") {
+    window.location.href = "un_document.html.ru";
+}
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est <code>unknown</code> (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.</p>
+<p>Ne marche qu'avec l'attribut <code>lang</code>, et non avec <code>xml:lang</code>.</p>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..bfd4b1d130
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,66 @@
+---
+title: element.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Propriété <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var <em>hauteurTotaleElem</em> = document.getElementById(<em>id</em>).offsetHeight;
+</pre>
+
+<p><em>hauteurTotalElem</em> est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par <code>id</code>. <code>offsetHeight</code> est une propriété en lecture seule.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Typiquement, la propriété <strong>offsetHeight</strong> d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/1176/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:offsetHeight.png" class="internal" src="/@api/deki/files/1419/=OffsetHeight.png"></p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p><code>offsetHeight</code> fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetHeight</code> est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
+</ul>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a href="/fr/DOM/element.clientHeight" title="fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li>
+ <li><a href="/fr/DOM/element.scrollHeight" title="fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li>
+ <li><a href="/fr/DOM/element.offsetWidth" title="fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetHeight", "pl": "pl/DOM/element.offsetHeight" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..b9c055927b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,56 @@
+---
+title: element.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie le nombre de pixels dont le
+ <i>
+  coin supérieur gauche</i>
+ de l'élément courant est décalé vers là gauche au sein du nœud <code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>left</i> =<i>element</i>.offsetLeft;
+</pre>
+<p><code>left</code> est un entier représentant le décalage vers la gauche en pixels.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>offsetLeft</code> renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments <b>span</b> dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété <code>offsetLeft</code> fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à <code>offsetLeft, offsetTop, offsetWidth</code> et <code>offsetHeight</code> ne contiendra pas forcément un span avec débordement de texte.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // grand décalage à gauche : faire quelque chose ici
+}
+</pre>
+<h3 id="Exemple_2" name="Exemple_2">Exemple</h3>
+<p>Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.</p>
+<p><img alt="Image:offsetLeft.jpg"></p>
+<p><small><font color="gray">Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.</font></small></p>
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps withing this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+&lt;/script&gt;
+</pre>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<p><code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="fr/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="fr/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="fr/DOM/element.offsetHeight">offsetHeight</a></code></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.</p>
+<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p>
+<p>{{ languages( { "en": "en/DOM/element.offsetLeft", "pl": "pl/DOM/element.offsetLeft" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..d466de34de
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,22 @@
+---
+title: element.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'<b>offsetParent</b>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>objetParent</i> = element.offsetParent
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>objetParent</code> est une référence à l'élément dans lequel l'élément courant est positionné.</li>
+</ul>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.offsetParent", "pl": "pl/DOM/element.offsetParent" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..6be7a15bd3
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,50 @@
+---
+title: element.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p><strong>offsetTop</strong> renvoie la distance entre l'élément courant et le haut du nœud <a href="/fr/docs/DOM/element.offsetParent"><code>offsetParent</code></a>.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>topPos</em> = element.offsetTop;
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>topPos</code> est le nombre de pixels depuis le haut de l'élément parent.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>d = document.getElementById("div1");
+
+topPos = d.offsetTop;
+
+if (topPos &gt; 10 ) {
+
+    // l'objet est décalé de plus de
+    // 10 pixels par rapport à son parent
+
+}
+</pre>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<p><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetTop", "pl": "pl/DOM/element.offsetTop" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.html b/files/fr/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..4d65ebae61
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,56 @@
+---
+title: element.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie la largeur totale d'un élément.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var <em>offsetWidth</em> = <em>element</em>.offsetWidth;
+</pre>
+
+<p><code>offsetWidth</code> est une propriété en lecture seule.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Typiquement, l'attribut <code>offsetWidth</code> est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png"></p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p><code>offsetWidth</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetWidth</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetWidth", "pl": "pl/DOM/element.offsetWidth" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/outertext/index.html b/files/fr/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..02b825ffe4
--- /dev/null
+++ b/files/fr/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,93 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+tags:
+  - API
+  - DOM
+  - Propriété
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><strong><code>HTMLElement.outerText</code></strong> n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435">cette réponse proposée sur StackOverflow</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification. Discussion de la norme : <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<p>Microsoft en a publié <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">une description sur MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..85a19bb89a
--- /dev/null
+++ b/files/fr/web/api/htmlelement/style/index.html
@@ -0,0 +1,57 @@
+---
+title: HTMLElement.style
+slug: Web/API/HTMLElement/style
+tags:
+  - DOM
+  - Style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie un objet représentant l'attribut <code>style</code> de l'élément.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var div = document.getElementById("div1");
+div.style.marginTop = ".25cm";
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Étant donné que la propriété <code>style</code> d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut <code>style</code> et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.</p>
+
+<p>Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut <code>style</code> de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <code>&lt;head&gt;</code> ou des feuilles de style externes.</p>
+
+<p>Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser <code><a href="/fr/DOM/window.getComputedStyle" title="fr/DOM/window.getComputedStyle">window.getComputedStyle</a></code>.</p>
+
+<p>Consultez la <a href="/fr/docs/DOM/CSS" title="fr/DOM/CSS">liste des propriétés CSS DOM</a> pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété <code>style</code> pour styler des éléments dans le DOM.</p>
+
+<p>Il est généralement préférable d'utiliser la propriété <code>style</code> plutôt que <code>elt.setAttribute('style', '...')</code> depuis un script, étant donné que l'utilisation de la propriété <code>style</code> n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut <code>style</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style">DOM Level 2 Core : style</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/style/css.html#CSS-CSSStyleRule-style">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.HTMLElement.style")}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">Liste des propriétés CSS DOM</a> (en)</li>
+</ul>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Lien Externe</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp" title="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp">HTML DOM Style Object</a> — W3Schools.com (en)</li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..b2dd8ca956
--- /dev/null
+++ b/files/fr/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,25 @@
+---
+title: element.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Obtient ou définit l'ordre de tabulation de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.tabIndex = <em>iIndex</em>;
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>iIndex</code> est un nombre.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">DOM Level 2 HTML: tabIndex</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-40676705">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html
new file mode 100644
index 0000000000..3b406bc52b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/title/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLElement.title
+slug: Web/API/HTMLElement/title
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Propriété
+  - Reference
+translation_of: Web/API/HTMLElement/title
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propriété <strong><code>HTMLElement.title</code></strong> représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.</p>
+
+<div class="note">
+<p>Si un nœud n'a pas d'attribut <code>title</code>, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..</p>
+
+<pre> &lt;div title="InfoCool"&gt;
+   &lt;div title=""&gt;le survol de la souris ici fera apparaître "InfoCool"&lt;/div&gt;
+   &lt;div title=" "&gt;le survol de la souris ici ne fera rien apparaître&lt;/div&gt;
+ &lt;/div&gt;
+</pre>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var <em>chn</em> = <em>element</em>.title;<em>
+</em>element.title = <em>chn</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js"> bouton1.title = "cliquer pour rafraîchir";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-title', 'title')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement par rapport à la {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut HTML global <a href="/fr/docs/Web/HTML/Attributs_universels/title"><strong>title</strong></a>.</li>
+</ul>
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:40:17 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:40:17 -0500
commit	33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree	51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/htmlelement
parent	8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
download	translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip