convert content to md

1 files changed, 60 insertions, 59 deletions

diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md
index 3c1c278420..5846c64b47 100644
--- a/files/fr/web/css/display-box/index.md
+++ b/files/fr/web/css/display-box/index.md
@@ -7,100 +7,101 @@ tags:
   - Type de donnée
 translation_of: Web/CSS/display-box
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.</p>
+Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<dl>
- <dt><code>contents</code> {{Experimental_Inline}}</dt>
- <dd>L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur <code>contents</code> affecte les éléments « inhabituels » tels que les éléments remplacés. Voir <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> pour plus de détails.<br>
- <br>
- À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec <code>display: contents</code> sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran<em>.</em></dd>
- <dt><code>none</code></dt>
- <dd>Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.<br>
- Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.</dd>
-</dl>
+- `contents` {{Experimental_Inline}}
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+  - : L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur `contents` affecte les éléments « inhabituels » tels que les éléments remplacés. Voir [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) pour plus de détails.
+
+    À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec `display: contents` sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran*.*
+
+- `none`
+  - : Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
+    Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.
+
+### Syntaxe formelle
 
 {{CSSSyntax}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="display_none"><code>display: none</code></h3>
+### `display: none`
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">p.secret {
+```css
+p.secret {
   display: none;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Texte visible&lt;/p&gt;
-&lt;p class="secret"&gt;Texte invisible&lt;/p&gt;</pre>
+```html
+<p>Texte visible</p>
+<p class="secret">Texte invisible</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>
+{{EmbedLiveSample("display_none", "100%", 60)}}
 
-<h3 id="display_contents"><code>display: contents</code></h3>
+### `display: contents`
 
-<p>Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec <code>display: contents</code> et l'élément <code>&lt;div&gt;</code> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.</p>
+Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec `display: contents` et l'élément `<div>` ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.outer {
+```css
+.outer {
   border: 2px solid red;
   width: 300px;
   display: contents;
 }
 
-.outer &gt; div {
+.outer > div {
   border: 1px solid green;
 }
-</pre>
+```
+
+#### HTML
+
+```html
+<div class="outer">
+  <div>Inner div.</div>
+</div>
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### Résultat
 
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div&gt;Inner div.&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+{{EmbedLiveSample("Display_contents", 300, 60)}}
 
-<h4 id="Résultat_2">Résultat</h4>
+## Accessibilité
 
-<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
+Via leur implémentation, la plupart des navigation retireront un élément de [l'arbre d'accessibilité](/fr/docs/Apprendre/a11y/What_is_accessibility) si celui-ci reçoit `display: contents`. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon [la spécification CSSWG](https://drafts.csswg.org/css-display/#the-display-properties).
 
-<h2 id="Accessibilité">Accessibilité</h2>
+- [Améliorer l'accessibilité du contenu avec `display: contents`, par Hidde de Vries (en anglais)](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
+- [`display: contents` n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
 
-<p>Via leur implémentation, la plupart des navigation retireront un élément de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a> si celui-ci reçoit <code>display: contents</code>. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
+## Compatibilité des navigateurs
 
-<ul>
- <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Améliorer l'accessibilité du contenu avec <code>display: contents</code>, par Hidde de Vries (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)</a></li>
-</ul>
+### Prise en charge `contents`
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("css.properties.display.contents", 10)}}
 
-<h3 id="Prise_en_charge_contents">Prise en charge <code>contents</code></h3>
+## Voir aussi
 
-<p>{{Compat("css.properties.display.contents", 10)}}</p>
+- {{CSSxRef("display")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{CSSxRef("&lt;display-outside&gt;")}}
+  - {{CSSxRef("&lt;display-inside&gt;")}}
+  - {{CSSxRef("&lt;display-listitem&gt;")}}
+  - {{CSSxRef("&lt;display-internal&gt;")}}
+  - {{CSSxRef("&lt;display-legacy&gt;")}}
 
-<ul>
- <li>{{CSSxRef("display")}}
-  <ul>
-   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
-   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
-  </ul>
- </li>
- <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS (en anglais)</a></li>
- <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Un balisage plus accessible avec <code>display: contents</code> (en anglais)</a></li>
-</ul>
+- [`display: contents` n'est pas un outil de réinitialisation CSS (en anglais)](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
+- [Un balisage plus accessible avec `display: contents` (en anglais)](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)