Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

1 files changed, 27 insertions, 49 deletions

diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
index b0755184e9..213a383e88 100644
--- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 <div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
 
-<p class="summary">L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p>
+<p>L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
    <th scope="row">Pré-requis:</th>
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 <p>La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.</p>
 
-<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg"></p>
 
 <p>Le contenu structuré facilite la lecture et la rend plus agréable.</p>
 
@@ -90,7 +90,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 <p>Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !</p>
 
-<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png" style="display: block; margin: 0px auto;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>
+<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png"></p>
 
 <p>Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :</p>
 
@@ -109,10 +109,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 <p>Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton <em>Réinitialiser</em>. Si vous êtes bloqués, appuyez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p>
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+<pre class="brush: html hidden">&lt;h2&gt;Sortie directe&lt;/h2&gt;
 
 &lt;div class="output" style="min-height: 50px;"&gt;
 &lt;/div&gt;
@@ -129,7 +126,7 @@ Mes jambes sont en carton et je suis mariée à un poisson.&lt;/textarea&gt;
   &lt;input id="solution" type="button" value="Voir la solution"&gt;
 &lt;/div&gt;</pre>
 
-<pre class="brush: css">html {
+<pre class="brush: css hidden">html {
   font-family: sans-serif;
 }
 
@@ -149,7 +146,7 @@ body {
   background: #f5f9fa;
 }</pre>
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+<pre class="brush: js hidden">var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -227,9 +224,8 @@ textarea.onkeyup = function(){
 
   updateCode();
 };</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 370) }}</p>
+<p>{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}</p>
 
 <h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3>
 
@@ -282,11 +278,7 @@ houmous
 
 <p>Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.</p>
 
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code</h6>
-
-
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+<pre class="brush: html hidden">&lt;h2&gt;Live output&lt;/h2&gt;
 
 &lt;div class="output" style="min-height: 50px;"&gt;
 &lt;/div&gt;
@@ -304,7 +296,7 @@ houmous&lt;/textarea&gt;
   &lt;input id="solution" type="button" value="Voir la solution"&gt;
 &lt;/div&gt;</pre>
 
-<pre class="brush: css">html {
+<pre class="brush: css hidden">html {
   font-family: sans-serif;
 }
 
@@ -324,7 +316,7 @@ body {
   background: #f5f9fa;
 }</pre>
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+<pre class="brush: js hidden">var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -402,9 +394,8 @@ textarea.onkeyup = function(){
 
   updateCode();
 };</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}</p>
 
 <h3 id="Listes_ordonnées">Listes ordonnées</h3>
 
@@ -430,11 +421,7 @@ Roulez sur 300 mètres, l'école est sur votre droite</pre>
 
 <p>Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.</p>
 
-<div class="hidden">
-<h6 id="Playable_code_3">Playable code</h6>
-
-
-<pre class="brush: html">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+<pre class="brush: html hidden">&lt;h2&gt;Sortie directe&lt;/h2&gt;
 
 &lt;div class="output" style="min-height: 50px;"&gt;
 &lt;/div&gt;
@@ -453,7 +440,7 @@ Roulez sur 300 mètres, l'école est sur votre droite&lt;/textarea&gt;
   &lt;input id="solution" type="button" value="Voir la solution"&gt;
 &lt;/div&gt;</pre>
 
-<pre class="brush: css">html {
+<pre class="brush: css hidden">html {
   font-family: sans-serif;
 }
 
@@ -473,7 +460,7 @@ body {
   background: #f5f9fa;
 }</pre>
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+<pre class="brush: js hidden">var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -551,18 +538,14 @@ textarea.onkeyup = function(){
 
   updateCode();
 };</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>
+<p>{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}</p>
 
 <h3 id="Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine">Apprentissage actif : mettre des balises pour une recette de cuisine</h3>
 
 <p>Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.</p>
 
-<div class="hidden">
-<h6 id="Playable_code_4">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+<pre class="brush: html hidden">&lt;h2&gt;Sortie directe&lt;/h2&gt;
 
 &lt;div class="output" style="min-height: 50px;"&gt;
 &lt;/div&gt;
@@ -605,7 +588,7 @@ textarea.onkeyup = function(){
   &lt;input id="solution" type="button" value="Voir la solution"&gt;
 &lt;/div&gt;</pre>
 
-<pre class="brush: css">html {
+<pre class="brush: css hidden">html {
   font-family: sans-serif;
 }
 
@@ -625,7 +608,7 @@ body {
   background: #f5f9fa;
 }</pre>
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+<pre class="brush: js hidden">var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -703,9 +686,8 @@ function insertAtCaret(text) {
 
   updateCode();
 };</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>
+<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}</p>
 
 <p>Si vous êtes bloqué, vous pouvez cliquer sur le bouton <em>Voir la solution</em>, ou alors regarder l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> sur le dépôt GitHub.</p>
 
@@ -775,14 +757,11 @@ function insertAtCaret(text) {
 <pre class="brush: html">&lt;p&gt;Ce liquide est &lt;strong&gt;hautement toxique&lt;/strong&gt; —
 si vous en buvez, &lt;strong&gt;vous pourriez en &lt;em&gt;mourir&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
 
-<h3 id="Apprentissage_actif_soulignez_l'important_!">Apprentissage actif : soulignez l'important !</h3>
+<h3 id="Apprentissage_actif_soulignez_l'important">Apprentissage actif : soulignez l'important</h3>
 
 <p>Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.</p>
 
-<div class="hidden">
-<h6 id="Playable_code_5">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+<pre class="brush: html hidden">&lt;h2&gt;Live output&lt;/h2&gt;
 
 &lt;div class="output" style="min-height: 50px;"&gt;
 &lt;/div&gt;
@@ -804,7 +783,7 @@ si vous en buvez, &lt;strong&gt;vous pourriez en &lt;em&gt;mourir&lt;/em&gt;&lt;
   &lt;input id="solution" type="button" value="Voir la solution"&gt;
 &lt;/div&gt;</pre>
 
-<pre class="brush: css">html {
+<pre class="brush: css hidden">html {
   font-family: sans-serif;
 }
 
@@ -825,7 +804,7 @@ body {
 }</pre>
 
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+<pre class="brush: js hidden">var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -902,9 +881,8 @@ textarea.onkeyup = function(){
 
   updateCode();
 };</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+<p>{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}</p>
 
 <h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3>
 
@@ -916,12 +894,12 @@ textarea.onkeyup = function(){
 
 <ul>
  <li>{{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…</li>
- <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, <span>une phrase liminaire</span>…</li>
+ <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…</li>
  <li>{{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...</li>
 </ul>
 
 <div class="note">
-<p>Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code>&lt;u&gt;</code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p>
+<p><strong>Note :</strong> Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code>&lt;u&gt;</code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p>
 </div>
 
 <pre class="brush: html">&lt;!-- noms scientifiques --&gt;