Fixes #333 (#350)

* Revamp fr page to bring to parity w/ en-US  b7ebc85
* Minor sentence fix

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>

1 files changed, 59 insertions, 50 deletions

diff --git a/files/fr/web/xpath/index.html b/files/fr/web/xpath/index.html
index 1d6260a28e..ea5fb05e45 100644
--- a/files/fr/web/xpath/index.html
+++ b/files/fr/web/xpath/index.html
@@ -2,71 +2,80 @@
 title: XPath
 slug: Web/XPath
 tags:
+  - CSS Selectors
   - DOM
   - JXON
+  - Landing
+  - Path
   - XML
   - XPath
   - XSLT
 translation_of: Web/XPath
 ---
-<p><strong>XPath</strong> signifie XML Path Language ; il utilise une syntaxe non-XML permettant de manière souple d'adresser (en pointant vers) différentes parties d'un document <a href="/fr/XML" title="fr/XML">XML</a>. Il sert également à tester la correspondance de nœuds dans un document avec un schéma donné.</p>
+<div>{{XSLTRef}}</div>
 
-<p>XPath est principalement utilisé dans <a href="/fr/XSLT" title="fr/XSLT">XSLT</a>, mais il peut être utilisé pour parcourir de façon plus puissante le <a href="/fr/DOM" title="fr/DOM">DOM</a> de n'importe quels documents basés sur le XML tels que le HTML et le <a href="/fr/XUL" title="fr/XUL">XUL</a>, plutôt que de s'appuyer sur la méthode {{ Domxref("document.getElementById") }}, la propriété {{ Domxref("element.childNodes") }}, etc.</p>
+<p class="summary"><span class="seoSummary">XPath est une abréviation pour <i>XML Path Language</i> (qu'on pourrait traduire en français par « langage de chemin XML »). Ce langage utilise une syntaxe non-XML pour cibler différentes parties d'un document <a href="/fr/docs/Web/XML/XML_introduction">XML</a>. Il peut aussi être utilisé pour tester certains nœuds d'un document afin de déterminer s'ils suivent un motif particulier.</span></p>
 
-<p>XPath utilise une notation à cheminement (comme dans les URLs) pour parcourir la structure hiérarchique d'un document XML. Il s'agit d'une syntaxe non XML, donc elle peut être employée dans des URI et des valeurs d'attribut XML.</p>
+<p>XPath est principalement utilisé avec <a href="/fr/docs/Web/XSLT">XSLT</a>, mais on peut tout aussi bien l'utiliser afin de naviguer dans le <a href="/fr/docs/Web/API/Document_Object_Model">DOM</a> de tout document structuré avec un langage semblable à XML (<a href="/fr/docs/Web/HTML">HTML</a> ou <a href="/fr/docs/Web/SVG">SVG</a> par exemple) grâce à l'interface <a href="/fr/docs/Web/API/XPathExpression"><code>XPathExpression</code></a>. Cela permet d'éviter les méthodes <a href="/fr/docs/Web/API/Document/getElementById"><code>Document.getElementById()</code></a> ou <a href="/fr/docs/Web/API/ParentNode/querySelectorAll"><code>ParentNode.querySelectorAll()</code></a> ou encore les propriétés <a href="/fr/docs/Web/API/Node/childNodes"><code>Node.childNodes</code></a>.</p>
 
-<table class="topicpage-table">
- <tbody>
-  <tr>
-   <td>
-    <h2 class="Documentation" id="Documentation" name="Documentation"><a href="/Special:Tags?tag=XPath&amp;language=fr" title="Special:Tags?tag=XPath&amp;language=fr">Documentation</a></h2>
+<p>XPath utilise une notation en chemin (à l'instar des URL) pour naviguer dans la structure hiérarchique d'un document XML. Sa syntaxe est qualifiée de « non-XML » car un chemin XPath peut être utilisé au sein d'URI ou de valeurs d'attribut XML.</p>
 
-    <dl>
-     <dt><a href="/fr/Introduction_à_l'utilisation_de_XPath_avec_JavaScript" title="fr/Introduction_à_l'utilisation_de_XPath_avec_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></dt>
-     <dd><small>Description d'une usage non-XSLT de XPath.</small></dd>
-    </dl>
+<div class="notecard note">
+  <b>Note</b>
+  <p>La prise en charge de XPath est hétérogène. Si l'implémentation de Firefox est relativement correcte (malgré l'absence de volonté de l'améliorer encore), d'autres navigateurs implémentent une surface moindre de ces fonctionnalités (voire aucune). Si vous avez besoin d'une prothèse (<i>polyfill</i>), vous pouvez vous tourner vers <a href="http://nchc.dl.sourceforge.net/project/js-xpath/js-xpath/1.0.0/xpath.js">js-xpath</a> ou <a href="https://github.com/google/wicked-good-xpath">wicked-good-xpath</a>.</p>
+</div>
 
-    <dl>
-     <dt><a href="/fr/XPath/Axes" title="fr/XPath/Axes">XPath:Axes</a></dt>
-     <dd><small>Liste et définition des sélecteurs de nœuds (axes) définies dans les spécifications de XPath. Axes servent à décrire les relations entre des nœuds.</small></dd>
-    </dl>
+<h2 id="Documentation">Documentation</h2>
 
-    <dl>
-     <dt><a href="/fr/XPath/Fonctions" title="fr/XPath/Fonctions">XPath:Fonctions</a></dt>
-     <dd><small>Liste et description des fonctions principales XPath et celles spécifiques à XSLT ajoutées à XPath.</small></dd>
-    </dl>
+<dl>
+ <dt><a href="/fr/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></dt>
+ <dd>Une utilisation de XPath qui n'est pas basée sur XSLT.</dd>
+ <dt><a href="/fr/docs/Web/XPath/Axes">Axes XPath</a></dt>
+ <dd>La liste et la définition des axes sont définies dans la spécification XPath. Les axes sont utilisés afin de décrire les relations entre les nœuds.</dd>
+ <dt><a href="/fr/docs/Web/XPath/Functions">Functions XPath</a></dt>
+ <dd>La liste et la description des fonctions principales de XPath et des additions propres à XSLT.</dd>
+ <dt><a href="/fr/docs/Web/XSLT/Transforming_XML_with_XSLT">Transformer du XML avec XSLT</a></dt>
+ <dd>XSLT utilise XPath afin de cibler les segments d'un document XML pour ensuite les transformer.</dd>
+ <dt><a href="/fr/docs/Web/XPath/Snippets">Fragments de code XPath</a></dt>
+ <dd>Un ensemble d'exemples de code réutilisables en JavaScript qui utilisent les API <a href="https://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath </a>.</dd>
+ <dt><a href="https://www.xml.com/pub/a/2000/08/holman/">Qu'est-ce que XSLT ? (en anglais)</a></dt>
+ <dd>Une introduction à XSLT et XPath sans besoin de connaissances préalables. Le contexte, la structure, les concepts ainsi qu'une terminologie introductive sont fournis au lecteur.</dd>
+</dl>
 
-    <dl>
-     <dt><a href="/fr/Transformations_XML_avec_XSLT" title="fr/Transformations_XML_avec_XSLT">Transformations XML avec XSLT</a></dt>
-     <dd><small>XSLT utilise XPath pour obtenir des segments de code dans un document XML qu'il veut transformer.</small></dd>
-    </dl>
+<h2 id="Tools">Outils</h2>
 
-    <dl>
-     <dt><a href="/fr/Utilisation_de_XPath" title="fr/Utilisation_de_XPath">Utilisation de XPath</a></dt>
-     <dd><small>Extraits de code et exemples d'utilisation de XPath.</small></dd>
-    </dl>
+<dl>
+ <dt><a href="https://addons.mozilla.org/fr/firefox/addon/chropath-for-firefox/">ChroPath</a></dt>
+ <dd>Un module complémentaire de Firefox qui ajoute un panneau dédié à XPath au sein des outils de développement.</dd>
+ <dt><a href="https://extendsclass.com/xpath-tester.html">XPath tester</a></dt>
+ <dd>Un outil en ligne pour tester des expressions XPath.</dd>
+</dl>
 
-    <dl>
-     <dt><a class="external" href="">Tutoriel XSLT &amp; XPath</a> (en)</dt>
-     <dd><small>Le tutoriel TopXML XSLT introduit les bases des concepts XSLT &amp; XPath, de la syntaxe et de la programmation.</small></dd>
-    </dl>
+<h2 id="Related_Topics">Voir aussi</h2>
 
-    <dl>
-     <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">Qu'est ce que XSLT ?</a> (en)</dt>
-     <dd><small>Cette introduction exhaustive à XSLT et XPath ne nécessite aucun prérequis des technologies, et guide le lecteur à travers la terminologie, les concepts, la structure et le contexte.</small></dd>
-    </dl>
+<ul>
+ <li><a href="/fr/docs/Web/XSLT">XSLT</a>, <a href="/fr/docs/Web/XML">XML</a>, <a href="/fr/docs/Web/API/Document_Object_Model">DOM</a></li>
+ <li><a href="/fr/docs/Web/XPath/Comparison_with_CSS_selectors">Comparaison entre XPath et les sélecteurs CSS</a></li>
+</ul>
 
-    <p><span class="alllinks"><a href="/Special:Tags?tag=XPath&amp;language=fr" title="Special:Tags?tag=XPath&amp;language=fr">Tous les articles...</a></span></p>
-   </td>
-   <td>
-    <h2 class="Related_Topics" id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s">Sujets liés</h2>
-
-    <dl>
-     <dd><a href="/fr/XSLT" title="fr/XSLT">XSLT</a>, <a href="/fr/XQuery" title="fr/XQuery">XQuery</a>, <a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/DOM" title="fr/DOM">DOM</a></dd>
-    </dl>
-
-
-   </td>
-  </tr>
- </tbody>
-</table>
+<section id="Quick_links">
+<ol>
+ <li><strong><a href="/fr/docs/Web/XSLT">XSLT</a></strong></li>
+ <li><strong><a href="/fr/docs/Web/EXSLT">EXSLT</a></strong></li>
+ <li><strong><a href="/fr/docs/Web/XPath">XPath</a></strong></li>
+ <li class="toggle">
+  <details open><summary>Guides</summary>
+  <ol>
+   <li><a href="/fr/docs/Web/XPath/Comparison_with_CSS_selectors">Comparaison entre XPath et les sélecteurs CSS</a></li>
+   <li><a href="/fr/docs/Web/XPath/Snippets">Exemples de fragments XPath</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary><a href="/fr/docs/Web/XPath/Axes">Axes XPath</a></summary>{{ListSubpagesForSidebar("/fr/docs/Web/XPath/Axes")}}</details>
+ </li>
+ <li class="toggle">
+  <details open><summary><a href="/fr/docs/Web/XPath/Functions">Fonctions XPath</a></summary>{{ListSubpagesForSidebar("/fr/docs/Web/XPath/Functions")}}</details>
+ </li>
+</ol>
+</section>