UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)

* UPDATE: Updating pages starting with A

* FIX: Update missing KS to html anchor

* Review HTML Element a

* Review HTML Element abbr

* Review HTML Element acronym

* Review HTML Element address

* Review HTML Element applet

* Review HTML Element area

* Review HTML Element article

* Review HTML Element aside

* Review HTML Element audio

* UPDATE: Updating pages wtarting with B

* Review HTML Element b

* Review HTML Element base

* Review HTML Element basefont

* Review HTML Element bdi

* Review HTML Element bdo

* Review HTML Element big

* Review HTML Element blink

* Review HTML Element blockquote

* Review HTML Element body

* Review HTML Element br

* Review HTML Element button

* Review HTML Element button - rm HTMLRef

* Review HTML Element button - lint link

* UPDATE: Updating pages starting with C

* UPDATE: Updating pages starting with D

* UPDATE: Refresh the reference page

* UPDATE: Updating pages starting with E

* Review HTML Element canvas

* Review HTML Element caption

* Review HTML Element center

* Review HTML Element cite

* UPDATE: Updating pages starting with F

* BCD: Update all updated pages with new BCD format

* FIX: add missing bracket

* Review - HTML element - code

* Review - HTML Element - col

* Review - HTML Element - colgroup

* Review - HTML Element - content

* Review - HTML Element - data

* Review - HTML Element - datalist

* Review - HTML Element - dd

* Review - HTML Element - del

* Review - HTML Element

* Review - HTML Element - dfn

* Review - HTML Element - dialog

* Review - HTML element - dir

* Review - HTML Element div

* Review - HTML Element - dl

* Review - HTML Element - dt

* Review - HTML Element - em

* Review - HTML Element - embed

* Review - HTML Element - fieldset

* Review - HTML Element - figcaption

* Review - HTML Element - figure

* Review - HTML Element - font

* Review - HTML Element - footer

* Review - HTML Element - form

* Review - HTML Element - frame

* Review - HTML Element - frameset

* Review updates since PR start - A

* Review updates since PR start - B

* Review updates since PR start - C

* Review updates since PR start - D

* Review updates since PR start - F

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 61 insertions, 84 deletions

diff --git a/files/fr/web/html/element/em/index.html b/files/fr/web/html/element/em/index.html
index fb1de31a08..ea92b0a937 100644
--- a/files/fr/web/html/element/em/index.html
+++ b/files/fr/web/html/element/em/index.html
@@ -1,122 +1,99 @@
 ---
-title: '<em> : l''élément de mise en emphase'
+title: '<em> : l''élément d''emphase'
 slug: Web/HTML/Element/em
 tags:
   - Element
   - HTML
+  - HTML text-level semantics
   - Reference
   - Web
 translation_of: Web/HTML/Element/em
+browser-compat: html.elements.em
 ---
 <div>{{HTMLRef}}</div>
 
-<p>L'élément HTML <strong><code>&lt;em&gt;</code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code>&lt;em&gt;</code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p>
+<p class="summary">L'élément HTML <strong><code>&lt;em&gt;</code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code>&lt;em&gt;</code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div>
 
-<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
-
-<h2 id="Attributs">Attributs</h2>
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td>
+    </tr>
+  </tbody>
+</table>
 
-<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+<h2 id="attributes">Attributs</h2>
 
-<h2 id="Exemples">Exemples</h2>
+<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
 
-<p>L'élément <code>&lt;em&gt;</code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p>
+<h2 id="Usage_notes">Notes d'utilisation</h2>
 
-<h3 id="HTML">HTML</h3>
+<p>L'élément <code>&lt;em&gt;</code> est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même.</p>
 
-<pre class="brush: html">&lt;p&gt;
-  Dans HTML5, ce qui était appelé contenu de &lt;em&gt;type bloc&lt;/em&gt; est maintenant appelé contenu de &lt;em&gt;flux&lt;/em&gt;.
-&lt;/p&gt;</pre>
+<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a> ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code>&lt;cite&gt;</code></a> ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a> pour marquer un texte plus important que le texte qui l'entoure.</p>
 
