Prepare HTML section for Markdown conversion (#2628)

* Remove summary classes

* Remove useless spans

* Remove notranslate

* Fix element index page (cf en-US)

* Align page vs en-US cf8bcd9 for CI

* Remove hidden classes

* remove ids

* Fix notes - part 1 / n

* Fix notes - part 2/2

* Fix warnings

* fix dls and some other issues

* Fix imgs and styles

1 files changed, 6 insertions, 10 deletions

diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html
index 73604d285f..c5e53db9ef 100644
--- a/files/fr/web/html/attributes/pattern/index.html
+++ b/files/fr/web/html/attributes/pattern/index.html
@@ -12,7 +12,7 @@ original_slug: Web/HTML/Attributs/pattern
 ---
 <div>{{HTMLSidebar}}</div>
 
-<p class="summary">L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> en lecture seule, rattachée à l'objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a>, vaudra <code>true</code>.</p>
+<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> en lecture seule, rattachée à l'objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a>, vaudra <code>true</code>.</p>
 
 <p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>.</p>
 
@@ -20,9 +20,8 @@ original_slug: Web/HTML/Attributs/pattern
 
 <p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p>
 
-<div class="notecard note">
-  <p><b>Note :</b></p>
-  <p>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-title"><code>title</code></a> afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p>
+<div class="note">
+  <p><strong>Note :</strong>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-title"><code>title</code></a> afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p>
 </div>
 
 <p>Certains types d'<code>&lt;input&gt;</code> qui prennent en charge l'attribut <code>pattern</code> (notamment <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule <a href="/fr/docs/Web/API/ValidityState/typeMismatch"><code>typeMismatch</code></a> vaudra <code>true</code>.</p>
@@ -38,9 +37,9 @@ original_slug: Web/HTML/Attributs/pattern
 
 <h2 id="examples">Exemples</h2>
 
+<h3 id="Exemple 1">Exemple 1</h3>
 <p>Avec le fragment de code HTML suivant :</p>
 
-<div id="exemple1">
 <pre class="brush: html">&lt;p&gt;
  &lt;label&gt;Veuillez saisir votre numéro de téléphone au format (123)456-7890
   (&lt;input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/&gt;)-
@@ -57,8 +56,7 @@ original_slug: Web/HTML/Attributs/pattern
   border: red solid 3px;
 }</pre>
 
-<div>{{EmbedLiveSample("exemple1", 300, 80)}}</div>
-</div>
+<div>{{EmbedLiveSample("Exemple_1", 300, 80)}}</div>
 
 <p>En utilisant les attributs <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> et <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> à la place, on aurait eu les propriétés <a href="/fr/docs/Web/API/validityState/tooLong"><code>validityState.tooLong</code></a> ou <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> qui auraient valu <code>true</code>.</p>
 
@@ -81,8 +79,7 @@ original_slug: Web/HTML/Attributs/pattern
   &lt;/div&gt;
 &lt;/form&gt;</pre>
 
-<div class="hidden">
-<pre class="brush: css">div {
+<pre class="brush: css hidden">div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -107,7 +104,6 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
 }</pre>
-</div>
 
 <p>Cela donne le résultat suivant :</p>