Fix EmbedLiveSample errors (#3115)

16 files changed, 61 insertions, 52 deletions

diff --git a/files/fr/learn/css/css_layout/floats/index.md b/files/fr/learn/css/css_layout/floats/index.md
index 1557416859..bdd921c991 100644
--- a/files/fr/learn/css/css_layout/floats/index.md
+++ b/files/fr/learn/css/css_layout/floats/index.md
@@ -323,7 +323,7 @@ body {
 
 Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.
 
-### Le « clearfix hack »
+### Débogage avec clear
 
 La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur `both` à la propriété `clear`.
 
@@ -382,7 +382,7 @@ body {
 }
 ```
 
-{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}
+{{ EmbedLiveSample('Débogage_avec_clear', '100%', 600) }}
 
 ### Utilisation du débordement
 
diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md
index 23532b7599..56e323f1d8 100644
--- a/files/fr/learn/css/css_layout/grids/index.md
+++ b/files/fr/learn/css/css_layout/grids/index.md
@@ -119,7 +119,7 @@ body {
 
 {{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}
 
-### Trames adaptables avec l'unité « fr »
+### Trames adaptables avec l'unité fr
 
 En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.
 
@@ -177,7 +177,7 @@ body {
 </div>
 ```
 
-{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}
+{{ EmbedLiveSample('Trames_adaptables_avec_lunité_fr', '100%', 400) }}
 
 > **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.
 
@@ -230,7 +230,7 @@ body {
 </div>
 ```
 
-{{ EmbedLiveSample('Grid_3', '100%', 400) }}
+{{ EmbedLiveSample('Espaces_entre_pistes', '100%', 400) }}
 
 > **Note :** Les propriétés _\*gap_ étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.
 
@@ -479,7 +479,7 @@ aside {
 
 > **Note :** vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de trame implicite.
 
-## Placer avec « grid-template-areas »
+## Placer avec grid-template-areas
 
 Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.
 
@@ -580,7 +580,7 @@ footer {
 </div>
 ```
 
-{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}
+{{ EmbedLiveSample('Placer_avec_grid-template-areas', '100%', 400) }}
 
 Les règles pour `grid-template-areas` sont les suivantes :
 
diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md
index 5e70ea8b8b..ac76b555e7 100644
--- a/files/fr/learn/css/css_layout/positioning/index.md
+++ b/files/fr/learn/css/css_layout/positioning/index.md
@@ -80,7 +80,7 @@ position: relative;
 
 Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.
 
-### Présentation de « top », « bottom », « left » et « right »
+### Présentation de top, bottom, left et right
 
 {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS :
 
@@ -118,18 +118,19 @@ span {
   left: 30px; }
 ```
 
-{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}
+{{ EmbedLiveSample('Présentation_de_top,_bottom,_left,_et_right', '100%', 500) }}
 
 Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini `top` (haut) et `left` (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions `top: 30px;`, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.
 
 > **Note :** à ce stade de l'article, vous pouvez retrouver un exemple ici [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)).
 
-### Positionnement « absolute »
+### Positionnement absolu
 
 Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de `position` dans le code :
 
+```css
     position: absolute;
-
+```
 Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :
 
 ```html hidden
@@ -159,7 +160,7 @@ span {
   left: 30px; }
 ```
 
-{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}
+{{ EmbedLiveSample('Positionnement_absolu', '100%', 420) }}
 
 Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.
 
@@ -290,7 +291,7 @@ Notez que `z-index` n'accepte que des valeurs d'index sans unité ; vous ne pouv
 
 > **Note :** sur ce sujet, vous pouvez voir l'exemple [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)).
 
-### Positionnement « fixed »
+### Positionnement fixe
 
 Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.
 
@@ -298,30 +299,36 @@ Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprime
 
 Maintenant, mettez à jour la règle `body` : supprimez la déclaration `position : relative ;` et ajoutez une hauteur fixe, ainsi :
 
-    body {
-      width: 500px;
-      height: 1400px;
-      margin: 0 auto;
-    }
+```css
+body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+```
 
 Maintenant, donnez la position `fixed` à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :
 
-    h1 {
-      position: fixed;
-      top: 0;
-      width: 500px;
-      margin: 0 auto;
-      background: white;
-      padding: 10px;
-    }
+```css
+h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+```
 
 `top: 0;` est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique `margin: 0 auto;` pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.
 
 Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :
 
-    p:nth-of-type(1) {
-      margin-top: 60px;
-    }
+```css
+p:nth-of-type(1) {
+  margin-top: 60px;
+}
+```
 
 Voici l'exemple terminé :
 
@@ -367,7 +374,7 @@ p:nth-of-type(1) {
 }
 ```
 
-{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}
+{{ EmbedLiveSample('Positionnement_fixe', '100%', 400) }}
 
 > **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici  [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)).
 
diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
index b218bec511..437dd32c90 100644
--- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
@@ -112,7 +112,7 @@ Dans l'exemple ci-dessous, nous avons fait flotter trois `<div>` pour les affich
 </div>
 ```
 
-{{EmbedLiveSample('Example_1', '', '150')}}
+{{EmbedLiveSample('Exemple', '', '150')}}
 
 > **Note :** La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.
 
@@ -171,7 +171,7 @@ Dans la disposition flottante, le pourcentage est calculé à partir du conteneu
 </div>
 ```
 
-{{EmbedLiveSample('Example_2', '', '150')}}
+{{EmbedLiveSample('Exemple_2', '', '150')}}
 
 Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.
 
@@ -223,7 +223,7 @@ Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous po
 </div>
 ```
 
-{{EmbedLiveSample('Example_3', '', '150')}}
+{{EmbedLiveSample('Exemple_3', '', '150')}}
 
 La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.
 
diff --git a/files/fr/learn/css/first_steps/how_css_works/index.md b/files/fr/learn/css/first_steps/how_css_works/index.md
index 60f48f7f03..f9e7ce2fd6 100644
--- a/files/fr/learn/css/first_steps/how_css_works/index.md
+++ b/files/fr/learn/css/first_steps/how_css_works/index.md
@@ -148,7 +148,7 @@ p {
 }
 ```
 
-{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}
+{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas_', '100%', 200)}}
 
 Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la _cascade_ : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.
 
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
index 2cc868993f..00ad8747ef 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md
@@ -149,7 +149,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 
 ### Resultat pour l'état initial
 
-{{ EmbedLiveSample("Basic_state", 120, 130) }}
+{{ EmbedLiveSample("État_initial", 120, 130) }}
 
 ## État actif
 
@@ -289,7 +289,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 
 ### Résultat pour état actif
 
-{{ EmbedLiveSample("Active_state", 120, 130) }}
+{{ EmbedLiveSample("État_actif", 120, 130) }}
 
 ## État ouvert
 
@@ -429,4 +429,4 @@ C'est le premier exemple de code qui explique [comment construire un widget de f
 
 ### Resultat pour état ouvert
 
-{{ EmbedLiveSample("Open_state", 120, 130) }}
+{{ EmbedLiveSample("État_ouvert", 120, 130) }}
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md
index 04696ac4a8..92c2e22837 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md
@@ -12,7 +12,7 @@ Ceci est le deuxième exemple expliquant comment [construire un formulaire perso
 
 ## JS
 
-### HTML Content
+### HTML
 
 ```html
 <form class="no-widget">
@@ -37,7 +37,7 @@ Ceci est le deuxième exemple expliquant comment [construire un formulaire perso
 <form>
 ```
 
-### CSS Content
+### CSS
 
 ```css
 .widget select,
@@ -181,7 +181,7 @@ window.addEventListener("load", function () {
 
 ## Sans JS
 
-### HTML Content
+### HTML
 
 ```html
 <form class="no-widget">
@@ -206,7 +206,7 @@ window.addEventListener("load", function () {
 <form>
 ```
 
-### CSS Content
+### CSS
 
 ```css
 .widget select,
@@ -218,6 +218,6 @@ window.addEventListener("load", function () {
 }
 ```
 
-### Result for No JS
+### Résultat
 
-{{ EmbedLiveSample('No_JS', 120, 130) }}
+{{ EmbedLiveSample('Sans_JS', 120, 130) }}
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
index b2b2eb37ee..4640bbfe99 100644
--- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -424,7 +424,7 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}
+{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi_', 700, 450, "", "", "hide-codepen-jsfiddle") }}
 
 ## Abréviations
 
diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
index 1bb20fcfbf..d320dd8741 100644
--- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -249,9 +249,11 @@ rendaient de ses marquages la lecture inélégante.
 
 ### Exemple avec hr
 
+```html
     <p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
     <hr>
     <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
+```
 
 sera rendu ainsi :
 
diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.md b/files/fr/learn/html/introduction_to_html/getting_started/index.md
index 59569691d5..db113dfdce 100644
--- a/files/fr/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/fr/learn/html/introduction_to_html/getting_started/index.md
@@ -703,7 +703,7 @@ Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :
 
 Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second `<p>` comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur (<) et supérieur (>) par leurs références de caractère.
 
-{{ EmbedLiveSample("Références_dentités", 700, 200, "", "") }}
+{{ EmbedLiveSample("Références_d\'entités_inclure_les_caractères_spéciaux_en_HTML", 700, 200) }}
 
 > **Note :** Vous n'avez pas besoin d'utiliser des références d'entité de caractères pour d'autres symboles — les navigateurs modernes les restitueront sans problème à condition que [vous définissiez votre encodage de caractères en UTF-8](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#définition_de_lencodage_des_caractères_du_document).
 
diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.md b/files/fr/learn/javascript/asynchronous/introducing/index.md
index f86e565338..2daeba6240 100644
--- a/files/fr/learn/javascript/asynchronous/introducing/index.md
+++ b/files/fr/learn/javascript/asynchronous/introducing/index.md
@@ -73,7 +73,7 @@ Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragrap
 <button>Cliquez sur moi</button>
 ```
 
-{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}
+{{EmbedLiveSample('JavaScript_synchrone', '100%', '110px')}}
 
 > **Note :** Il est important de se rappeler que [`alert()`](/fr/docs/Web/API/Window/alert), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.
 
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md
index 50bb6db903..e92f6f357f 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.md
+++ b/files/fr/learn/javascript/first_steps/arrays/index.md
@@ -157,7 +157,7 @@ Comme précédemment, initions‑nous aux bases pratiques des tableaux en entran
 </html>
 ```
 
-{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}
+{{ EmbedLiveSample('Qu\'est‑ce_qu\'un_tableau_?', '100%', 300) }}
 
 ### Créer un tableau
 
diff --git a/files/fr/learn/javascript/first_steps/variables/index.md b/files/fr/learn/javascript/first_steps/variables/index.md
index eee7f25dc7..fddb13eae8 100644
--- a/files/fr/learn/javascript/first_steps/variables/index.md
+++ b/files/fr/learn/javascript/first_steps/variables/index.md
@@ -48,7 +48,7 @@ button.onclick = function() {
 }
 ```
 
-{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}
+{{ EmbedLiveSample('Qu\'est_ce_qu\'une_variable_?', '100%', 50) }}
 
 Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.
 
diff --git a/files/fr/mdn/structures/live_samples/index.md b/files/fr/mdn/structures/live_samples/index.md
index 8fe8e96a8b..d0b52b66cd 100644
--- a/files/fr/mdn/structures/live_samples/index.md
+++ b/files/fr/mdn/structures/live_samples/index.md
@@ -147,7 +147,7 @@ el.onclick = function() {
 
 Voici le résultat de l'exécution des blocs de code ci-dessus via `\{{EmbedLiveSample('live_sample_demo')}}` :
 
-{{EmbedLiveSample('live_sample_demo')}}
+{{EmbedLiveSample('Démonstration_en_direct')}}
 
 Voici un lien qui résulte de l'appel de ces blocs de code via `\{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}`:
 
diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.md b/files/fr/web/accessibility/aria/roles/button_role/index.md
index 39b311fdb0..6a25a27938 100644
--- a/files/fr/web/accessibility/aria/roles/button_role/index.md
+++ b/files/fr/web/accessibility/aria/roles/button_role/index.md
@@ -168,7 +168,7 @@ function handleCommand(event) {
 }
 ```
 
-{{EmbedLiveSample("basic_button_example")}}
+{{EmbedLiveSample("Exemple_de_bouton_simple")}}
 
 ### Exemple d'interrupteur
 
@@ -242,7 +242,7 @@ function toggleButton(element) {
 
 #### Résultat
 
-{{EmbedLiveSample('toggle_button_example')}}
+{{EmbedLiveSample('Exemple_d\'interrupteur')}}
 
 ## Accessibilité
 
diff --git a/files/fr/web/web_components/using_templates_and_slots/index.md b/files/fr/web/web_components/using_templates_and_slots/index.md
index 0301ce8fa9..22917977ac 100644
--- a/files/fr/web/web_components/using_templates_and_slots/index.md
+++ b/files/fr/web/web_components/using_templates_and_slots/index.md
@@ -240,7 +240,7 @@ body { margin-top: 47px }
 
 Assemblons l'ensemble des fragments pour voir le résultat final.
 
-{{ EmbedLiveSample('exemple_complet', '300','400','element-details.png','') }}
+{{ EmbedLiveSample('Un_exemple_plus_complexe', '300','400','element-details.png','') }}
 
 Quelques notes à propos du résultat affiché :