-<h3 id="Résultat">Résultat</h3>
+<h3 id="i_vs._em">&lt;i&gt; ou &lt;em&gt; ?</h3>
 
-<p>{{EmbedLiveSample("Exemples","100%","100")}}</p>
+<p>Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. <code>&lt;em&gt;</code> et <code>&lt;i&gt;</code> sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ?</p>
 
-<h2 id="Notes"><strong>Notes</strong></h2>
+<p>Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément <code>&lt;em&gt;</code> représente l'accentuation de son contenu, tandis que l'élément <code>&lt;i&gt;</code> représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser <code>&lt;cite&gt;</code>).</p>
 
-<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément {{HTMLElement("i")}} ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément {{HTMLElement("cite")}} ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément {{HTMLElement("strong")}} pour marquer un texte plus important que le texte qui l'entoure.</p>
+<p>Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS.</p>
 
-<h3 id="Italique_ou_mise_en_évidence">Italique ou mise en évidence ?</h3>
+<p>Un exemple pour <code>&lt;em&gt;</code> pourrait être : « <em>Faites</em>-le déjà ! », ou : « Nous <em>devions</em> faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.</p>
 
-<p>Pour les nouveaux développeurs, il est souvent perturbant d'avoir autant de façons différentes pour afficher du texte dans un site web. Parmi les ambiguïtés les plus répandues, l'italique et la mise en évidence ont une bonne place. Pourquoi utiliser <code>&lt;em&gt;&lt;/em&gt;</code> au lieu de <code>&lt;i&gt;&lt;/i&gt;</code> si ces deux éléments produisent à première vue le même résultat ?</p>
+<p>Un exemple pour <code>&lt;i&gt;</code> pourrait être : « Le <i>Queen Mary</i> a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé <em>Queen Mary</em>. Un autre exemple de <code>&lt;i&gt;</code> pourrait être : « Le mot <i>the</i> est un article ».</p>
 
-<p>Eh bien ce n'est pas le même résultat : la mise en évidence porte un état logique, et l'italique est un état physique. Les états logiques séparent la mise en forme du contenu, et ainsi, peuvent être exprimés de façons très différentes, par exemple au lieu d'afficher un texte en italique, il pourrait être en rouge, ou dans une taille différente, ou surligné, ou même en gras. Il est plus logique de changer les propriétés de présentation de <code>&lt;em&gt;</code>, que celle de l'italique. L'italique est une mise en forme typographique ; il n'y a aucune séparation entre la présentation et le contenu (pour indiquer le titre d'une œuvre tel que le titre d'un film ou d'un livre, on utilisera plutôt l'élément {{HTMLElement("cite")}}).</p>
+<h2 id="example">Exemple</h2>
 
-<p>Par exemple, pour <code>&lt;em&gt;</code>, « Il suffit de le <em>faire</em> ! » ou « ça tient à <em>un</em> fil », une personne ou un logiciel pourrait traduire l'emphase par une mise en italique ou avec un autre mécanisme.</p>
+<p>L'élément <code>&lt;em&gt;</code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p>
 
-<p>Pour <code>&lt;i&gt;</code>, « Le <em>Charles de Gaulle</em> a appareillé le 15 novembre. » traduit bien la seule mise en forme. Il ne s'agit pas de mettre l'accent sur le nom du navire mais bien de respecter une règle typographique.</p>
+<pre class="brush: html">&lt;p&gt;
+  Dans HTML5, ce qui était appelé contenu de &lt;em&gt;type bloc&lt;/em&gt;
+  est maintenant appelé contenu de &lt;em&gt;flux&lt;/em&gt;.
+&lt;/p&gt;</pre>
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+<h3 id="result">Résultat</h3>
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}.<br>
-    Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
-  </tr>
- </tbody>
-</table>
+<p>{{EmbedLiveSample("example", "", 100)}}</p>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+<h2 id="specifications">Spécifications</h2>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{Specifications}}</p>
 
-<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("html.elements.em")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>{{HTMLElement("i")}}</li>
+  <li><a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a></li>
 </ul>