unslug fr: move

29 files changed, 7788 insertions, 0 deletions

diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html
new file mode 100644
index 0000000000..4f07dbb7b6
--- /dev/null
+++ b/files/fr/learn/html/cheatsheet/index.html
@@ -0,0 +1,186 @@
+---
+title: Cheatsheet HTML
+slug: Apprendre/HTML/Cheatsheet
+tags:
+  - Cheatsheet
+  - HTML
+  - Intermediate
+  - Learn
+translation_of: Learn/HTML/Cheatsheet
+---
+<div>{{draft}}</div>
+
+<p>Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (<em>cheatsheet</em>) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une <a href="/fr/docs/Web/HTML/Element">documentation HTML exhaustive</a> ainsi que différents <a href="/fr/Apprendre/HTML/Comment">tutoriels HTML détaillés</a>. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.</p>
+
+<div class="note">
+<p><strong>Rappel :</strong> Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.</p>
+</div>
+
+<h2 id="Mise_en_forme_inline">Mise en forme <em>inline</em></h2>
+
+<p>Un élément dit « en ligne » ou <em>inline</em> prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.</p>
+
+<table class="nostripe standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Utilisation</th>
+   <th scope="col">Fragment de code</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Un lien simple</td>
+   <td style="vertical-align: top;"><code>&lt;a href="https://developer.mozilla.org"&gt;Un lien vers MDN&lt;/a&gt;</code></td>
+   <td style="vertical-align: top;"><a href="https://developer.mozilla.org">Un lien vers MDN</a></td>
+  </tr>
+  <tr>
+   <td>Une image simple</td>
+   <td><code>&lt;img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" /&gt;</code></td>
+   <td><img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png"></td>
+  </tr>
+  <tr>
+   <td>Un texte avec emphase</td>
+   <td><code>&lt;em&gt;Je suis distingué&lt;/em&gt;</code></td>
+   <td><em>Je suis distingué</em></td>
+  </tr>
+  <tr>
+   <td>Un texte marqué comme important</td>
+   <td><code>&lt;strong&gt;Je suis important&lt;/strong&gt;</code></td>
+   <td><strong>Je suis important</strong></td>
+  </tr>
+  <tr>
+   <td>Un texte mis en avant</td>
+   <td><code>&lt;mark&gt;Remarquez-moi&lt;/mark&gt;</code></td>
+   <td><mark>Remarquez-moi</mark></td>
+  </tr>
+  <tr>
+   <td>Barrer du texte qui n'est plus pertinent</td>
+   <td><code>&lt;s&gt;Je ne suis plus d'actualité ou plus pertinent&lt;/s&gt;</code></td>
+   <td><s>Je ne suis plus d'actualité ou plus pertinent</s></td>
+  </tr>
+  <tr>
+   <td>Souligner pour ajouter une annotation non-textuelle</td>
+   <td><code>Ceci est &lt;u&gt;mal orthographié&lt;/u&gt;</code></td>
+   <td>Ceci est <u>mal orthographié</u></td>
+  </tr>
+  <tr>
+   <td>Du texte qui doit être affiché en indice</td>
+   <td><code>H&lt;sub&gt;2&lt;/sub&gt;O</code></td>
+   <td>H<sub>2</sub>O</td>
+  </tr>
+  <tr>
+   <td>Du texte qui doit être affiché en exposant</td>
+   <td><code>M&lt;sup&gt;me&lt;/sup&gt; de Bovary</code></td>
+   <td>M<sup>me</sup> de Bovary</td>
+  </tr>
+  <tr>
+   <td>Une citation dans le cours du texte</td>
+   <td><code>Il a dit : &lt;q&gt;Je suis ton père.&lt;/q&gt;</code></td>
+   <td>Il a dit : <q>Je suis ton père.</q></td>
+  </tr>
+  <tr>
+   <td>Un saut de ligne</td>
+   <td><code>Ligne 1 &lt;br/&gt; Ligne 2</code></td>
+   <td>Ligne 1<br>
+    Ligne 2</td>
+  </tr>
+  <tr>
+   <td>Du code informatique (code « machine »)</td>
+   <td><code>&lt;code&gt;System.print.File("coucou")&lt;/code&gt;</code></td>
+   <td><code>System.print.File("coucou")</code></td>
+  </tr>
+  <tr>
+   <td>Un fichier audio intégré</td>
+   <td><code>&lt;audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3"&gt;L'élément &lt;code&gt;audio&lt;/code&gt; n'est pas supporté.&lt;/audio&gt;</code></td>
+   <td>
+    <audio>L'élément <code>audio</code> n'est pas supporté.</audio>
+   </td>
+  </tr>
+  <tr>
+   <td>Un fichier vidéo intégré</td>
+   <td><code>&lt;video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"&gt;L'élément &lt;code&gt;video&lt;/code&gt; n'est pas supporté.&lt;/video&gt;</code></td>
+   <td>
+    <video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mise_en_forme_block">Mise en forme <em>block</em></h2>
+
+<p>Les éléments de bloc (<em>block</em> en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.</p>
+
+<table class="nostripe standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Utilisation</th>
+   <th scope="col">Fragment de code</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Un paragraphe simple</td>
+   <td style="vertical-align: top;">
+    <p><code>&lt;p&gt;Je suis un paragraphe&lt;/p&gt;</code><br>
+     <code>&lt;p&gt;Je suis un autre paragraphe&lt;/p&gt; </code></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p>Je suis un paragraphe</p>
+
+    <p>Je suis un autre paragraphe</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Une liste non-ordonnée</td>
+   <td style="vertical-align: top;"><code>&lt;ul&gt;<br>
+      &lt;li&gt;Je suis un élément&lt;/li&gt;<br>
+      &lt;li&gt;Je suis un autre élément&lt;/li&gt;<br>
+    &lt;ul&gt;</code></td>
+   <td style="vertical-align: top;">
+    <ul>
+     <li>Je suis un élément</li>
+     <li>Je suis un autre élément</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Une liste ordonnée</td>
+   <td style="vertical-align: top;"><code>&lt;ol&gt;<br>
+      &lt;li&gt;Je suis le premier élément&lt;/li&gt;<br>
+      &lt;li&gt;Je suis le deuxième élément&lt;/li&gt;<br>
+    &lt;ol&gt;</code></td>
+   <td style="vertical-align: top;">
+    <ol>
+     <li>Je suis le premier élément</li>
+     <li>Je suis le deuxième élément</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Une ligne horizontale</td>
+   <td style="vertical-align: top;"><code>&lt;hr/&gt;</code></td>
+   <td style="vertical-align: top;">
+    <hr></td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Des titres de différents niveaux (du plus important au moins important)</td>
+   <td style="vertical-align: top;">
+    <p>&lt;h2&gt;Un titre de niveau 2&lt;/h2&gt;<br>
+     &lt;h3&gt;Un titre de niveau 3&lt;/h3&gt;<br>
+     &lt;h4&gt;Un titre de niveau 4&lt;/h4&gt;<br>
+     &lt;h5&gt;Un titre de niveau 5&lt;/h5&gt;</p>
+   </td>
+   <td style="vertical-align: top;">
+    <h2 id="Un_titre_de_niveau_2">Un titre de niveau 2</h2>
+
+    <h3 id="Un_titre_de_niveau_3">Un titre de niveau 3</h3>
+
+    <h4 id="Un_titre_de_niveau_4">Un titre de niveau 4</h4>
+
+    <h5 id="Un_titre_de_niveau_5">Un titre de niveau 5</h5>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
new file mode 100644
index 0000000000..836cd29e95
--- /dev/null
+++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
@@ -0,0 +1,126 @@
+---
+title: Ajouter une carte de zones cliquables sur une image
+slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image
+tags:
+  - Guide
+  - HTML
+  - Intermediate
+  - Navigation
+translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir comment <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">créer un document HTML simple</a> et connaître comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">ajouter des images accessibles à une page web.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="warning">
+<p>Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.</p>
+</div>
+
+<h2 id="Les_cartes_imagées_cliquables_et_leurs_inconvénients">Les cartes imagées cliquables et leurs inconvénients</h2>
+
+<p>Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « <em>hotspots</em> » en anglais) qui pointent chacunes vers une ressource distincte.</p>
+
+<p>Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.</p>
+
+<p><a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien">Les liens textuels</a> (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.</p>
+
+<h2 id="Comment_insérer_une_carte_imagée">Comment insérer une carte imagée</h2>
+
+<h3 id="Étape_1_l'image">Étape 1 : l'image</h3>
+
+<p>N'importe quelle image ne fera pas l'affaire pour construire une telle carte.</p>
+
+<ul>
+ <li>L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut <code>alt</code> est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).</li>
+ <li>L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.</li>
+ <li>Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">Une image de 72 pixels CSS de long et de large</a> est un minimum acceptable (pour voir le problème posé par de trop petites régions : <a href="http://www.goethe-verlag.com/book2/">50languages.com</a>, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué</li>
+</ul>
+
+<p>On insère une image <a href="http://developer.mozilla.org/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">de la même façon que d'habitude</a> (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, <code>alt</code> peut être laissé vide : <code>alt=""</code>, si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.</p>
+
+<p>Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut <code>usemap</code> :</p>
+
+<pre class="brush: html">&lt;img
+  src="image-map.png"
+  alt=""
+  usemap="#exemple-map-1" /&gt;
+</pre>
+
+<h3 id="Étape_2_Activer_les_régions_actives">Étape 2 : Activer les régions actives</h3>
+
+<p>Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut <code>usemap</code> vue juste avant :</p>
+
+<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
+
+&lt;/map&gt;
+</pre>
+
+<p>Dans cet élément <code>&lt;map&gt;</code>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.</p>
+
+<p>Les éléments <code>&lt;area&gt;</code> sont des éléments vides mais qui utilisent quatres attributs :</p>
+
+<dl>
+ <dt>{{htmlattrxref('shape','area')}}</dt>
+ <dt>{{htmlattrxref('coords','area')}}</dt>
+ <dd>
+ <p><code>shape</code> (« forme » en anglais) prend l'une de ces quatre valeurs : <code>circle</code> (pour un cercle), <code>rect</code> (pour un rectangle), <code>poly</code> (pour un polygone) ou <code>default</code> (une zone <code>default</code> occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans <code>coords</code>.</p>
+
+ <ul>
+  <li>Pour un cercle (<code>circle</code>) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.</li>
+  <li>Pour un rectange (<code>rect</code>) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.</li>
+  <li>Pour un polygone (<code>poly</code>) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).</li>
+ </ul>
+
+ <p>Les coordonnées exprimées sont données en pixels CSS.</p>
+
+ <p>Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.</p>
+ </dd>
+ <dt>{{htmlattrxref('href','area')}}</dt>
+ <dd>Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.</dd>
+ <dt>{{htmlattrxref('alt','area')}}</dt>
+ <dd>
+ <p>Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte <code>alt</code> ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir <a href="/fr/Apprendre/HTML/Comment/Créer_un_hyperlien#Écrire_des_liens_accessibles">nos conseils pour écrire des hyperliens accessibles.</a></p>
+
+ <p>Vous pouvez écrire <code>alt=""</code> si l'attribut <code>href</code> est vide <em>et</em> que l'image entière possède déjà un attribut <code>alt</code> renseigné.</p>
+ </dd>
+</dl>
+
+<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
+  &lt;area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="exemple de cercle" /&gt;
+
+  &lt;area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="exemple de rectangle" /&gt;
+
+&lt;/map&gt;</pre>
+
+<h3 id="Étape_3_S'assurer_que_la_carte_fonctionne_pour_chacun">Étape 3 : S'assurer que la carte fonctionne pour chacun</h3>
+
+<p>Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.</p>
+
+<p>Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.</p>
+
+<p>Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder <a href="https://github.com/stowball/jQuery-rwdImageMaps">ce plugin jQuery réalisé par Matt Stow.</a> Dudley Storey illustre une méthode qui consiste à <a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">utiliser SVG pour réaliser un effet de carte imagée</a> ainsi qu'une bidouille pour les images matricielles avec <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">une combinaison de SVG</a>.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("map")}}</li>
+ <li>{{htmlelement("area")}}</li>
+ <li><a href="http://www.maschek.hu/imagemap/imgmap">Un éditeur de carte de zones en ligne (en anglais)</a></li>
+ <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Des conseils sur comment gérer les cartes pour des clients mail (en anglais)</a></li>
+</ul>
diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..58e21b4603
--- /dev/null
+++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,118 @@
+---
+title: Astuces de création de pages HTML à affichage rapide
+slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide
+tags:
+  - HTML
+  - Performance
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. <br>
+ Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.</p>
+
+<h3 id="Réduire_le_poids_de_la_page">Réduire le poids de la page</h3>
+
+<p>Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:</p>
+
+<ul>
+ <li>Eliminer les espaces et les commentaires inutile.</li>
+ <li>
+  <div>Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que <a class="external" href="http://www.html-tidy.org" title="http://tidy.sourceforge.net/">HTML Tidy</a> peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre <a class="external" href="http://yuilibrary.com/projects/yuicompressor/" title="http://yuilibrary.com/projects/yuicompressor/">YUIcompressor</a>.</div>
+ </li>
+ <li>
+  <div>Verifiez que votre site ne contient pas de code inutile ou de tags superflus. </div>
+ </li>
+</ul>
+
+<p>Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.</p>
+
+<h3 id="Réduisez_le_nombre_de_fichiers">Réduisez le nombre de fichiers</h3>
+
+<p>Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions <a href="/en/HTTP" title="https://developer.mozilla.org/en/HTTP">HTTP </a>nécessaire pour télécharger une page.</p>
+
+<ul>
+ <li>Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des <a class="external" href="http://css-tricks.com/examples/ButtonMaker/" title="http://css-tricks.com/examples/ButtonMaker/">boutons graphiques en CSS</a>.</li>
+ <li>Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser <a class="external" href="http://www.gimp.org/" title="http://www.gimp.org/">Gimp</a> ou <a class="external" href="http://www.imagemagick.org/script/index.php" title="http://www.imagemagick.org/script/index.php">Imagemagik</a>.</li>
+ <li>Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.</li>
+</ul>
+
+<p>Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.</p>
+
+<h3 id="Réduire_les_domaines_des_recherches">Réduire les domaines des recherches</h3>
+
+<p>Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.</p>
+
+<h3 id="Réutiliser_le_contenu_du_cache">Réutiliser le contenu du cache</h3>
+
+<p>Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.<br>
+ En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<br>
+ En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.<br>
+ <br>
+ Plus d'informations:<br>
+ <br>
+    1. <a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers" title="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a><br>
+    2. <a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304" title="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a><br>
+    3. <a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html" title="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></p>
+
+<h3 id="Réduire_le_nombre_de_scripts_en_ligne">Réduire le nombre de scripts en ligne</h3>
+
+<p>Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().</p>
+
+<h3 id="Utilisez_le_CSS_moderne_et_des_balises_valides">Utilisez le CSS moderne et des balises valides</h3>
+
+<p>L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.<br>
+ Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.<br>
+ En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, <a class="external" href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a>  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.</p>
+
+<h3 id="Segmentez_votre_contenu">Segmentez votre contenu</h3>
+
+<p>Remplacer la mise en page basé sur des &lt;table&gt; par des blocs &lt;div&gt;, plutôt que des &lt;table&gt; très imbriquée comme dans l'exemple suivant:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;
+
+</pre>
+
+<p>Préferez des &lt;table&gt; non-imbriquées ou &lt;div&gt; comme dans l'exemple suivant:</p>
+
+<pre>&gt; TABLE &lt;TABLE&gt; ...&lt;/
+&gt; TABLE &lt;TABLE&gt; ...&lt;/
+&gt; TABLE &lt;TABLE&gt; ...&lt;/</pre>
+
+<h3 id="Préciser_la_taille_des_images_et_des_tableaux">Préciser la taille des images et des tableaux</h3>
+
+<p>Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.<br>
+ Les tableaux doivent utiliser le sélecteur CSS selector:property combination:</p>
+
+<pre>  table-layout: fixed;
+
+</pre>
+
+<p>et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.</p>
+
+<h3 id="Choisissez_les_versions_des_navigateur_ciblés">Choisissez les versions des navigateur ciblés</h3>
+
+<p><br>
+ Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.<br>
+ <br>
+ Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.<br>
+ <br>
+ Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.</p>
+
+<h3 id="Liens_connexes">Liens connexes</h3>
+
+<p><br>
+     * <a class="external" href="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html" title="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html">Optimisez vos pages avec Yslow</a><br>
+     * <a class="external" href="http://www.websiteoptimization.com/" title="http://www.websiteoptimization.com/">Livre: "Speed Up Your Site" par Andy King</a><br>
+     *<a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html" title="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html"> Site Optimization Tutorial </a>(WebMonkey) (en anglais) <br>
+     * <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (en anglais) </p>
+
+<p> </p>
+
+<p><strong>Document d'information d'origine</strong><br>
+ <br>
+     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages</p>
diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html
new file mode 100644
index 0000000000..3e8aa64e90
--- /dev/null
+++ b/files/fr/learn/html/howto/define_terms_with_html/index.html
@@ -0,0 +1,153 @@
+---
+title: Définir des termes avec HTML
+slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+translation_of: Learn/HTML/Howto/Define_terms_with_HTML
+---
+<div class="summary">
+<p>HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :</p>
+
+<blockquote>
+<dl>
+ <dt>Bleu (<em>adjectif</em>)</dt>
+ <dd>La couleur du ciel lors d'un temps clair.<br>
+ <em><q>Le ciel est bleu.</q></em></dd>
+ <dd>Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.<br>
+ <em><q>Un steak bleu s'il vous plaît.</q></em></dd>
+</dl>
+</blockquote>
+
+<p>Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :</p>
+
+<blockquote>
+<p><em><dfn>Firefox</dfn></em> est le navigateur web créé et développé par la Fondation Mozilla.</p>
+</blockquote>
+
+<p>Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.</p>
+
+<h2 id="Comment_écrire_un_description_informelle">Comment écrire un description informelle</h2>
+
+<p>Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.</p>
+
+<p>On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <code>&lt;dfn&gt;</code> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn&gt;Firefox&lt;/dfn&gt; est le navigateur créé et développé par la Fondation Mozilla.&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe <a href="/fr/Apprendre/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">des éléments HTML tout indiqués</a>.</p>
+</div>
+
+<h3 id="Cas_spécifique_les_abréviations">Cas spécifique : les abréviations</h3>
+
+<p>En ce qui concerne les abréviations, il est préférable <a href="/fr/Apprendre/HTML/Howto/Mark_abbreviations_and_make_them_understandable">de les identifier séparement</a> grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;dfn&gt;&lt;abbr&gt;HTML&lt;/abbr&gt; (hypertext markup language)&lt;/dfn&gt;
+   est un langage de description utilisé pour structurer des documents sur le Web.
+&lt;/p&gt;</pre>
+
+<div class="note">
+<p>La spécification HTML <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element">met en avant l'attribut <code>title</code></a> pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut <code>title</code> ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également <a href="http://www.w3.org/TR/html/dom.html#attr-title">ce qui est noté dans les spécifications</a>.</p>
+</div>
+
+<h3 id="Améliorer_l'accessibilité">Améliorer l'accessibilité</h3>
+
+<p>{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <code>&lt;dfn&gt;</code> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-discribedby</a></code> pour associer, formellement, un terme à sa définition :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;span id="ff"&gt;
+    &lt;dfn aria-describedby="ff"&gt;Firefox&lt;/dfn&gt;
+    est le navigateur web créé et développé par la Fondation Mozilla.
+  &lt;/span&gt;
+  Vous pouvez le télécharger sur &lt;a href="http://www.mozilla.org"&gt;mozilla.org&lt;/a&gt;
+&lt;/p&gt;</pre>
+
+<p>Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. <code>aria-describedby</code> peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <code>&lt;dfn&gt;</code>). <code>aria-describedby</code> utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.</p>
+
+<h2 id="Comment_construire_une_liste_de_descriptions">Comment construire une liste de descriptions</h2>
+
+<p>Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).</p>
+
+<div class="note">
+<p>Les listes de descriptions <a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">ne doivent pas être utilisées pour retranscrire des dialogues</a>. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici <a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">quelques recommandations pour retranscrire un dialogue dans un document web</a>.</p>
+</div>
+
+<p>Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.</p>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<p>Voici un exemple simple qui dresse une liste de descriptions de plats :</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;jambalaya&lt;/dt&gt;
+    &lt;dd&gt;
+      une entrée à base de riz qui contient généralement
+      du poulet, des saucisses, des fruits de mer et des
+      épices
+    &lt;/dd&gt;
+
+  &lt;dt&gt;sukiyaki&lt;/dt&gt;
+    &lt;dd&gt;
+      une spécialité japonaise à base de fines tranches de
+      viande, de légumes, de nouilles et qui est cuite dans
+      un sauce soja et du saké
+    &lt;/dd&gt;
+
+  &lt;dt&gt;chianti&lt;/dt&gt;
+    &lt;dd&gt;
+      un vin italien, sec, originaire de Toscane
+    &lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<div class="note">
+<p>La structure de base qu'on voit dans cet exemple alterne les termes (<code>&lt;dt&gt;</code>) et leurs descriptions (<code>&lt;dd&gt;</code>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.</p>
+</div>
+
+<h3 id="Améliorer_l'aspect_visuel">Améliorer l'aspect visuel</h3>
+
+<p>Voici comment un navigateur affichera la liste précédente :</p>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}</p>
+
+<p>Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :</p>
+
+<pre class="brush: css">dt {
+  font-weight: bold;
+}
+</pre>
+
+<p>Cela permettra d'obtenir le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("dfn")}}</li>
+ <li>{{htmlelement("dl")}}</li>
+ <li>{{htmlelement("dt")}}</li>
+ <li>{{htmlelement("dd")}}</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Comment utiliser l'attribut <code>aria-describedby</code></a></li>
+</ul>
diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html
new file mode 100644
index 0000000000..3db762dc5a
--- /dev/null
+++ b/files/fr/learn/html/howto/index.html
@@ -0,0 +1,149 @@
+---
+title: Apprendre à utiliser HTML pour résoudre des problèmes
+slug: Apprendre/HTML/Comment
+tags:
+  - CodingScripting
+  - HTML
+translation_of: Learn/HTML/Howto
+---
+<p>Une fois <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">les bases acquises</a>, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter <a href="/fr/docs/Web/HTML/Reference">notre référence HTML</a>.</p>
+
+<h2 id="Cas_d'utilisation_fréquents">Cas d'utilisation fréquents</h2>
+
+<p>HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Structure_de_base">Structure de base</h3>
+
+<p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li>
+</ul>
+
+<h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3>
+
+<p>Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Les_hyperliens">Les hyperliens</h3>
+
+<p>Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li>
+</ul>
+
+<h3 id="Images_et_multimédia">Images et multimédia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li>
+</ul>
+
+<h3 id="Script_et_mise_en_forme">Script et mise en forme</h3>
+
+<p>HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li>
+</ul>
+
+<h3 id="Intégrer_du_contenu">Intégrer du contenu</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2>
+
+<p>Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Les_formulaires">Les formulaires</h3>
+
+<p>Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre <a href="/fr/docs/Web/Guide/HTML/Formulaires">le guide dédié aux formulaires</a>. Vous pouvez commencer ici :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Comment créer un formulaire web simple</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire web</a></li>
+</ul>
+
+<h3 id="Les_informations_tabulaires">Les informations tabulaires</h3>
+
+<p>Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li>
+</ul>
+
+<h3 id="La_représentation_de_données">La représentation de données</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li>
+</ul>
+
+<h3 id="Interactivité">Interactivité</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li>
+</ul>
+
+<h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li>
+</ul>
+
+<h3 id="L'internationalisation">L'internationalisation</h3>
+
+<p>HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/fr/learn/html/howto/use_data_attributes/index.html b/files/fr/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..d67fd6a93d
--- /dev/null
+++ b/files/fr/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,79 @@
+---
+title: Utiliser les attributs de données
+slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes
+tags:
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. <a href="/fr/docs/Web/HTML/Attributs_universels#attr-data-*">Les attributs <code>data-*</code></a> nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Syntaxe_HTML">Syntaxe HTML</h2>
+
+<p>La syntaxe est simple. Tout attribut d'un élément dont le nom commence par <code>data-</code> est un attribut de données (<em>data attribute</em>). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :</p>
+
+<pre class="brush: html">&lt;article
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Accéder_via_du_code_JavaScript">Accéder via du code JavaScript</h2>
+
+<p>Lire les valeurs de ces attributs avec du <a href="/fr/docs/Web/JavaScript">JavaScript</a> est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Pour obtenir un attribut <code>data</code> avec l'objet <code>dataset</code>, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe <code>data-</code> (notez que les tirets sont convertis en <em><a href="https://fr.wikipedia.org/wiki/CamelCase">camelCase</a></em>).</p>
+
+<pre class="brush: js">var article = document.getElementById('voitureelectrique');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "voitures"</pre>
+
+<p>Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre <code>article.dataset.columns = 5</code> mettrait l'attribut à <code>"5"</code>.</p>
+
+<h2 id="Accéder_via_du_code_CSS">Accéder via du code CSS</h2>
+
+<p>Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les <a href="/fr/docs/Web/CSS">CSS</a>. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des <a href="/fr/docs/Web/CSS/content">contenus générés</a> en CSS avec la fonction {{cssxref("attr")}} :</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Vous pouvez également utiliser les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">sélecteurs d'attributs</a> en CSS pour modifier les styles en fonction des données :</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Tout cela est visible dans l'exemple<a href="https://jsbin.com/ujiday/2/edit"> JSBin</a>. </p>
+
+<p>Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de <a href="https://www.youtube.com/watch?v=On_WyUB1gOk">capture vidéo d'écran</a> où sont utilisés les contenus générés et les transitions CSS (<a href="https://jsbin.com/atawaz/3/edit">exemple JSBin</a>).</p>
+
+<p>Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.</p>
+
+<h2 id="Problèmes">Problèmes</h2>
+
+<p>Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. </p>
+
+<p>Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  <a href="https://caniuse.com/#feat=dataset">ne prennent pas en charge le <code>dataset</code></a>. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la <a href="https://jsperf.com/data-dataset">la performance de lecture des attributs de données</a>, au stockage dans des structures de données JavaScript est assez faible. Utiliser un <code>dataset</code> est même plus lent que lire les données avec <code>getAttribute()</code>.</p>
+
+<p>Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.</p>
+
+<p>Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cet article est une adaptation de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">« Utiliser les attributs de données en JavaScript et CSS »</a> publié sur hacks.mozilla.org (en anglais).</li>
+ <li>Les attributs personnalisés sont également pris en charge en SVG 2 ; consultez {{domxref("SVGElement.dataset")}} et {{SVGAttr("data-*")}} pour davantage d'informations.</li>
+ <li><em><a href="https://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a></em> (Sitepoint) (en anglais)</li>
+</ul>
diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html
new file mode 100644
index 0000000000..7db20d6d76
--- /dev/null
+++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html
@@ -0,0 +1,99 @@
+---
+title: Utiliser JavaScript au sein d'une page web
+slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web
+tags:
+  - Beginner
+  - HTML
+  - JavaScript
+  - OpenPractices
+translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage
+---
+<div class="summary">
+<p>Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="À_propos_de_JavaScript">À propos de JavaScript</h2>
+
+<p>{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.</p>
+
+<div class="note">
+<p>Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">les bases de JavaScript</a>. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter <a href="/en-US/docs/Web/JavaScript/Guide">le Guide JavaScript</a>.</p>
+</div>
+
+<h2 id="Comment_déclencher_le_code_JavaScript_depuis_le_document_HTML">Comment déclencher le code JavaScript depuis le document HTML</h2>
+
+<p>Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser <code>script</code> : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.</p>
+
+<h3 id="Faire_référence_à_un_script_externe">Faire référence à un script externe</h3>
+
+<p>Généralement, un script est écrit dans un fichier <code>.js</code> à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut <code>src</code> pointant vers le fichier du script en utilisant l'URL du fichier :</p>
+
+<pre class="brush: html">&lt;script src="chemin/vers/le/script.js"&gt;&lt;/script&gt;</pre>
+
+<h3 id="Inscrire_le_code_JavaScript_dans_le_document_HTML">Inscrire le code JavaScript dans le document HTML</h3>
+
+<p>Il est également possible d'insérer du code JavaScript directement dans la balise <code>&lt;script&gt;</code> sans fournir d'attribut <code>src</code>.</p>
+
+<pre class="brush: html">&lt;script&gt;
+window.addEventListener('load', function () {
+  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
+});
+&lt;/script&gt;</pre>
+
+<p>Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :</p>
+
+<ul>
+ <li>de rester concentré-e sur le contenu en cours</li>
+ <li>d'écrire du HTML qui se suffit à lui-même</li>
+ <li>d'écrire des applications JavaScript structurées</li>
+</ul>
+
+<h2 id="Utiliser_les_scripts_de_façon_accessible">Utiliser les scripts de façon accessible</h2>
+
+<p>L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :</p>
+
+<ul>
+ <li><strong>Tout le contenu d'un document doit être disponible sous forme de texte (structuré).</strong> HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en <a href="/fr/Learn/HTML/Howto/Create_list_of_items_with_HTML">listes non ordonnées</a> de <a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">liens</a>.</li>
+ <li><strong>Toutes les fonctionnalités doivent être accessibles depuis le clavier.</strong>
+  <ul>
+   <li>Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.</li>
+   <li>Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles  via le clavier.</li>
+   <li>Testez votre site en utilisant uniquement le clavier.</li>
+  </ul>
+ </li>
+ <li><strong>N'utilisez pas de limites de temps arbitraires.</strong> Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.</li>
+ <li><strong>Les animations doivent être courtes et légères, sans clignotement.</strong> Les clignotements peuvent agacer, ou pire, <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">entraîner des crises d'épilepsie</a>. Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.</li>
+ <li><strong>Laissez les utilisateurs initier les interactions.</strong> Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.</li>
+ <li><strong>Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé.</strong> Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit.
+  <ul>
+   <li><em>A minima</em>, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : <code>&lt;noscript&gt;Pour utiliser ce site, merci d'activer JavaScript.&lt;/noscript&gt;</code></li>
+   <li>Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur.</li>
+   <li>Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement.</li>
+   <li>
+    <p><em>Puisque tout le monde, ou presque, a JavaScript activé, <code>&lt;noscript&gt;</code> ne représente donc pas une excuse pour écrire des scripts inaccessibles.</em></p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("script")}}</li>
+ <li>{{htmlelement("noscript")}}</li>
+ <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">Une introduction pour utiliser JavaScript de façon accessible, par James Edwards (en anglais)</a></li>
+ <li><a href="http://www.w3.org/TR/WCAG20/">Les consignes d'accessibilité préconisées par le W3C</a></li>
+</ul>
diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html
new file mode 100644
index 0000000000..1874018d97
--- /dev/null
+++ b/files/fr/learn/html/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Apprendre le HTML : guides et didacticiels'
+slug: Apprendre/HTML
+tags:
+  - Apprentissage
+  - Débutant
+  - Guide
+  - HTML
+  - Introduction
+  - Rubrique
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<blockquote>
+<div>
+<p>Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.</p>
+</div>
+</blockquote>
+
+<h2 id="Parcours_dapprentissage">Parcours d'apprentissage</h2>
+
+
+
+<p>L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire <a href="/fr/docs/Web/Guide/HTML/Introduction">Introduction au HTML</a>. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :</p>
+
+<ul>
+ <li>les <a href="/fr/docs/Learn/CSS">CSS</a>, et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels).</li>
+ <li>le<a href="/fr/docs/Learn/JavaScript"> JavaScript</a>, et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).</li>
+</ul>
+
+<p>Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installer les outils de base</a>, et comprendre comment créer et gérer les fichiers,comme détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Gérer les fichiers</a> — ces deux articles font partie de notre module <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le Web</a> dédié aux débutants.</p>
+
+<p>Il est recommandé de passer par <a href="/fr/docs/Learn/Getting_started_with_the_web">Commencer avec le Web</a> avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article <a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Les bases du HTML</a> est également couvert dans notre module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>, quoique beaucoup plus en détail.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a></dt>
+ <dd>Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a></dt>
+ <dd>Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables">Tableaux HTML</a></dt>
+ <dd>Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms">Formulaire HTML</a></dt>
+ <dd>Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.</dd>
+</dl>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<h2 id="Résolution_de_problèmes_courants_en_HTML">Résolution de problèmes courants en HTML</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utilisation du HTML pour la solution de problèmes courants</a> fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> sur MDN</dt>
+ <dd>Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.</dd>
+</dl>
+</div>
+</div>
+</article>
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html
new file mode 100644
index 0000000000..6e9ebf6f83
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -0,0 +1,682 @@
+---
+title: Formatage avancé du texte
+slug: Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte
+tags:
+  - Apprendre
+  - Citation
+  - Codage
+  - Débutant
+  - Guide
+  - HTML
+  - Texte
+  - abréviation
+  - listes descriptives
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Listes_descriptives"><span>Listes descriptives</span></h2>
+
+<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">des listes simples en HTML</a>, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — <strong>les <span>listes descriptives</span></strong>. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :</p>
+
+<pre class="notranslate">soliloque
+Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+monologue
+Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+aparté
+Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</pre>
+
+<p>Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (<strong>d</strong>escription <strong>t</strong>erm) et chaque description d'un élément {{htmlelement("dd")}} (<strong>d</strong>escription <strong>d</strong>efinition). Terminons en balisant l'exemple ci‑dessus :</p>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;soliloque&lt;/dt&gt;
+  &lt;dd&gt;Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).&lt;/dd&gt;
+  &lt;dt&gt;monologue&lt;/dt&gt;
+  &lt;dd&gt;Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.&lt;/dd&gt;
+  &lt;dt&gt;aparté&lt;/dt&gt;
+  &lt;dd&gt;Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.</p>
+
+<dl>
+ <dt>soliloque</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
+ <dt>monologue</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
+ <dt>aparté</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+</dl>
+
+<p>Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :</p>
+
+<dl>
+ <dt>aparté</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+ <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd>
+</dl>
+
+<h3 id="Apprentissage_interactif_balisez_une_série_de_définitions">Apprentissage interactif : balisez une série de définitions</h3>
+
+<p>Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ<em> Code modifiable</em> pour que faire apparaître une liste de définitions dans la <em>Zone de rendu</em>. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.</p>
+
+<p>Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, cliquez sur<em> Voir la solution</em>.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+Bacon
+Le ciment qui unit le monde.
+Œufs
+Le liant des gâteaux.
+Café
+La boisson qui fait courir le monde le matin.
+Une couleur brun léger.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Bacon&lt;/dt&gt;\n &lt;dd&gt;Le ciment qui unit le monde.&lt;/dd&gt;\n &lt;dt&gt;Œufs&lt;/dt&gt;\n &lt;dd&gt;Le liant des gâteaux.&lt;/dd&gt;\n &lt;dt&gt;Café&lt;/dt&gt;\n &lt;dd&gt;La boisson qui fait courir le monde le matin.&lt;/dd&gt;\n &lt;dd&gt;Une couleur brun léger.&lt;/dd&gt;\n&lt;/dl&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Citations">Citations</h2>
+
+<p>Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.</p>
+
+<h3 id="Blocs_de_citation">Blocs de citation</h3>
+
+<p>Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <code>&lt;blockquote&gt;</code> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;L'&lt;strong&gt;Élément HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (ou &lt;em&gt;Élément HTML bloc
+de citation&lt;/em&gt;) indique que le bloc de texte inclus est une citation étendue.&lt;/p&gt;</pre>
+
+<p>Pour le changer en bloc de citation, on ferait simplement ceci :</p>
+
+<pre class="brush: html notranslate">&lt;blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;L'&lt;strong&gt;Élément HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (ou &lt;em&gt;Élément HTML bloc de citation&lt;/em&gt;)
+     indique que le bloc de texte inclus est une citation étendue.&lt;/p&gt;
+&lt;/blockquote&gt;</pre>
+
+<p>Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :</p>
+
+<blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote">
+<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
+</blockquote>
+
+<h3 id="Citations_en_ligne">Citations en ligne</h3>
+
+<p>Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <code>&lt;q&gt;</code> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;L'élément citation — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — est &lt;q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"&gt;prévu
+pour de courtes citations ne nécessitant pas un nouvel alinéa&lt;/q&gt;.&lt;/p&gt;</pre>
+
+<p>Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :</p>
+
+<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+
+<h3 id="Citations_2">Citations</h3>
+
+<p>Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un  <code>cite</code> sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <code>&lt;cite&gt;</code> à la source de la citation d'une manière ou d'une autre :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Selon la &lt;a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"&gt;
+&lt;cite&gt;page blockquote du MDN&lt;/cite&gt;&lt;/a&gt;:
+&lt;/p&gt;
+
+&lt;p&gt;L'&lt;strong&gt;Élément HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (ou &lt;em&gt;Élément HTML bloc de citation&lt;/em&gt;)
+   indique que le bloc de texte inclus est une citation étendue.&lt;/p&gt;
+
+&lt;p&gt;L'élément citation — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — est &lt;q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"&gt;prévu
+   pour de courtes citations ne nécessitant pas un nouvel alinéa&lt;/q&gt;.&lt;/p&gt;
+ — &lt;a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"&gt;
+&lt;cite&gt;page q du MDN&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>.</p>
+
+
+
+<h3 id="Apprentissage_actif_Qui_a_dit_quoi">Apprentissage actif : Qui a dit quoi ?</h3>
+
+<p>Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :</p>
+
+<ol>
+ <li>vous marquiez le paragraphe central comme étant une citation comprenant un attribut <code>cite</code>.</li>
+ <li>une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut <code>cite</code>.</li>
+ <li>vous incorporiez un élément <code>&lt;cite&gt;</code> pour chaque citation</li>
+</ol>
+
+<p>L'origine des citations dont vous aurez besoin se trouvent aux pages :</p>
+
+<ul>
+ <li>http://www.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius,</li>
+ <li>http://www.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (<em>De la nécessité d'éliminer un discours négatif sur soi‑même</em>).</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour obtenir la réponse.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
+&lt;p&gt;Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :&lt;/p&gt;
+&lt;p&gt;La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.&lt;/p&gt;
+&lt;p&gt;J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)&lt;/p&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;Salut et bienvenue sur ma page de motivation. Comme &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Confucius&lt;/cite&gt;&lt;/a&gt; a dit en son temps :&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n &lt;p&gt;La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;J\'aime aussi le concept de pensée positive &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt; Il est nécessaire d\'éliminer le discours négatif sur soi-même &lt;/q&gt; (comme dit dans &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Abréviations">Abréviations</h2>
+
+<p>Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :</p>
+
+<pre class="notranslate">&lt;p&gt;Nous utilisons l'&lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; pour structurer nos documents web.&lt;/p&gt;
+
+&lt;p&gt;Je pense que le &lt;abbr title="Révérend"&gt;R.&lt;/abbr&gt; Green l'a fait dans la cuisine avec une tronçonneuse.&lt;/p&gt;</pre>
+
+
+
+<p>Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :</p>
+
+<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
+
+<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code>&lt;abbr&gt;</code>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que &lt;abbr&gt; et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser &lt;abbr&gt; à la place.</p>
+</div>
+
+<h3 id="Apprentissage_actif_marquer_une_abréviation">Apprentissage actif : marquer une abréviation</h3>
+
+<p>Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
+&lt;p&gt;La NASA fait assurément des tâches passionnantes.&lt;/p&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;La &lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; fait assurément des tâches passionnantes.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<div>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div>
+
+<h2 id="Balisage_des_détails_de_contact">Balisage des détails de contact</h2>
+
+<p>HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<p>Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas <em>n'importe quelle</em> adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Page écrite par &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<h2 id="Exposants_et_indices">Exposants et indices</h2>
+
+<p>Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Ma date de naissance est le 1&lt;sup&gt;er&lt;/sup&gt; mai 2001.&lt;/p&gt;
+&lt;p&gt;La formule chimique de la caféine est C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
+&lt;p&gt;Si x&lt;sup&gt;2&lt;/sup&gt; égale 9, x doit valoir 3 ou -3.&lt;/p&gt;</pre>
+
+<p>Les sorties produites par ces lignes de code se présentent comme suit :</p>
+
+<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
+
+<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+
+<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
+
+<h2 id="Représentation_du_code_informatique">Représentation du code informatique</h2>
+
+<p>HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :</p>
+
+<ul>
+ <li>{{htmlelement("code")}} : pour marquer des parties génériques de code.</li>
+ <li>{{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès  dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises &lt;pre&gt;&lt;/pre&gt;, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.</li>
+ <li>{{htmlelement("var")}} : pour marquer spécifiquement les noms de variables.</li>
+ <li>{{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.</li>
+ <li>{{htmlelement("samp")}} : pour marquer une sortie de programme.</li>
+</ul>
+
+<p>Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>) :</p>
+
+<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('<span>Owww, arrête de me toucher !</span>');
+}&lt;/code&gt;&lt;/pre&gt;
+
+&lt;p&gt;N'utilisez pas d'éléments de présentation comme &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; et &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;p&gt;Dans l'exemple JavaScript ci‑dessus, &lt;var&gt;para&lt;/var&gt; représente un élément paragraphe.&lt;/p&gt;
+
+
+&lt;p&gt;Sélectionnez la totalité du texte avec &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
+&lt;samp&gt;PING mozilla.org (63.245.208.195) 56(84) bytes of data.
+64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms&lt;/samp&gt;&lt;/pre&gt;
+</pre>
+
+<p>Ce code se présente ainsi :</p>
+
+<p>{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}</p>
+
+<h2 id="Balisage_des_heures_et_dates">Balisage des heures et dates</h2>
+
+<p>HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 janvier 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<p>En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :</p>
+
+<ul>
+ <li>20 Janvier 2016</li>
+ <li>20th January 2016</li>
+ <li>Jan 20 2016</li>
+ <li>20/01/16</li>
+ <li>01/20/16</li>
+ <li>Le 20 du mois prochain</li>
+ <li><span lang="fr">20e Janvier 2016</span></li>
+ <li><span lang="ja">2016年1月20日</span></li>
+ <li><span lang="ja">etc.</span></li>
+</ul>
+
+<p>Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.</p>
+
+<p>L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;!-- Simple date standard --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 janvier 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Juste l'année et le mois --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;janvier 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Juste le mois et les jour --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 janvier&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Juste l'heure, heure et minutes --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19h30&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19h30m1,856s&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Date et heure --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;19h30, le 20 janvier 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Date et heure avec décalage de fuseau horaire --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;19h30, le 20 janvier 2016 corespond à 20h30 en France&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Appel d'un numéro de semains donné --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;La 4e semaine de 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+
+
+<p>Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element">Référence des éléments HTML</a> (la section <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element#Inline_text_semantics">sémantique de texte en ligne</a> serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li>Formatage avancé du texte</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..b334b15b2c
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,333 @@
+---
+title: Création d'hyperliens
+slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
+tags:
+  - Apprendre
+  - Codage
+  - Débutant
+  - Guide
+  - HTML
+  - Liens
+  - Title
+  - URL
+  - absolu
+  - hyperliens
+  - relatif
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_un_hyperlien">Qu'est-ce un hyperlien ?</h2>
+
+<p>Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web <em>une toile</em> — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p>
+</div>
+
+<p>La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Anatomie_dun_lien">Anatomie d'un lien</h2>
+
+<p>Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une <strong>Hypertext Reference</strong>) contenant l'adresse web vers laquelle vous voulez que le lien pointe.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Je suis en train de créer un lien à
+&lt;a href="https://www.mozilla.org/fr/"&gt;la page d'accueil Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>qui donne le résultat suivant :</p>
+
+<p>Je suis en train de créer un lien à <a class="ignore-external" href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p>
+
+<h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3>
+
+<p>L'autre attribut qu'il est possible d'ajouter à un lien est <code>title</code> ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Je suis en train de créer un lien à
+&lt;a href="https://www.mozilla.org/fr/"
+   title="Le meilleur endroit pour trouver plus d'informations sur la
+  mission de Mozilla et la manière de contribuer"&gt;la page d'accueil Mozilla&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>Voici le résultat (le contenu de <code>title</code> apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :</p>
+
+<p>Je suis en train de créer un lien vers <a class="ignore-external" href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p>
+
+<div class="note">
+<p><strong>Note </strong>: le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p>
+</div>
+
+<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3>
+
+<p>C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle index.html</a> fera parfaitement l'affaire).</p>
+
+<ul>
+ <li>Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances.</li>
+ <li>Changez certaines parties du contenu en liens.</li>
+ <li>Insérez les attributs <code>title</code>.</li>
+</ul>
+
+<h3 id="Liens_de_niveau_bloc">Liens de niveau bloc</h3>
+
+<p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#Éléments_bloc_ou_en_ligne">éléments bloc </a>. Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <code>&lt;a&gt;&lt;/a&gt;</code>.</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.org/fr/"&gt;
+  &lt;img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p>
+</div>
+
+<h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2>
+
+<p>Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.</p>
+
+<p>Une URL, ou <strong>U</strong>niform <strong>R</strong>esource <strong>L</strong>ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse <code>https://www.mozilla.org/en-US/</code>.</p>
+
+<p>Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p>
+
+<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="https://mdn.mozillademos.org/files/15958/dir-struct.png" style="display: block; height: 381px; margin: 0px auto; width: 882px;"></p>
+
+<p>La <strong>racine</strong> de cette structure de répertoires s'appelle <code>creating-hyperlinks</code>. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier <code>index.html</code> et un <code>contacts.html</code>. Sur un site réel, <code>index.html</code> serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).</p>
+
+<p>Il y a aussi deux répertoires dans la racine — <code>pdfs</code> et <code>projects</code>. Chacun d'eux comporte un seul fichier — respectivement un PDF (<code>project-brief.pdf)</code> et un fichier <code>index.html</code>. Notez que vous pouvez heureusement avoir deux fichiers <code>index.html</code> dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second <code>index.html</code> peut être le portail des informations relatives au projet.</p>
+
+<ul>
+ <li>
+  <p><strong>Dans un même dossier </strong>: si vous voulez inclure un hyperlien dans <code>index.html</code> (celui de plus haut niveau) pointant vers <code>contacts.html</code>, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est <code>contacts.html</code> :</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Voulez‑vous rencontrer un membre du personnel en particulier ?
+Voyez comment faire sur notre page &lt;a href="contacts.html"&gt;Contacts&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Descendre dans les sous-répertoires </strong>: si vous désirez inclure un hyperlien dans <code>index.html</code> (<code>celui</code> de plus haut niveau) pointant vers <code>projects/index.html</code>, vous avez besoin de descendre dans le dossier<code>projects</code> avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera <code>projects/index.html</code> :</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Visitez la &lt;a href="projects/index.html"&gt;page d'accueil&lt;/a&gt; de mon projet.&lt;/p&gt;</pre>
+ </li>
+ <li>
+  <p><strong>Monter dans les dossiers parents </strong>: si vous voulez inclure un hyperlien dans <code>projects/index.html</code> qui pointe vers <code>pdfs/projects-brief.pdf</code>, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier <code>pdfs</code>. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — <code>..</code> —, de sorte que l'URL à utiliser sera <code>../pdfs/project‑brief.pdf</code> :</p>
+
+  <pre class="brush: html notranslate">&lt;p&gt;Voici un lien vers mon &lt;a href="../pdfs/project-brief.pdf"&gt;sommaire de projet&lt;/a&gt;.&lt;/p&gt;</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p>
+</div>
+
+<h3 id="Fragments_de_documents">Fragments de documents</h3>
+
+<p>Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme <strong>fragment de document</strong>), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :</p>
+
+<pre class="brush: html notranslate">&lt;h2 id="Adresse_mailing"&gt;Adresse de mailing&lt;/h2&gt;</pre>
+
+<p>Puis, pour faire un lien vers cet <code>id</code> précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Vous voulez nous écrire une lettre ? Utilisez notre &lt;a href="contacts.html#Adresse_mailing"&gt;adresse de contact&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers <em>une autre partie du même document</em> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Vous trouverez n l'&lt;a href="#Adresse_mailing"&gt;adresse de mailing&lt;/a&gt; de notre société au bas de cette page.&lt;/p&gt;</pre>
+
+<h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3>
+
+<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</p>
+
+<p><strong>URL absolue </strong>: pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page <code>index.html</code> est téléversée dans le dossier nommé <code>projects</code> à la racine du serveur web, et que le domaine du site est <code>http://www.example.com</code>, la page sera accessible à l'adresse <code>http://www.example.com/projects/index.html</code> (ou même seulement <code>http://www.example.com/projects/</code>, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme <code>index.htm</code>, si ce n'est pas précisé dans l'URL).</p>
+
+<p>Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.</p>
+
+<p><strong>URL</strong> <strong>relative :</strong> pointe vers un emplacement qui est <em>relatif</em> au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en <code>http://www.example.com/projects/index.html</code> vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., <code>project-brief.pdf</code> — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de <code>projects</code> appelé <code>pdfs</code>, le lien relatif serait <code>pdfs/project-brief.pdf</code> (l'URL absolue équivalente serait <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
+
+<p>Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre <code>index.html</code> du dossier <code>projects</code> vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative <code>pdfs/project-brief.pdf</code> qui s'y trouve pointerait alors vers un fichier situé en <code>http://www.example.com/pdfs/project-brief.pdf</code>, et non vers un fichier situé en <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+
+<p>Bien sûr, l'emplacement du fichier <code>project-brief.pdf</code> et du dossier <code>pdfs</code> ne changera pas subitement du fait que vous avez déplacé le fichier <code>index.html</code> : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !</p>
+
+<h2 id="Meilleures_pratiques_de_liens">Meilleures pratiques de liens</h2>
+
+<p>Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.</p>
+
+<ul>
+</ul>
+
+<h3 id="Utilisez_une_formulation_claire_des_liens">Utilisez une formulation claire des liens</h3>
+
+<p>Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens <em>accessibles</em> à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :</p>
+
+<ul>
+ <li>les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.</li>
+ <li>les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié.</li>
+ <li>les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien.</li>
+</ul>
+
+<p>Regardons un exemple particulier :</p>
+
+<p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Télécharger Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Cliquer ici
+&lt;/a&gt;
+pour télécharger Firefox&lt;/p&gt;
+</pre>
+
+<p>Autres conseils :</p>
+
+<ul>
+ <li>Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.</li>
+ <li>Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).</li>
+ <li>Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.</li>
+ <li>Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.</li>
+</ul>
+
+<h3 id="Utilisez_des_liens_relatifs_partout_où_cest_possible">Utilisez des liens relatifs partout où c'est possible</h3>
+
+<p>Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un <em>même site web</em>. (pour les liens vers un <em>autre site web</em>, vous aurez besoin d'utiliser un lien absolu) :</p>
+
+<ul>
+ <li>Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile.</li>
+ <li>Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Fonctionnement du web</a> pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement.</li>
+</ul>
+
+<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3>
+
+<p>Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :</p>
+
+<ul>
+ <li>si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue.</li>
+ <li>si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash.</li>
+</ul>
+
+<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="http://www.exemple.com/rapport-volumineux.pdf"&gt;
+  Télécharger le rapport des ventes (PDF, 10Mo)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.exemple.com/flux-video/"<code> target="_blank"</code>&gt;
+  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.exemple.com/jeu-de-voiture"&gt;
+  Jouer au jeu de voiture (nécessite Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Utilisez_lattribut_download_pour_faire_un_lien_vers_un_téléchargement">Utilisez l'attribut <code>download</code> pour faire un lien vers un téléchargement</h3>
+
+<p>Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut <code>download</code> pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :</p>
+
+<pre class="notranslate"><code>&lt;a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=win64&amp;lang=fr-FR"
+   download="firefox-latest-64bit-installer.exe"&gt;
+  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
+&lt;/a&gt;</code></pre>
+
+<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2>
+
+<p>Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.</p>
+
+<p>Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> pour une liste complète des fichiers).</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>Vous devez :</p>
+
+<ol>
+ <li>Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.</li>
+ <li>Changer chaque nom de page en un lien vers cette page.</li>
+ <li>Copier le menu de navigation dans chaque page.</li>
+ <li>Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.</li>
+</ol>
+
+<p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p>
+
+<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil,  images, projets et menu des réseaux sociaux." src="https://mdn.mozillademos.org/files/15957/accueil.png" style="display: block; height: 424px; margin: 0px auto; width: 772px;"></p>
+
+<div class="note">
+<p><strong>Note </strong>: si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p>
+</div>
+
+<h2 id="Liens_de_courriel">Liens de courriel</h2>
+
+<p>Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL <code>mailto:</code>.</p>
+
+<p>Sous sa forme la plus basique et la plus communément utilisée, un lien <code>mailto:</code> indique simplement l'adresse du destinataire voulu. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org"&gt;Envoyer un courriel à nullepart&lt;/a&gt;
+</pre>
+
+<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p>
+
+<p>En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.</p>
+
+<h3 id="Spécification_des_détails">Spécification des détails</h3>
+
+<p>En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL <code>mailto</code> que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont <code>subject</code>, <code>cc</code> et <code>body</code> (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.</p>
+
+<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&amp;bcc=nom3@rapidtables.com&amp;subject=L%27objet%20du%20courriel&amp;body=Le%20corps%20du%20courriel"&gt;
+  Envoyer un mail avec copie, copie cachée, sujet et corps de message
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Notez également l'utilisation du point d'interrogation (<code>?</code>) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&amp;) pour séparer chaque champ dans l'URL <code>mailto:</code>. C'est la notation standard des requêtes URL. Lire <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET">La méthode GET</a> pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.</p>
+</div>
+
+<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&amp;subject=Ceci%20est%20l%27objet</a></li>
+</ul>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.</p>
+
+<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li>Création d'hyperliens</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html
new file mode 100644
index 0000000000..fe3176ca62
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html
@@ -0,0 +1,193 @@
+---
+title: Déboguer de l'HTML
+slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
+tags:
+  - Codage
+  - Débutant
+  - Erreur
+  - Guide
+  - HTML
+  - Validation
+  - débogage
+  - validateur
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées aux pages <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML,</a>  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML </a>et <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Déboguer_n'est_pas_un_problème">Déboguer n'est pas un problème</h2>
+
+<p>Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.</p>
+
+<p><img alt="Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne »." src="https://mdn.mozillademos.org/files/15991/fr-erreur.png" style="display: block; height: 506px; margin: 0px auto; width: 738px;">Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez <code>println!(Salut, Ô Monde!");</code> il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.</p>
+
+<p>Déboguer ne doit toutefois pas devenir un problème —  la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.</p>
+
+<h2 id="HTML_et_le_débogage">HTML et le débogage</h2>
+
+
+
+<p>HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est <em>interprété</em>, pas <em>compilé</em>). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus <strong>permissive</strong> que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.</p>
+
+<h3 id="Code_permissif">Code permissif</h3>
+
+<p>Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :</p>
+
+<ul>
+ <li><strong>Erreurs de syntaxe </strong>: ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.</li>
+ <li><strong>Erreurs de logique </strong>: ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.</li>
+</ul>
+
+
+
+<p>HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !</p>
+
+<div class="note">
+<p><strong>Note </strong>: HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.</p>
+</div>
+
+<h3 id="Apprentissage_actif_étude_avec_un_code_permissif">Apprentissage actif : étude avec un code permissif</h3>
+
+<p>Voici le moment venu d'étudier le caractère permissif du code HTML.</p>
+
+<ol>
+ <li>Primo, télécharchez notre démo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example </a>et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit <strong>malformé</strong>, par opposition à <strong>bien-formé</strong>).</li>
+ <li>Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :<img alt="Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. " src="https://mdn.mozillademos.org/files/15994/fr-HTML-errone.png" style="display: block; height: 413px; margin: 0px auto; width: 618px;"></li>
+ <li>Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément <code>body</code> est affiché) :
+  <pre>    &lt;h1&gt;Exemple de HTML à déboguer&lt;/h1&gt;
+
+    &lt;p&gt;Quelles sont les causes d'erreur en HTML ?
+
+    &lt;ul&gt;
+      &lt;li&gt;Éléments non fermés : si un élément n'est &lt;strong&gt;pas
+          fermé proprement, ses effets peuvent déborder sur des
+          zones que vous ne souhaitiez pas.
+
+      &lt;li&gt;Éléments incorrectement imbriqués : imbriquer des
+          éléments proprement est également très important pour
+          que le code se comporte correctement.
+          &lt;strong&gt;caractères gras &lt;em&gt;ou gras et italiques ?&lt;/strong&gt;
+          qu'est‑ce ?&lt;/em&gt;
+
+      &lt;li&gt;Attributs non fermés : autre source courante de problèmes
+          en HTML. Voici un exemple: &lt;a href="https://www.mozilla.org/&gt;
+          lien à la page d'accueil de Mozilla&lt;/a&gt;
+    &lt;/ul&gt;</pre>
+ </li>
+ <li>Revoyons  les problèmes :
+  <ul>
+   <li>Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.</li>
+   <li>Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.</li>
+   <li>Cette partie est mal imbriquée : <code>&lt;strong&gt;caractères gras &lt;em&gt;ou gras et italiques ?&lt;/strong&gt; qu'est ce ?&lt;/em&gt;</code>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.</li>
+   <li>La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.</li>
+  </ul>
+ </li>
+ <li>Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découverte des outils de développement du navigateur</a>.</li>
+ <li>Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : <img alt="L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte &quot;Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur." src="https://mdn.mozillademos.org/files/15993/fr-inspecteur.png" style="display: block; height: 722px; margin: 0px auto; width: 827px;"></li>
+ <li>Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes <em>devraient</em> donner le même résultat) :
+  <ul>
+   <li>Les éléments <code>p</code> et <code>li</code> ont été pourvus de balises fermantes.</li>
+   <li>L'endroit où le premier élément <code>&lt;strong&gt;</code> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises <code>strong</code>, jusqu'à la fin du document !</li>
+   <li>L'imbrication incorrecte a été corrigée ainsi :
+    <pre class="brush: html">&lt;strong&gt;caractères gras
+  &lt;em&gt;ou caractères gras et italiques ?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; qu'est ce ?&lt;/em&gt;</pre>
+   </li>
+   <li>Le lien avec les guillemets manquants a été illico détruit. Le dernier élément <code>li</code> ressemble à ceci :
+    <pre class="brush: html">&lt;li&gt;
+  &lt;strong&gt;Attributs non fermés : autre source courante de problèmes
+en HTML. Voici un exemple :&lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="Validation_d'un_HTML">Validation d'un HTML</h3>
+
+<p>Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?</p>
+
+<p>La meilleure stratégie consiste à faire passer votre page HTML par le <a href="https://validator.w3.org/">Markup Validation Service (</a>Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.</p>
+
+<p><img alt="La page d'accueil du validateur HTML" src="https://mdn.mozillademos.org/files/15995/fr-w3c.png" style="display: block; height: 974px; margin: 0px auto; width: 1072px;"></p>
+
+<p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em><span>Validate by</span> URI</em>) , téléverser un fichier HTML (<em>Validate by File Upload</em>) ou entrer directement du code HTML (<em>Validate by Direct Input</em>).</p>
+
+<h3 id="Apprentissage_actif_validation_d'un_document_HTML">Apprentissage actif : validation d'un document HTML</h3>
+
+<p>Essayons cet outil avec notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document exemple</a>.</p>
+
+<ol>
+ <li>D'abord, chargez le <a href="https://validator.w3.org/">Markup Validation Service</a> dans un des onglets du navigateur, si ce n'est déjà fait.</li>
+ <li>Basculez sur l'onglet <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
+ <li>Copiez la totalité du code du document (pas uniquement l'élément <code>body</code>) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.</li>
+ <li>Pressez le bouton <em>Check</em>.</li>
+</ol>
+
+<p>Cela vous donnera une liste d'erreurs et autres informations.</p>
+
+<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="https://mdn.mozillademos.org/files/15996/fr-liste-erreur.png" style="display: block; height: 553px; margin: 0px auto; width: 682px;"></p>
+
+<h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4>
+
+<p>Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.</p>
+
+<ul>
+ <li>« End tag <code>li</code> implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.</li>
+ <li>« Unclosed element <code>strong</code> » : C'est facile à comprendre — un élément  {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.</li>
+ <li>« End tag <code>strong</code> violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.</li>
+ <li>« End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.</li>
+ <li>« End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert :
+  <pre>exemple: &lt;a href="https://www.mozilla.org/&gt;lien à la page d'accueil de Mozilla&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
+
+  <div class="note">
+  <p><strong>Note</strong> : un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.</p>
+  </div>
+ </li>
+ <li>« Unclosed element <code>ul</code> » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} <em>est</em> correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.</li>
+</ul>
+
+<p>Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.</p>
+
+<p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie <span>: </span></p>
+
+<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li>Déboguer de l'HTML</li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Faire une Lettre</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html
new file mode 100644
index 0000000000..e6111a4c4f
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -0,0 +1,292 @@
+---
+title: Structure de Site Web et de document
+slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure
+tags:
+  - Codage
+  - Disposition
+  - Débutant
+  - Guide
+  - HTML
+  - Page
+  - Site
+  - blocs
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br>
+ </div>
+
+<p class="summary">De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>. Comment fonctionnent les liens hyperlinks , comme décrit dans <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>
+    <p>Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Principales_parties_dun_document"><strong>Principales parties d'un document</strong></h2>
+
+<p>Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :</p>
+
+<dl>
+ <dt>En‑tête (header)</dt>
+ <dd>Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.</dd>
+ <dt>Barre de navigation</dt>
+ <dd>Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.</dd>
+ <dt>Contenu principal</dt>
+ <dd>Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site  variable de page en page.</dd>
+ <dt>Barre latérale</dt>
+ <dd>
+ <p>Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.</p>
+ </dd>
+ <dt>Pied de page</dt>
+ <dd>
+ <p>Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.</p>
+ Un « site web typique » pourrait ressembler à quelque chose comme ceci :</dd>
+</dl>
+
+<p><img alt="un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page." src="https://mdn.mozillademos.org/files/15971/ecran.png" style="display: block; height: 855px; margin: 0px auto; width: 1298px;"></p>
+
+<h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2>
+
+<p>L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et <strong>utiliser le bon élément pour le bon travail</strong>.</p>
+
+<p>C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les daltoniens représentent environ <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a> ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait <a href="https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle">285 millions de personnes aveugles et malvoyantes</a> dans le monde, alors que la population totale était <a href="https://fr.wikipedia.org/wiki/Population_mondiale">d'environ 7 milliards </a>d'habitants).</p>
+</div>
+
+<p>Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Why_do_we_need_structure">ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences</a>.</p>
+
+<p>Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :</p>
+
+<ul>
+ <li><strong>header : </strong>{{htmlelement("header")}}.</li>
+ <li><strong>barre de navigation : </strong>{{htmlelement("nav")}}.</li>
+ <li><strong>contenu principal : </strong>{{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.</li>
+ <li><strong>barre latérale : </strong>{{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.</li>
+ <li><strong>pied de page : </strong>{{htmlelement("footer")}}.</li>
+</ul>
+
+<h3 id="Apprentissage_actif_exploration_du_code_de_lexemple">Apprentissage actif : exploration du code de l'exemple</h3>
+
+<p>Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">dans le dépôt Github</a>). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;Intitulé de ma page&lt;/title&gt;
+    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+
+    &lt;!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
+         HTML5 fonctionne correctement avec les anciennes versions de
+         Internet Explorer--&gt;
+    &lt;!--[if lt IE 9]&gt;
+      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
+    &lt;![endif]--&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;!-- Voici notre en‑tête principale utilisée dans toutes les pages
+         de notre site web --&gt;
+    &lt;header&gt;
+      &lt;h1&gt;En-tête&lt;/h1&gt;
+    &lt;/header&gt;
+
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;L'équipe&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Projets&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+       &lt;!-- Un formulaire de recherche est une autre façon de naviguer de
+            façon non‑linéaire dans un site. --&gt;
+
+       &lt;form&gt;
+         &lt;input type="search" name="q" placeholder="Rechercher"&gt;
+         &lt;input type="submit" value="Lancer !"&gt;
+       &lt;/form&gt;
+     &lt;/nav&gt;
+
+    &lt;!-- Ici nous mettons le contenu de la page --&gt;
+    &lt;main&gt;
+
+      &lt;!-- Il contient un article --&gt;
+      &lt;article&gt;
+        &lt;h2&gt;En-tête d'article&lt;/h2&gt;
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+
+        &lt;h3&gt;Sous‑section&lt;/h3&gt;
+        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+
+        &lt;h3&gt;Autre sous‑section&lt;/h3&gt;
+        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+      &lt;/article&gt;
+
+      &lt;!-- Le contenu « à côté » peut aussi être intégré dans le contenu
+           principal --&gt;
+      &lt;aside&gt;
+        &lt;h2&gt;En relation&lt;/h2&gt;
+        &lt;ul&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Combien j'aime être près des rivages&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Combien j'aime être près de la mer&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Bien que dans le nord de l'Angleterre&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Il n'arrête jamais de pleuvoir&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Eh bien…&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/aside&gt;
+
+    &lt;/main&gt;
+
+    &lt;!-- Et voici notre pied de page utilisé sur toutes les pages du site --&gt;
+    &lt;footer&gt;
+      &lt;p&gt;©Copyright 2050 par personne. Tous droits reversés.&lt;/p&gt;
+    &lt;/footer&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.</p>
+
+<h2 id="Plus_de_détails_à_propos_des_éléments_de_mise_en_page">Plus de détails à propos des éléments de mise en page</h2>
+
+<p>La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element">référence aux éléments HTML</a>. Pour l'instant, il convient de bien comprendre les principales définitions :</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} est relatif au contenu <em>unique de la page</em>. N'utilisez <code>&lt;main&gt;</code> que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.</li>
+ <li>{{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)</li>
+ <li>{{HTMLElement('section')}} ressemble à <code>&lt;article&gt;</code>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un <code><a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a></code> ; notez également que vous pouvez fractionner un <code>&lt;article&gt;</code> en plusieurs <code>&lt;section&gt;</code> ou bien des  <code>&lt;section&gt;</code> en divers <code>&lt;article&gt;</code>, selon le contexte.</li>
+ <li>{{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).</li>
+ <li>{{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas <a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML#Ajouter un titre">titles et headings</a>).</li>
+ <li>{{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.</li>
+ <li>{{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page.</li>
+</ul>
+
+<h3 id="Enveloppes_non‑sémantiques">Enveloppes non‑sémantiques</h3>
+
+<p>Parfois, vous êtes dans la situation où vous ne trouvez pas  l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.</p>
+
+<p>{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
+alors qu'il titubait en travers de la porte &lt;span class="editor-note"&gt;
+[Note du rédacteur : Pour cette scène, la lumière doit être faible].&lt;/span&gt;&lt;/p&gt;</pre>
+
+<p>Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.</p>
+
+<p>{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :</p>
+
+<pre class="brush: html">&lt;div class="panier"&gt;
+  &lt;h2&gt;Panier d'achat&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;p&gt;&lt;a href=""&gt;&lt;b&gt;Boucles d'oreilles en argent&lt;/b&gt;&lt;/a&gt;: €99,95.&lt;/p&gt;
+      &lt;img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      ...
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Total des achats : €237,89&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Ce n'est pas vraiment un élément <code>&lt;aside&gt;</code> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <code>&lt;section&gt;</code>, car il ne fait pas partie du contenu principal de la page. Donc un <code>&lt;div&gt;</code> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.</p>
+
+<div class="warning">
+<p><strong>Avertissement</strong> : les <code>div</code> sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.</p>
+</div>
+
+<h3 id="Sauts_de_ligne_et_traits_horizontaux">Sauts de ligne et traits horizontaux</h3>
+
+<p>Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :</p>
+
+<p><code>&lt;br&gt;</code> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Il y avait une fois une fille nommée Nell&lt;br&gt;
+Qui aimait écrire du HTML&lt;br&gt;
+Mais ses structures et sémantiques affligeantes&lt;br&gt;
+rendaient de ses marquages la lecture inélégante.&lt;/p&gt;</pre>
+
+<p>Sans éléments <code>&lt;br&gt;</code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignore la plupart des blancs</a>) ; avec des &lt;br&gt; dans le code, voici le rendu de ce qui précède :</p>
+
+<p>Il y avait une fois une fille nommée Nell<br>
+ Qui aimait écrire du HTML<br>
+ Mais ses structures et sémantiques affligeantes<br>
+ rendaient de ses marquages la lecture inélégante.</p>
+
+<p><code>Les éléments &lt;hr&gt;</code> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :</p>
+
+<pre>&lt;p&gt;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.&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;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.&lt;/p&gt;</pre>
+
+<p>sera rendu ainsi :</p>
+
+<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>
+
+<h2 id="Planification_dun_site_web_simple">Planification d'un site web simple</h2>
+
+<p>Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !</p>
+
+<ol>
+ <li>Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. <img alt="les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité." src="https://mdn.mozillademos.org/files/15972/fr_commun.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
+ <li>Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. <img alt="Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page." src="https://mdn.mozillademos.org/files/15973/fr-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
+ <li>Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. <img alt="Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays." src="https://mdn.mozillademos.org/files/15974/fr-liste.png" style="border-style: solid; border-width: 1px; display: block; height: 718px; margin: 0px auto; width: 600px;"></li>
+ <li>Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.<img alt="Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter." src="https://mdn.mozillademos.org/files/15975/fr-tri.png" style="border-style: solid; border-width: 1px; display: block; height: 625px; margin: 0px auto; width: 600px;"></li>
+ <li>Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. <img alt="Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat." src="https://mdn.mozillademos.org/files/15976/fr-map.png" style="border-style: solid; border-width: 1px; display: block; height: 885px; margin: 0px auto; width: 600px;"></li>
+</ol>
+
+<h3 id="Apprentissage_actif_créez_la_cartographie_de_votre_propre_site">Apprentissage actif : créez la cartographie de votre propre site</h3>
+
+<p>Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?</p>
+
+<div class="note">
+<p><strong>Note </strong>: Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li>Structure de Site Web et de document</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..7717eae9e1
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,736 @@
+---
+title: Commencer avec le HTML
+slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
+tags:
+  - Attributs
+  - Codage
+  - Commentaires
+  - Débutant
+  - Elements
+  - Entités
+  - Guide
+  - HTML
+  - espace
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions sur le fonctionnement d'un ordinateur, avoir installé les <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base</a> et  savoir <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est_ce_que_le_HTML">Qu'est ce que le HTML ?</h2>
+
+<p>{{glossary("HTML")}} (<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) n'est pas un langage de programmation : c'est un <em>langage de balisage</em> qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou <em>baliser</em> différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :</p>
+
+<pre>Mon chat est très grincheux</pre>
+
+<p>Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :</p>
+
+<pre class="brush: html">&lt;p&gt;Mon chat est très grincheux&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit &lt;title&gt;, &lt;TITLE&gt;, &lt;Title&gt;, &lt;TiTlE&gt;, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.</p>
+</div>
+
+<h2 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h2>
+
+<p>Regardons notre élément paragraphe d'un peu plus près :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14739/chat-grincheuxl.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Les principales parties de notre élément sont :</p>
+
+<ol>
+ <li><strong>La balise ouvrante :</strong> il s'agit du nom de l'élément (dans ce cas, p), encadré par un <strong>chevron ouvrant (&lt;) </strong>et un <strong>chevron fermant (&gt;)</strong>. Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;</li>
+ <li><strong>La balise fermante :</strong> c'est la même que la balise ouvrante, sauf qu'elle comprend une <strong>barre oblique (/)</strong> avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;</li>
+ <li><strong>Le contenu :</strong> il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;</li>
+ <li><strong>L'élément :</strong> l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.</li>
+</ol>
+
+<h3 id="Apprentissage_actif_créer_votre_premier_élément_HTML">Apprentissage actif : créer votre premier élément HTML</h3>
+
+<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> en la mettant entre les balises<code> &lt;em&gt;</code> et <code>&lt;/em&gt;</code> (<code>mettez &lt;em&gt; </code> avant pour <em>ouvrir l'élément</em> et <code>&lt;/em&gt;</code> après pour <em>fermer l'élément</em>) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la <em>Zone de rendu</em>.</p>
+
+<p>Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour la réponse.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+  Ceci est mon texte.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser" /&gt;
+  &lt;input id="solution" type="button" value="Voir la solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;Ceci est mon texte.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}</p>
+
+<h3 id="Eléments_imbriqués">Eléments imbriqués</h3>
+
+<p>Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'<strong>imbrication</strong>. Si vous voulez affirmer que votre chat est <strong>très</strong> grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :</p>
+
+<pre class="brush: html">&lt;p&gt;Mon chat est &lt;strong&gt;très&lt;/strong&gt; grincheux.&lt;/p&gt;</pre>
+
+<p>Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément <code>p</code> en premier, puis l'élément <code>strong</code>, donc nous devons fermer l'élément <code>strong</code> d'abord, puis l'élément <code>p</code>. Ce qui suit est incorrect :</p>
+
+<pre class="example-bad brush: html">&lt;p&gt;Mon chat est &lt;strong&gt;très grincheux.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !</p>
+
+<h3 id="Éléments_bloc_vs_en_ligne">Éléments bloc vs en ligne</h3>
+
+<p>Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.</p>
+
+<ul>
+ <li>Les éléments de niveau <strong>bloc</strong> forment <strong>un bloc visible sur une page</strong> — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc.</li>
+ <li>Les éléments en<strong> ligne</strong> sont contenus <strong>dans des éléments de niveau bloc</strong>. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li>
+</ul>
+
+<p>Prenez l'exemple suivant :</p>
+
+<pre class="brush: html">&lt;em&gt;premier&lt;/em&gt;&lt;em&gt;deuxième&lt;/em&gt;&lt;em&gt;troisième&lt;/em&gt;
+
+&lt;p&gt;quatrième&lt;/p&gt;&lt;p&gt;cinquième&lt;/p&gt;&lt;p&gt;sixième&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">style CSS </a>par défaut du navigateur qui s'applique aux paragraphes).</p>
+
+<p>{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: HTML5 a redéfini les catégories d'éléments dans HTML5 : voir <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">catégories de contenu d'éléments</a>. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.</p>
+</div>
+
+<div class="note">
+<p> <strong>Note</strong> : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">les types de boîtes des CSS </a>portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Vous trouverez des pages de référence utiles incluant des listes d'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p>
+</div>
+
+<h3 id="Éléments_vides">Éléments vides</h3>
+
+<p>Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <code>&lt;img /&gt;</code> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <code>&lt;img /&gt;</code> est à privilégier) :</p>
+
+<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /&gt;</pre>
+
+<p>Cela affichera l'élément suivant sur votre page :</p>
+
+<p>{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p>
+
+<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/14741/attribut-chat-grincheux.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut <code>class</code> vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un <a href="/fr/docs/Web/CSS">style CSS</a> ou un comportement particulier, par exemple.</p>
+
+<p>Pour créer un attribut, il faut :</p>
+
+<ol>
+ <li>insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;</li>
+ <li>donner un nom à l'attribut, puis ajouter un signe égal ;</li>
+ <li>donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.</li>
+</ol>
+
+<h3 id="Apprentissage_actif_ajouter_des_attributs_à_un_élément">Apprentissage actif : ajouter des attributs à un élément</h3>
+
+<p>Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :</p>
+
+<ul>
+ <li><code>href </code>: cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code> : l'attribut <code>title</code> apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, <code>title="Page d'Accueil Mozilla"</code>, qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien.</li>
+ <li><code>target</code>: L'attribut <code>target</code> définit le contexte de navigation utilisé pour afficher le lien. Par exemple, <code>target="_blank"</code> affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut.</li>
+</ul>
+
+<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément &lt;a&gt;, puis l'attribut <code>href</code>, puis l'attribut <code>title</code>. Vous pourrez voir la mise à jour de vos modifications en direct dans la <em>Zone de rendu</em>. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut <code>title</code> et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément <code>href</code>. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.</p>
+
+<p>Si vous faites une erreur, vous pouvez toujours réinitialiser la <em>zone de saisie</em> en cliquant sur le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, cliquez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Un lien vers mon site Web préféré.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;Un lien vers mon &lt;a href="https://www.mozilla.org/" title="Page d\'accueil de Mozilla" target="_blank"&gt;site Web préféré&lt;/a&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Les_attributs_booléens">Les attributs booléens</h3>
+
+<p>Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments <code>input</code> (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.</p>
+
+<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément <code>input</code> non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :</p>
+
+<pre class="brush: html">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;
+</pre>
+
+<p>Ces deux exemples vous donneront le résultat suivant :</p>
+
+<p>{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}</p>
+
+<h3 id="Omettre_des_guillemets_autour_des_valeurs_d'attribut">Omettre des guillemets autour des valeurs d'attribut</h3>
+
+<p>Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut <code>href</code>, comme ceci :</p>
+
+<pre>&lt;a href=<code>https://www.mozilla.org/</code>&gt;mon site web favori&lt;/a&gt;</pre>
+
+<p>Cependant, si nous ajoutons l'attribut <code>title</code> dans ce même style, cela devient incorrect :</p>
+
+<pre class="brush: html">&lt;a href=<code>https://www.mozilla.org/</code> title=La page d\'accueil Mozilla &gt;mon site web favori&lt;/a&gt;</pre>
+
+<p>En effet, le navigateur interprétera mal la balise, pensant que l'attribut <code>title</code> est en fait quatre attributs — un attribut <code>title</code> avec la valeur « La » et trois attributs booléens, « <code>page</code> », « <code>d\'accueil</code> » et « <code>Mozilla</code> ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de <code>title</code> donne.</p>
+
+<p>{{ EmbedLiveSample('Omettre_des_guillemets_autour_des_valeurs_d\'attribut', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.</p>
+
+<h3 id="Guillemets_simples_ou_doubles">Guillemets simples ou doubles ?</h3>
+
+<p>Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :</p>
+
+<pre class="brush: html">&lt;a href="http://www.exemple.com"&gt;Un lien vers mon exemple.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;Un lien vers mon exemple&lt;/a&gt;</pre>
+
+<p>Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :</p>
+
+<pre class="brush: html">&lt;a href="http://www.exemple.com'&gt;Un lien vers mon exemple.&lt;/a&gt;</pre>
+
+<p>Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :</p>
+
+<pre class="brush: html">&lt;a href="http://www.exemple.com" title="N'est-ce pas drôle ?"&gt;Un lien vers mon exemple.&lt;/a&gt;</pre>
+
+<p>Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser <a href="/fr/docs/Glossaire/Entity">une entité HTML</a> pour représenter ce caractère spécial.</p>
+
+<h2 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h2>
+
+<p>Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Ma page test&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Voici ma page web&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ici, nous avons :</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code> : le type de document. Quand HTML était jeune (vers 1991/2), les <code>doctypes</code>  étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci :
+
+  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <code>&lt;!DOCTYPE html&gt;</code> est la chaîne de caractères la plus courte qui soit un <code>doctype</code> valide. C'est tout ce que vous avez vraiment besoin de savoir.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> : l'élément <code>&lt;html&gt;</code>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> : l'élément <code>&lt;head&gt;</code>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page :  mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. </li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> : l'élément <code>title</code>. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. </li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> : l'élément <code>&lt;body&gt;</code>. Il contient <em>tout </em>le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.</li>
+</ol>
+
+<h3 id="Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML">Apprentissage actif : ajouter certaines fonctionnalités à un document HTML</h3>
+
+<p>Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :</p>
+
+<ol>
+ <li>copier l'exemple de page HTML ci-dessus.</li>
+ <li>créer un nouveau fichier dans votre éditeur de texte.</li>
+ <li>coller le code dans le nouveau fichier texte.</li>
+ <li>enregistrer le fichier sous <code>index.html</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez également trouver ce modèle HTML dans le<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html"> dépôt GitHub MDN Learning Area</a>.</p>
+</div>
+
+<p>Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:</p>
+
+<p><img alt="Une simple page HTML affichant Voici ma page" src="https://mdn.mozillademos.org/files/15943/fr-capture-modele.png" style="display: block; height: 480px; margin: 0px auto; width: 640px;">Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément &lt;body&gt;. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :</p>
+
+<ul>
+ <li>Au début du document, juste après la balise d'ouverture &lt;body&gt;, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante &lt;h1&gt; et la balise fermante &lt;/ h1&gt; ;</li>
+ <li>modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ;</li>
+ <li>mettez les mots importants en gras en les mettant entre la balise ouvrante <code>&lt;strong&gt;</code> et la balise fermante <code>&lt;/ strong&gt;</code>;</li>
+ <li>ajoutez un lien à votre paragraphe, comme <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#Apprentissage_actif_ajout_d'attributs_à_un_élément">expliqué plus haut dans cet article</a> ;</li>
+ <li>ajoutez une image dans votre document, en dessous du paragrahe, comme <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#Éléments_vides">expliqué plus haut dans cet article</a>. Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web).</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour l'afficher.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html">&lt;h2&gt;Zone de rendu&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;Voici ma page&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Un peu de musique&lt;/h1&gt;&lt;p&gt;J\'aime vraiment beaucoup &lt;strong&gt;jouer de la batterie&lt;/strong&gt;. Un de mes batteurs préférés est Neal Peart, qui\ joue dans le groupe &lt;a href="https://fr.wikipedia.org/wiki/Rush_%28groupe%29" title="Article Wikipedia sur Rush"&gt;Rush&lt;/a&gt;.\Actuellement, mon album Rush de prédilection est &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3>
+
+<p>Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:</p>
+
+<pre class="brush: html">&lt;p&gt;Les chiens sont idiots.&lt;/p&gt;
+
+&lt;p&gt;Les chiens        sont
+           idiots.&lt;/p&gt;</pre>
+
+<p>Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.</p>
+
+<h2 id="Références_d'entités_inclure_les_caractères_spéciaux_en_HTML">Références d'entités : inclure les caractères spéciaux en HTML</h2>
+
+<p>En HTML, les caractères <code>&lt;</code>, <code>&gt;</code>,<code>"</code>,<code>'</code> et <code>&amp;</code> sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&amp;) ou un signe inférieur(&lt;), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?</p>
+
+<p>Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&amp;), et se termine par un point-virgule (;).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Le caractère</th>
+   <th scope="col">Réference équivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :</p>
+
+<pre class="brush: html">&lt;p&gt;En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.&lt;/p&gt;
+
+&lt;p&gt;En HTML, un paragraphe se définit avec l'élément &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
+
+<p>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 &lt;p&gt; comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les  signes inférieur(&lt;)  et supérieur(&gt;) par leurs références de caractère.</p>
+
+<p>{{ EmbedLiveSample('Références_d\'entités_inclure_les_caractères_spéciaux_en_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML">Liste des entités caractère de XML et HTML</a>.</p>
+</div>
+
+<h2 id="Commentaires_en_HTML">Commentaires en HTML</h2>
+
+<p>En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses  parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.</p>
+
+<p>Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <code>&lt;!-- </code>et<code>--&gt;</code>, par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Je ne suis pas dans un commentaire&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;Je suis dans un commmentaire!&lt;/p&gt; --&gt;</pre>
+
+<p>Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.</p>
+
+<p>{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !</p>
+
+<div class="note">
+<p><strong>Note</strong>: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a>. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer une couleur aux éléments HTML avec les CSS</a></li>
+</ul>
+
+<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li>Commencer avec le HTML</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
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
new file mode 100644
index 0000000000..7065cb861e
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -0,0 +1,979 @@
+---
+title: Fondamentaux du texte HTML
+slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
+tags:
+  - Apprendre
+  - Débutant
+  - Guide
+  - HTML
+  - Introduction à l'HTML
+  - Listes
+  - Paragraphes
+  - Texte
+  - Titres
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requis:</th>
+   <td>
+    <p>Connaître les bases du langage HTML, telles que traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>
+    <p>Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_bases_titres_et_paragraphes">Les bases : titres et paragraphes</h2>
+
+<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="https://mdn.mozillademos.org/files/12371/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>Le contenu structuré facilite la lecture et la rend plus agréable.</p>
+
+<p>En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :</p>
+
+<pre class="brush: html">&lt;p&gt;Je suis un paragraphe, oh oui je le suis.&lt;/p&gt;</pre>
+
+<p>Chaque titre doit être contenu dans un élément titre :</p>
+
+<pre class="brush: html">&lt;h1&gt;Je suis le titre de l'histoire.&lt;/h1&gt;</pre>
+
+<p>Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <code>&lt;h1&gt;</code> représente le titre principal, <code>&lt;h2&gt;</code> représente un sous-titre, <code>&lt;h3&gt;</code> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <code>&lt;h6&gt;</code>.</p>
+
+<h3 id="Implémentation_de_la_hiérarchie_structurale">Implémentation de la hiérarchie structurale</h3>
+
+<p>Dans une histoire, la balise <code>&lt;h1&gt;</code> représenterait le titre de l'histoire, les balises <code>&lt;h2&gt;</code> représenteraient les titres des chapitres, les balises <code>&lt;h3&gt;</code> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <code>&lt;h6&gt;</code>.</p>
+
+<pre class="brush: html">&lt;h1&gt;L'ennui mortel&lt;/h1&gt;
+
+&lt;p&gt;par Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Chapitre I : La nuit noire&lt;/h2&gt;
+
+&lt;p&gt;Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...&lt;/p&gt;
+
+&lt;h2&gt;Chapitre II : Le silence éternel&lt;/h2&gt;
+
+&lt;p&gt;Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...&lt;/p&gt;
+
+&lt;h3&gt;Le spectre parle&lt;/h3&gt;
+
+&lt;p&gt;Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...&lt;/p&gt;</pre>
+
+<p>C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :</p>
+
+<ul>
+ <li>Il est préférable de n'utiliser qu'un seul <code>&lt;h1&gt;</code> par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur.</li>
+ <li>Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : <code>&lt;h1&gt;</code> puis <code>&lt;h2&gt;</code>, puis <code>&lt;h3&gt;</code> et ainsi de suite.</li>
+ <li>Bien qu'il y ait 6 niveaux de titre (de <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages.</li>
+</ul>
+
+<h3 id="Pourquoi_faut-il_structurer_un_document">Pourquoi  faut-il structurer un document ?</h3>
+
+<p>Pour répondre à cette question, regardons la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche <kbd>Entrée</kbd> ou <kbd>⏎</kbd>)</p>
+
+<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="https://mdn.mozillademos.org/files/15951/recette.png" style="display: block; height: 429px; margin: 0px auto; width: 640px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></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>
+
+<ul>
+ <li>Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisent souvent que les titres (généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">nous ne passons que très peu de temps sur une page web</a>). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs.</li>
+ <li>Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization).</li>
+ <li>Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteurs d'écran</a>. Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel.</li>
+ <li>Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript.</li>
+</ul>
+
+<p>Il est donc nécessaire d'ajouter des balises de structuration du contenu.</p>
+
+<h3 id="Apprentissage_actif_structurer_le_contenu">Apprentissage actif : structurer le contenu</h3>
+
+<p>Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ <em>Sortie directe</em>.</p>
+
+<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;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;Ma courte histoire : je suis une policière et mon nom est Trish.
+
+Mes jambes sont en carton et je suis mariée à un poisson.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Ma courte histoire&lt;/h1&gt;\n&lt;p&gt;Je suis une policière et mon nom est Trish.&lt;/p&gt;\n&lt;p&gt;Mes jambes sont en carton et je suis mariée à un poisson.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 370) }}</p>
+
+<h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3>
+
+<p>La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)</p>
+
+<p>Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».</p>
+
+<pre class="brush: html">&lt;h1&gt;Ceci est un titre principal&lt;/h1&gt;</pre>
+
+<p>Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).</p>
+
+<p>D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Est-ce un titre principal?&lt;/span&gt;</pre>
+
+<p>C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.</p>
+
+<h2 id="Listes">Listes</h2>
+
+<p>Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours,  sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.</p>
+
+<h3 id="Listes_non-ordonnées">Listes non-ordonnées</h3>
+
+<p>Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :</p>
+
+<pre>lait
+œufs
+pain
+houmous</pre>
+
+<p>Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (<em><strong>u</strong>norderd <strong>l</strong>ist</em>) qui enveloppe tous les éléments de la liste:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+lait
+œufs
+pain
+houmous
+&lt;/ul&gt;</pre>
+
+<p>Chaque item est contenu dans un élément {{htmlelement("li")}} (<em><strong>l</strong>ist <strong>i</strong>tem</em>):</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;lait&lt;/li&gt;
+  &lt;li&gt;œufs&lt;/li&gt;
+  &lt;li&gt;pain&lt;/li&gt;
+  &lt;li&gt;houmous&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée">Apprentissage actif : mettre des balises à une liste non-ordonnée</h4>
+
+<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>
+
+<p> </p>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;lait
+œufs
+pain
+houmous&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;lait&lt;/li&gt;\n&lt;li&gt;œufs&lt;/li&gt;\n&lt;li&gt;pain&lt;/li&gt;\n&lt;li&gt;houmous&lt;/li&gt;\n&lt;/ul&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+
+<h3 id="Listes_ordonnées">Listes ordonnées</h3>
+
+<p>Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:</p>
+
+<pre>Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers ronds-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite</pre>
+
+<p>Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (<em><strong>o</strong>rdered <strong>l</strong>ist</em>), et non dans <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Roulez jusqu'au bout de la route&lt;/li&gt;
+  &lt;li&gt;Tournez à droite&lt;/li&gt;
+  &lt;li&gt;Allez tout droit aux deux premiers ronds-points&lt;/li&gt;
+  &lt;li&gt;Tournez à gauche au troisième rond-point&lt;/li&gt;
+  &lt;li&gt;Roulez sur 300 mètres, l'école est sur votre droite&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Apprentissage_actif_baliser_une_liste_ordonnée">Apprentissage actif : baliser une liste ordonnée</h4>
+
+<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>
+
+<p> </p>
+
+<pre class="brush: html">&lt;h2&gt;Sortie directe&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers rond-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Roulez jusqu\'au bout de la route&lt;/li&gt;\n&lt;li&gt;Tournez à droite&lt;/li&gt;\n&lt;li&gt;Allez tout droit aux deux premiers rond-points&lt;/li&gt;\n&lt;li&gt;Tournez à gauche au troisième rond-point&lt;/li&gt;\n&lt;li&gt;Roulez sur 300 mètres, l\'école est sur votre droite&lt;/li&gt;\n&lt;/ol&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 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;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Recette rapide de l'houmous
+
+  Cette recette permet d'obtenir rapidement un houmous savoureux, sans complications. C'est une adaptation de plusieurs recettes différentes que j'ai essayées au fil des ans.
+
+  L'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au Moyen-Orient. Il s'accorde très bien avec la salade, les viandes grillées et du pain calabrais.
+
+  Ingrédients
+
+  1 boîte (400 g) de pois chiches (garbanzos)
+  175g de crème de sésame
+  6 tomates séchées
+  un demi poivron rouge
+  une pincée de piment de Cayenne
+  1 gousse d'ail
+  un trait d'huile d'olive
+
+  Ôter la peau de l'ail et le hacher grossièrement.
+  Enlever les graines et la tige du poivron, le hacher grossièrement.
+  Mettre tous les ingrédients dans un robot et mixer jusqu'à l'obtention d'une pâte.
+  Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.
+  Si vous voulez un houmous lisse, mixez-le plus longtemps.
+
+  Pour des saveurs différentes, vous pouvez essayer d'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.
+
+  Conservation
+
+  Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine.   S'il se met à fermenter, jettez‑le sans hésiter.
+
+  L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Recette rapide de l\'houmous&lt;/h1&gt;\n\n&lt;p&gt;Cette recette permet d\'obtenir rapidement un houmous savoureux, sans complications. C\'est une adaptation de plusieurs recettes différentes que j\'ai essayées au fil des ans.&lt;/p&gt;\n\n&lt;p&gt;L\'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au moyen-orient. Il s\'accorde très bien avec la salade, les viandes grillées et du pain calabrais.&lt;/p&gt;\n\n&lt;h2&gt;Ingrédients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 boîte (400 g) de pois chiches (garbanzos)&lt;/li&gt;\n&lt;li&gt;175g de crème de sésame&lt;/li&gt;\n&lt;li&gt;6 tomates séchées&lt;/li&gt;\n&lt;li&gt;un demi poivron rouge&lt;/li&gt;\n&lt;li&gt;une pincée de piment de Cayenne&lt;/li&gt;\n&lt;li&gt;1 gousse d\'ail&lt;/li&gt;\n&lt;li&gt;un trait d\'huile d\'olive&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Ôter la peau de l\'ail et le hacher grossièrement.&lt;/li&gt;\n&lt;li&gt;Enlever les graines et la tige du poivron, le hacher grossièrement.&lt;/li&gt;\n&lt;li&gt;Mettre tous les ingrédients dans un robot mixer jusqu\'à l\'obtention d\'une pâte.&lt;/li&gt;\n&lt;li&gt;Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.&lt;/li&gt;\n&lt;li&gt;Si vous voulez un houmous lisse, mixez-le plus longtemps.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;Pour des saveurs différentes, vous pouvez essayer d\'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.&lt;/p&gt;\n\n&lt;h2&gt;Conservation&lt;/h2&gt;\n\n&lt;p&gt;Mettez l\'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S\'il se met à fermenter, jettez‑le sans hésiter.&lt;/p&gt;\n\n&lt;p&gt;L\'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+// met à jour le texte du code
+
+  textarea.onkeyup = function(){
+// nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+// non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 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>
+
+<h3 id="Imbriquer_des_listes">Imbriquer des listes</h3>
+
+<p>Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Ôter la peau de l'ail et le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Enlever les graines et la tige du poivron, le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.&lt;/li&gt;
+  &lt;li&gt;Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.&lt;/li&gt;
+  &lt;li&gt;Si vous voulez un houmous lisse, mixez-le plus longtemps.&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Ôter la peau de l'ail et le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Enlever les graines et la tige du poivron, le hacher grossièrement.&lt;/li&gt;
+  &lt;li&gt;Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
+    &lt;ul&gt;
+      &lt;li&gt;Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.&lt;/li&gt;
+      &lt;li&gt;Si vous voulez un houmous lisse, mixez-le plus longtemps.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.</p>
+
+<h2 id="Soulignement_et_importance">Soulignement et importance</h2>
+
+<p>Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.</p>
+
+<h3 id="Emphase">Emphase</h3>
+
+<p>Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.</p>
+
+<p>« Je suis content que vous n'ayez pas été en retard. »</p>
+
+<p>« Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>. »</p>
+
+<p>La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.</p>
+
+<p>En HTML, nous utilisons l'élément {{htmlelement("em")}} (<strong>em</strong>phase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).</p>
+
+<pre class="brush: html">&lt;p&gt;Je suis &lt;em&gt;content&lt;/em&gt; que vous n'ayez pas été &lt;em&gt;en retard&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Grande_importance">Grande importance</h3>
+
+<p>Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :</p>
+
+<p>Ce liquide est <strong>hautement toxique</strong>.</p>
+
+<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
+
+<p>En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).</p>
+
+<pre class="brush: html">&lt;p&gt;Ce liquide est &lt;strong&gt;hautement toxique&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;Je compte sur vous. &lt;strong&gt;Ne soyez pas en retard&lt;/strong&gt; !&lt;/p&gt;</pre>
+
+<p>Il est possible d'imbriquer <code>strong</code> et <code>em</code> :</p>
+
+<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>
+
+<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;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Avis important&lt;/h1&gt;
+&lt;p&gt;Le dimanche 9 janvier 2010, une bande de barbares
+   a été repérée en train de voler plusieurs nains
+   de jardin dans un centre commercial du centre-ville
+   de Milwaukee. Ils portaient tous des combinaisons
+   vertes et des chapeaux ridicules, et semblaient
+   s'amuser comme des fous. Si quelqu'un a une quelconque information
+  sur cet incident, veuillez contacter la police immédiatement.&lt;/p&gt;&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Voir la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p> </p>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Voir la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Voir la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Voir la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = "&lt;h1&gt;Avis important&lt;/h1&gt;\n&lt;p&gt;Le &lt;strong&gt;dimanche 9 janvier 2010&lt;/strong&gt;, une bande de &lt;em&gt;barbares&lt;/em&gt; a été repérée en train de voler &lt;strong&gt;&lt;em&gt;plusieurs&lt;/em&gt; nains de jardin&lt;/strong&gt; dans un centre commercial du centre-ville de &lt;strong&gt;Milwaukee&lt;/strong&gt;. Ils portaient tous &lt;em&gt;des combinaisons vertes&lt;/em&gt; et des &lt;em&gt;chapeaux ridicules&lt;/em&gt; et semblaient s'amuser comme des fous. Si quelqu'un a une &lt;strong&gt;quelconque&lt;/strong&gt; information sur cet incident, veuillez contacter la police &lt;strong&gt;immédiatement&lt;/strong&gt;.&lt;/p&gt;";
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloquer le déplacement du focus hors de la zone texte avec la touche Tab
+// faire en sorte que la touche Tab mette une tabulation à la position du curseur
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+  // Mettre à jour le code utilisateur enregistré chaque fois que l'utilisateur
+  // met à jour le texte du code
+textarea.onkeyup = function(){
+  // nous souhaitons uniquement enregistrer l'état quand le code utilisateur est montré,
+  // non la solution, donc elle n'est pas enregistrée sur le code utilisateur
+
+  if(solution.value === 'Voir la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+
+<h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3>
+
+<p>Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés <strong>éléments de présentation</strong> et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.</p>
+
+<p>HTML5 a redéfini <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code> et <code>&lt;u&gt;</code> avec de nouveaux rôles sémantiques quelques peu déroutants.</p>
+
+<p>Voici la meilleure règle d'or : il est probablement approprié d'utiliser <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, ou <code>&lt;u&gt;</code> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.</p>
+
+<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('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>
+</div>
+
+<pre class="brush: html">&lt;!-- noms scientifiques --&gt;
+&lt;p&gt;
+  Le colibri à gorge rouge (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
+&lt;/p&gt;
+
+&lt;!-- mots dans une langue étrangère --&gt;
+&lt;p&gt;
+  Le menu était un océan de mots exotiques comme &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; et &lt;i lang="en"&gt;porridge&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- une faute d'orthographe connue --&gt;
+&lt;p&gt;
+  Un jour, j'apprendrai comment mieux &lt;u style="text-decoration-line: underline; text-decoration-style: wavy;"&gt;épeler&lt;/u&gt;.
+&lt;/p&gt;
+
+&lt;!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Trancher&lt;/b&gt; deux morceaux de pain dans la miche.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Mettre&lt;/b&gt; une rondelle de tomate et une feuille de laitue
+    entre les deux tranches de pain.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment <a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">créer des hyperliens</a>, qui est peut-être l'élément le plus important sur le Web.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li>Fondamentaux du texte HTML</li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Faire une Lettre</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..d9d5aa9a05
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/index.html
@@ -0,0 +1,65 @@
+---
+title: Introduction au HTML
+slug: Apprendre/HTML/Introduction_à_HTML
+tags:
+  - Codage
+  - HTML
+  - Introduction au HTML
+  - Landing
+  - Liens
+  - Structure
+  - Texte
+  - head
+  - sémantique
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d’éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Il n’y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d’une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">cet article</a> et comprendre comment créer et gérer des fichiers tel qu’expliqué dans <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">cet autre article</a> — ces deux articles font partie du module <a href="/fr/Apprendre/Commencer_avec_le_web">Démarrer avec le Web</a> qui s’adresse aux débutants.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n’est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l’occasion de tester vos compétences.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></dt>
+ <dd>Cet article porte sur les fondements du HTML pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></dt>
+ <dd><code>head</code> dans un document HTML est une partie du document qui n’est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce  des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Les concepts fondamentaux du HTML liés au texte</a></dt>
+ <dd>Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi <strong>sémantiser</strong>), afin que le navigateur sache comment l’afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d’emphase ou d’importance à des mots, créer des listes, etc.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Créer des hyperliens</a></dt>
+ <dd>Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">La mise en forme avancée du texte</a></dt>
+ <dd>Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n’ont pas été mentionnés dans l’article<a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">La structure d'un document et d'un site web</a></dt>
+ <dd>De même que HTML est utilisé pour définir les diverses parties indépendantes d’une page (comme un « paragraphe » ou une « image »), HTML l’est pour définir des zones de votre site web (comme l’« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d’un site simple et l’écriture du HTML correspondant.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer du code HTML</a></dt>
+ <dd>Écrire du code HTML, c’est bien, mais si quelque chose se passe mal, que faire pour trouver où est l’erreur dans le code ? Cet article vous indique divers outils pour vous aider.</dd>
+</dl>
+
+<h2 id="Évaluations">Évaluations</h2>
+
+<p>Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Utiliser les bons éléments pour une lettre</a></dt>
+ <dd>Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L’exercice consiste à baliser une lettre.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Organiser la structure d'une page</a></dt>
+ <dd>Dans cette évaluation, vous devrez organiser la structure d’une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.</dd>
+</dl>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt>
+ <dd>Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s’y familiariser avec la lecture, l’écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.</dd>
+</dl>
diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html
new file mode 100644
index 0000000000..cdf9dd4cf1
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html
@@ -0,0 +1,103 @@
+---
+title: Faire une lettre
+slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter
+tags:
+  - Codage
+  - Débutant
+  - Evaluation
+  - HTML
+  - Liens
+  - Texte
+  - en-tête
+translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <code>&lt;head&gt;</code> en HTML.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a> et <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément &lt;head&gt;.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour commencer cet exercice, vous devez récupérer le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">texte brut que vous allez baliser</a> et les CSS <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">à inclure</a> dans l'HTML. Créez un nouveau fichier <code>.html</code> avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire l'exercice.)</p>
+
+<h2 id="Projet_«_lettre_»">Projet « lettre »</h2>
+
+<p>Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.</p>
+
+<p>Sémantique de blocs/structures :</p>
+
+<ul>
+ <li>Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}.</li>
+ <li>La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne  « Re : ») et trois en-têtes de deuxième niveau.</li>
+ <li>Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.</li>
+ <li>Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.</li>
+</ul>
+
+<p>Sémantique en ligne :</p>
+
+<ul>
+ <li>Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.</li>
+ <li>Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.</li>
+ <li>La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.</li>
+ <li>Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.</li>
+ <li>Les six indices/exposants seront balisés de manière appropriée.</li>
+ <li>Les symboles « degré »,  « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.</li>
+ <li>Essayez de marquer au moins deux mots importants en gras/italique.</li>
+ <li>Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http://example.com.</li>
+ <li>La citation et la devise de l'université doivent être marquées avec les éléments appropriés.</li>
+</ul>
+
+<p>Dans l'en‑tête du document :</p>
+
+<ul>
+ <li>Le jeu de caractères sera précisé comme étant utf-8 avec la balise <code>meta</code> appropriée.</li>
+ <li>L'auteur de la lettre sera indiqué dans une balise <code>meta</code> adéquate.</li>
+ <li>Les CSS fournies seront incorporées avec le marquage approprié.</li>
+</ul>
+
+<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
+
+<ul>
+ <li>Utilisez le <a href="https://validator.w3.org/">validateur HTML W3C</a> pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.</li>
+ <li>Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.</p>
+
+<p><img alt="Présentation de la lettre" src="https://mdn.mozillademos.org/files/15997/fr-lettre.png"></p>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li>Faire une Lettre</li>
+ <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
new file mode 100644
index 0000000000..acbe843b62
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
@@ -0,0 +1,96 @@
+---
+title: Structurer une page de contenu
+slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
+translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour commencer cet exercice, vous pouvez télécharger <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">l'archive contenant les fichiers nécessaires</a> à cette évaluation. Elle contient :</p>
+
+<ul>
+ <li>le fichier HTML auquel vous allez devoir ajouter le balisage structurel,</li>
+ <li>le fichier CSS pour styliser la page,</li>
+ <li>les images utilisées dans la page.</li>
+</ul>
+
+<p>Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation.</p>
+
+<h2 id="Aperçu_du_projet">Aperçu du projet</h2>
+
+<p>Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :</p>
+
+<ul>
+ <li>un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu,</li>
+ <li>une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images,</li>
+ <li>un pied de page avec les informations de droits d'auteur et les crédits.</li>
+</ul>
+
+<p>Vous devez ajouter les enveloppes appropriées pour :</p>
+
+<ul>
+ <li>l'en-tête</li>
+ <li>le menu de navigation</li>
+ <li>le contenu principal</li>
+ <li>le texte de bienvenue</li>
+ <li>la barre latérale avec les images</li>
+ <li>le pied de page</li>
+</ul>
+
+<p>Vous devez aussi</p>
+
+<ul>
+ <li>appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.</li>
+</ul>
+
+<h2 id="Conseils_et_astuces"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.5px;"><strong>Conseils et astuces</strong></span></font></h2>
+
+<ul>
+ <li>Utilisez le « <a href="https://validator.w3.org/">W3C HTML validator »</a> pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).</li>
+ <li>Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.</li>
+ <li>Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page.</li>
+ <li>Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.</p>
+
+<p><img alt="L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête &quot;Observons les oiseaux&quot;, des photos d'oiseaux et un message de bienvenue." src="https://mdn.mozillademos.org/files/15998/oiseaux.png" style="display: block; height: 1070px; margin: 0px auto; width: 1273px;"></p>
+
+<h2 id="ÉvaluationEdit">Évaluation<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter$edit#Évaluation" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p>
+
+<p>{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li>Structurer une page de contenu</li>
+</ul>
diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..f4d2163b6f
--- /dev/null
+++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,286 @@
+---
+title: Qu'avez-vous dans la tête ? Métadonnées en HTML
+slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</div>
+
+<p class="summary">L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Connaître les bases du HTML, telles qu'elles sont exposées dans l'article <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs:</th>
+   <td>En savoir plus sur la balise &lt;head&gt; du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_que_len-tête_de_HTML">Qu'est-ce que l'en-tête de HTML ?</h2>
+
+<p>Revoyons le document HTML de base de l' <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">article précédent</a>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Ma page test&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Voici ma page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise &lt;head&gt; est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Ma page test&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les <a href="https://developer.mozilla.org/en-US/docs/Learn/Discover_browser_developer_tools">outils de développement</a> pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément &lt;head&gt;, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.</p>
+
+<h2 id="Ajouter_un_titre">Ajouter un titre</h2>
+
+<p>Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !</p>
+
+<ul>
+ <li>L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié).</li>
+ <li>L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document).</li>
+</ul>
+
+<h3 id="Apprentissage_actif_inspection_dun_exemple_simple">Apprentissage actif : inspection d'un exemple simple </h3>
+
+<ol>
+ <li>Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">page-titre-exemple</a> sur le dépôt Github. Pour ce faire, soit :
+
+  <ol>
+   <li>copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.</li>
+   <li>pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez <em>Fichier&gt; Enregistrer la page sous ...</em> dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.</li>
+  </ol>
+ </li>
+ <li>Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça :
+  <p><img alt="Une simple page web page dont &lt;title> a la valeur «Élément &lt;title>» et &lt;h1> la valeur Élément &lt;h1>." src="https://mdn.mozillademos.org/files/15944/fr-element-title.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;">Il devrait désormais être évident de situer où le contenu de &lt;h1&gt; apparaît  et où celui de <code>&lt;title&gt;</code> apparaît !</p>
+ </li>
+ <li>
+  <p>Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.</p>
+ </li>
+</ol>
+
+<p>Le contenu de l'élément <code>&lt;title&gt;</code> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( <em>Marques-pages &gt; Marquer cette page</em> ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <code>&lt;title&gt;</code> est suggéré comme nom pour le marque-page.</p>
+
+<p><img alt="Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément &lt;title>." src="https://mdn.mozillademos.org/files/15945/fr-bookmarked.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p>
+
+<p>Le contenu de <code>&lt;title&gt;</code> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.</p>
+
+<h2 id="Métadonnées_lélément_&lt;meta>">Métadonnées : l'élément &lt;meta&gt;</h2>
+
+<p>Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <code>&lt;meta&gt;</code> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.</p>
+
+<h3 id="Définition_de_lencodage_des_caractères_du_document">Définition de l'encodage des caractères du document</h3>
+
+<p>Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :</p>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. <code>utf-8</code> <em> </em>est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :</p>
+
+<p><img alt="Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement." src="https://mdn.mozillademos.org/files/15946/fr-meta-utf8.png" style="display: block; height: 404px; margin: 0px auto; width: 657px;">Si vous définissez votre encodage de caractères en <code>ISO-8859-1</code> , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :</p>
+
+<p><img alt="Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement." src="https://mdn.mozillademos.org/files/15947/fr-meta-ISO.png" style="display: block; height: 400px; margin: 0px auto; width: 657px;"></p>
+
+<div class="note">
+<p><strong>Note</strong> : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages  incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage <code>utf-8</code> sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.</p>
+</div>
+
+<h3 id="Apprentissage_actif_expérience_avec_lencodage_des_caractères">Apprentissage actif : expérience avec l'encodage des caractères</h3>
+
+<p><span id="result_box" lang="fr"><span>Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <code>&lt;title&gt;</code> (la page </span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a><span lang="fr"><span>), faites un essai de modification de la valeur de la métadonnée <code>charset</code> en ISO-8859-1 et ajoutez le japonais à votre page</span><span>.</span> Voici<span> le code que nous avons utilisé :</span></span></p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter  le nom de l'auteur et une description</h3>
+
+<p><span id="result_box" lang="fr"><span>De nombreux éléments <code>&lt;meta&gt;</code> icontiennent les attributs <code>name</code> et <code>content</code> :</span></span></p>
+
+<ul>
+ <li><code>name</code> définit le type de méta élément ; le type d'informations  contenu.</li>
+ <li><code>content</code> définit le contenu réel de la métadonnée.</li>
+</ul>
+
+<p>Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :</p>
+
+<pre class="brush: html notranslate">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="<span id="result_box" lang="fr"><span>La Zone Apprentissage des documents web
+du MDN a pour but de donner </span><span>aux débutants du Web tout ce qu'ils doivent
+savoir pour commencer le développement de pages webs et d'applications</span><span>.</span></span>"&gt;</pre>
+
+<p>Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.</p>
+
+<p>Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme <a href="https://developer.mozilla.org/fr/docs/Glossaire/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}} — optimisation du moteur de recherche.)</p>
+
+<h3 id="Apprentissage_actif_utilisation_des_descriptions_dans_les_moteurs_de_recherche.">Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.</h3>
+
+<p>La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.</p>
+
+<ol>
+ <li>Allez sur la page d'accueil de <a href="https://developer.mozilla.org/fr/">Mozilla Developer Network</a>.</li>
+ <li>Regardez le source de la page (Clic droit/<kbd>Ctrl</kbd>, choissisez « <em>Code source de la page</em> » dans le menu contextuel.)</li>
+ <li>Trouvez la balise méta <code>description</code>. Elle ressemble à ceci :
+  <pre id="line1">&lt;meta name="description" content="<span><a class="attribute-value">MDN Web Docs fournit
+ des informations sur les technologies web ouvertes comme HTML,
+ CSS et les API utilisées pour les sites web et les applications
+ web. On y trouve également de la documentation destinées aux
+ développeurs à propos des produits Mozilla tels que les
+ outils de développement de Firefox.</a>"&gt;</span></pre>
+ </li>
+ <li>Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <code>&lt;meta&gt;</code> description et de l'élément <code>&lt;title&gt;</code> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine !
+  <p><img alt='Une page de recherche Google pour  "MDN web docs"' src="https://mdn.mozillademos.org/files/15948/fr-google.png" style="border-style: solid; border-width: 1px; display: block; height: 448px; margin: 0px auto; width: 700px;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Plusieurs fonctions <code>&lt;meta&gt;</code> ne sont plus utilisées. Par exemple, l'élément <code>&lt;meta&gt;</code> <code>keyword</code> (<code>&lt;meta name= "keywords" content="mettez, vos, mot-clés, ici"&gt;</code>) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.</p>
+</div>
+
+<h3 id="Autres_types_de_métadonnées">Autres types de métadonnées</h3>
+
+<p>En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;</p>
+
+<p>Par exemple, <a href="http://ogp.me/">Open Graph Data</a> est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :</p>
+
+<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content=<span>"<a class="attribute-value">MDN Web Docs fournit des
+informations sur les technologies web ouvertes comme HTML, CSS et les API
+utilisées pour les sites web et les applications web. On y trouve également
+de la documentation destinées aux développeurs à propos des produits
+Mozilla tels que les outils de développement de Firefox.</a>"&gt;</span>
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="Ajouter_des_icônes_personnalisées_à_un_site">Ajouter des icônes personnalisées à un site</h2>
+
+<p><span id="result_box" lang="fr"><span>Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.</span></span></p>
+
+<p>La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.</p>
+
+<p>Une favicône peut être ajoutée à votre page de la façon suivante :</p>
+
+<ol>
+ <li>Enregistrez-la dans le même répertoire que la page d'index du site, sous le format <code>.ico</code> (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme <code>.gif</code> ou <code>.png</code>, mais utiliser le format ICO assurera son fonctionnement  depuis Internet Explorer 6.)</li>
+ <li>Ajoutez la ligne suivante dans votre <code>&lt;head&gt;</code> du HTML pour la référencer :
+  <pre class="brush: html notranslate">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>Voici un exemple de favicône dans un panneau de favoris :</p>
+
+<p><img alt="Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté." src="https://mdn.mozillademos.org/files/15949/fr-library.png" style="display: block; height: 396px; margin: 0px auto; width: 550px;"></p>
+
+<p>Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :</p>
+
+<pre class="brush: html notranslate">&lt;!-- troisième-génération iPad avec haute-résolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone avec haute-résolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- iPad de première et deuxième génération : --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- favicône de base --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.</p>
+
+<p>Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.</p>
+
+<h2 id="Application_des_CSS_et_JavaScript_au_HTML">Application des CSS et JavaScript au HTML</h2>
+
+<p>À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.</p>
+
+<ul>
+ <li>
+  <p>L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, <code>rel="stylesheet"</code> indiquant qu'il s'agit de la feuille de style du document, et <code>href</code> indiquant le chemin d'accès au fichier la contenant :</p>
+
+  <pre class="brush: html notranslate">&lt;link rel="stylesheet" href="mon_fichier_css.css"&gt;</pre>
+ </li>
+ <li>
+  <p>L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture <code>&lt;/body&gt;</code>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur).</p>
+
+  <pre class="brush: html notranslate">&lt;script src="mon-fichier-js.js"&gt;&lt;/script&gt;</pre>
+
+  <div class="note">
+  <p><strong>Note </strong>: L'élément <code>&lt;script&gt;</code> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <code>&lt;script&gt;</code>.</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="Apprentissage_actif_appliquer_des_CSS_et_du_JavaScript_à_une_page">Apprentissage actif : appliquer des CSS et du JavaScript à une page</h3>
+
+<ol>
+ <li>Pour commencer cet apprentissage actif, prenez une copie de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.</li>
+ <li>Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.</li>
+ <li>En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.</li>
+</ol>
+
+<p>Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :</p>
+
+<p><img alt="Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page." src="https://mdn.mozillademos.org/files/15950/JS-CSS-exemple.png" style="display: block; height: 475px; margin: 0px auto; width: 568px;"></p>
+
+<ul>
+ <li>Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.</li>
+ <li>Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> .</p>
+</div>
+
+<h2 id="Définition_de_la_langue_principale_du_document">Définition de la langue principale du document</h2>
+
+<p>Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'<a href="/en-US/docs/Web/HTML/Global_attributes/lang">attribut <code>lang</code></a> <span class="short_text" id="result_box" lang="fr"><span>à la balise ouvrante HTML (voir</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p>
+
+<pre class="brush: html notranslate">&lt;html lang="fr"&gt;</pre>
+
+<p>Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)</p>
+
+<p>Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Exemple en japonais : &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>Ces codes sont définis par la norme <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Vous en trouverez plus sur <a href="https://www.w3.org/International/articles/language-tags/">Etiquettes langues en HTML et XML (en)</a>.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.</p>
+
+<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li>
+ <li>Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li>
+</ul>
diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
new file mode 100644
index 0000000000..a6ea2d91cc
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
@@ -0,0 +1,182 @@
+---
+title: Ajouter des images vectorielles à une page web
+slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web
+tags:
+  - Graphics
+  - Guide
+  - HTML
+  - Intermediate
+  - Learn
+  - SVG
+translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<div class="summary">
+<p>Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a> et comment <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">insérer une image dans un document HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment intégrer une image SVG dans une page web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est-ce_que_SVG_Qu'apporte-t-il">Qu'est-ce que SVG ? Qu'apporte-t-il ?</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.</p>
+
+<p>Certaines images (appelées images « <em>matricielles</em> ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.</p>
+
+<p>Au contraire, <strong>les images vectorielles</strong> décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant <code>srcset</code> et <code>sizes</code>.</p>
+
+<p>De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.</p>
+
+<p>Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme <a href="https://inkscape.org">Inkscape</a>. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.</p>
+
+<div class="note">
+<p>Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web</a>.</p>
+</div>
+
+<h2 id="La_méthode_rapide_htmlelement(img)">La méthode rapide : {{htmlelement("img")}}</h2>
+
+<p>Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut <code>height</code> ou <code>width</code> (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">lire ce tutoriel sur <code>&lt;img&gt;</code></a>.</p>
+
+<pre class="brush: html">&lt;img
+    src="equilateral.svg"
+    alt="un triangle aux trois côtés égaux"
+    height="87px"
+    width="100px" /&gt;</pre>
+
+<h3 id="Avantages">Avantages</h3>
+
+<ul>
+ <li>Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.</li>
+ <li>Il est également possible de créer des hyperliens en plaçant l'élément <code>&lt;img&gt;</code> dans un élément {{htmlelement("a")}}.</li>
+</ul>
+
+<h3 id="Inconvénients">Inconvénients</h3>
+
+<ul>
+ <li>Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut <code>src</code> en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} :
+
+  <pre class="brush: html">&lt;img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/&gt;
+</pre>
+ </li>
+ <li>Il est impossible de manipuler l'image avec JavaScript.</li>
+ <li>Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet).</li>
+ <li>Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple <code>:focus</code>).</li>
+</ul>
+
+<div class="note">
+<ul>
+ <li>Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <code>&lt;img&gt;</code>).
+
+  <pre class="brush: css"><code>background: url("image-de-secours.png");</code>
+background-image<code>: url(image.svg);
+background-size: contain;</code></pre>
+ </li>
+ <li>Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, <a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas#Un_mot_sur_les_serveurs_Web">cet article pourra vous aider à résoudre le problème</a>.</li>
+</ul>
+</div>
+
+<h2 id="Comment_inclure_une_image_SVG_directement_dans_le_code_du_document">Comment inclure une image SVG directement dans le code du document</h2>
+
+<p>Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <code><a href="/fr/docs/Web/SVG/Element/svg">&lt;svg&gt;</a></code>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :</p>
+
+<pre class="brush: html">&lt;svg width="300" height="200"&gt;
+    &lt;rect width="100%" height="100%" fill="green" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>La balise <code>&lt;svg&gt;</code> n'a pas besoin des attributs <code>version</code>, <code>baseProfile</code> ou <code>xmlns</code>. Assurez-vous de bien retirer les déclarations d'espaces de noms (<em>namespace</em>) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser <a href="http://petercollingridge.appspot.com/svg_optimiser">SVG Optimiser</a> ou <a href="http://www.codedread.com/scour/">Scour</a>.</p>
+
+<h3 id="Avantages_2">Avantages</h3>
+
+<ul>
+ <li>Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page.</li>
+ <li>Vous pouvez ajouter des attributs <code>class</code> et <code>id</code> aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, <a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation">chaque attribut de présentation SVG</a> peut être utilisé comme propriété CSS.</li>
+ <li>Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que <code>:focus</code>) et des animations CSS. Il faut toutefois noter que les <a href="http://css-tricks.com/guide-svg-animations-smil/">animation SMIL</a> fonctionneront avec toutes les méthodes décrites dans cet article.</li>
+ <li>Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien.</li>
+</ul>
+
+<h3 id="Inconvénients_2">Inconvénients</h3>
+
+<ul>
+ <li>Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire.</li>
+ <li>Chaque image SVG augmente la taille du fichier HTML.</li>
+ <li>Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources.</li>
+ <li>Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs.</li>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="Comment_intégrer_un_SVG_dans_un_élément_htmlelement(object)">Comment intégrer un SVG dans un élément {{htmlelement("object")}}</h2>
+
+<p>Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :</p>
+
+<pre class="brush: html">&lt;object data="parallelogramme.svg"
+    width="300"
+    height="250"
+    type="image/svg+xml"&gt;
+
+&lt;img src="parallelogramme.png"
+    alt="un quadrilatère dont les côtés sont parallèles deux à deux" /&gt;
+
+&lt;/object&gt;
+
+</pre>
+
+<h3 id="Inconvénients_3">Inconvénients</h3>
+
+<ul>
+ <li>Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images.</li>
+ <li>Les éléments <code>&lt;object&gt;</code> ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable.</li>
+ <li>Les éléments SVG peuvent être mis en forme avec CSS mais
+  <ul>
+   <li>le code SVG doit contenir les règles CSS (par exemple dans un élément <code>&lt;style&gt;</code>) ou</li>
+   <li>le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises :
+    <pre class="brush: xml">&lt;?xml-stylesheet type="text/css" href="svg.css" ?&gt;</pre>
+    (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Comment_intégrer_un_SVG_avec_un_élément_htmlelement(iframe)">Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}</h2>
+
+<p>Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <code>&lt;iframe&gt;</code> n'est donc qu'une variation de <a href="/fr/Apprendre/HTML/Howto/Embed_a_webpage_within_another_webpage">l'intégration d'une page web dans une autre page web</a>.</p>
+
+<p>Voici un rapide exemple :</p>
+
+<pre class="brush: html">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
+    &lt;img src="triangle.png" alt="Un triangle avec trois côtés inégaux" /&gt;
+&lt;/iframe&gt;</pre>
+
+<p><code>iframe</code> permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les <code>iframe</code>.</p>
+
+<p>De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.</p>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<ul>
+ <li>{{htmlelement("iframe")}}</li>
+ <li>{{htmlelement("object")}}</li>
+ <li>{{htmlelement("img")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">Le tutoriel SVG</a> sur MDN</li>
+ <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Conseils rapides pour des SVG adaptatifs (en anglais)</a></li>
+ <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Le tutoriel de Sara Soueidan sur les images SVG adaptatives (en anglais)</a></li>
+ <li><a href="http://www.w3.org/TR/SVG-access/">Les bénéfices du format SVG pour l'accessibilité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/scale-svg/">Comment redimensionner des fichiers SVG (en anglais)</a> (ce n'est pas aussi simple qu'avec les images matricielles)</li>
+ <li><a href="http://www.w3.org/TR/SVG/">La spécification SVG</a></li>
+</ul>
diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..ff8adaf25c
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,523 @@
+---
+title: Les images en HTML
+slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
+tags:
+  - Débutant
+  - Guide
+  - HTML
+  - Image
+  - Title
+  - alt text
+  - figcaption
+  - figure
+  - img
+  - src
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions élémentaires en informatique, <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases  de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, fondamentaux du HTML (comme décrit dans  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le Web).</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Comment_intégrer_une_image_à_une_page_web">Comment intégrer une image à une page web ?</h2>
+
+<p>Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — <code>src</code> (souvent appelé par son nom entier:  <em>source</em>). L'attribut <code>src</code> contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  <code>href=</code> attribue des valeurs.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous devriez lire  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url">Une brève présentation des URL et des chemins</a>  pour vous rafraîchir la mémoire avant de continuer.</p>
+</div>
+
+<p>Donc, par exemple, si votre image s'appelle <code>dinosaur.jpg</code>, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :</p>
+
+<pre class="brush: html">&lt;img src="dinosaur.jpg"&gt;</pre>
+
+<p>Et si cette image se trouve dans un sous-répertoire <code>images</code> situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<p>Ainsi de suite.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. <code>dinosaur.jpg</code> est infiniment mieux que <code>img835.png</code>.</p>
+</div>
+
+<p>Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :</p>
+
+<pre class="brush: html">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+
+<p>Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.</p>
+
+<div class="warning">
+<p><strong>Attention ! :</strong> La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :<br>
+ <br>
+ 1) Ce soit votre image (vous en êtes le créateur),<br>
+ 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,<br>
+ 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.<br>
+ <br>
+ Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...</p>
+</div>
+
+<p>Le code au-dessus vous donnera, à peu prés, le résultat suivant :</p>
+
+<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez les exemples finis de cette section sur <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> (regardez aussi le  <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">code source </a>.)</p>
+</div>
+
+<h3 id="Texte_alternatif">Texte alternatif</h3>
+
+<p>Le prochain attribut que nous allons étudier est <code>alt</code>. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<p>La manière la plus simple de tester votre texte <code>alt</code> est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée <code>dinosooooor.jpg</code>, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :</p>
+
+<ul>
+ <li>L'utilisateur est un déficient visuel qui utilise un <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteur d'écran</a> qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.</li>
+ <li>Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier.</li>
+ <li>Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme <a href="https://fr.wikipedia.org/wiki/Lynx_(navigateur)">Lynx)</a>, qui affichent le texte alt des images.</li>
+ <li>Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche.</li>
+ <li>L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher.</li>
+</ul>
+
+<p>Que devriez-vous noter dans vos attributs <code>alt</code> ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :</p>
+
+<ul>
+ <li><strong>Decoration. </strong>Vous devriez utiliser  {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un <code>alt=""</code> vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.</li>
+ <li><strong>Contenu. </strong>Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un <em>bref</em> <em> </em><code>alt</code> text –  ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de  <code>alt</code> text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement  <code>alt=""</code>.</li>
+ <li><strong>Lien.</strong> Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien">Lien texte accessible </a>. Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <code>&lt;a&gt;</code>, soit dans l'attribut  <code>alt</code> de l'image – utilisez ce qui marche le mieux dans votre cas.</li>
+ <li><strong>Texte.</strong> Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  <a href="https://developer.mozilla.org/fr/docs/Web/CSS/text-shadow">utilisez CSS</a>  pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut  <code>alt</code> .</li>
+</ul>
+
+<p>Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour plus d'informations, voyez notre guide  <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Textes Alternatifs</a></p>
+</div>
+
+<h3 id="Largeur_et_hauteur_width-height">Largeur et hauteur (width-height)</h3>
+
+<p>Vous pouvez vous servir des attributs  <code>width</code> et <code>height</code> pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.</p>
+
+<p>De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  <a href="https://fr.wikipedia.org/wiki/Format_d%27image">Format d'image</a>. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> .</p>
+</div>
+
+<h3 id="Titre_dimages">Titre d'images</h3>
+
+<p>Comme décrit dans le chapitre  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens </a>, vous pouvez aussi ajouter un attribut <code>title</code> aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :</p>
+
+<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<p>Cela donne une info-bulle avec le texte entré dans l'attribut <code>title</code> :</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.</p>
+
+<h3 id="Pédagogie_active_incorporer_une_image">Pédagogie active : incorporer une image</h3>
+
+<p>À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.</p>
+
+<p>Nous avons encore quelques petites choses pour vous :</p>
+
+<ul>
+ <li>Ajoutez du texte <code>alt</code>  , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.</li>
+ <li>Réglez l'image à une bonne taille :  <code>width</code> et <code>height</code> ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.</li>
+ <li>Mettez un  <code>title</code>  sur l'image.</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  <em>Reset</em> .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;img&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+
+
+<h2 id="Légender_des_images_avec_figure_et_figcaption">Légender des images avec <code>figure</code> et <code>figcaption</code></h2>
+
+<p>En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :</p>
+
+<pre class="brush: html">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?</p>
+
+<p>Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :</p>
+
+<pre>&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte <code>alt</code> devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.</p>
+</div>
+
+<p>Un objet &lt;figure&gt; n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :</p>
+
+<ul>
+ <li>exprime votre désir d'accessibilité et de compréhension facilitée.</li>
+ <li>peut se placer en plusieurs endroits dans une page à flot linéaire.</li>
+ <li>Fournit une information essentielle qui supporte le texte principal.</li>
+</ul>
+
+<p>Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.</p>
+
+<h3 id="Pédagogie_active_créer_un_objet_figure">Pédagogie active : créer un objet figure</h3>
+
+<p>Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :</p>
+
+<ul>
+ <li>Encapsulez-le dans un élément {{htmlelement("figure")}} .</li>
+ <li>Copiez le texte de l'attribut, enlevez l'attribut  <code>title</code>  et mettez le texte dans un élément  {{htmlelement("figcaption")}} sous l'image.</li>
+</ul>
+
+<p>Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  <em>Reset</em> .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S<em>how solution</em> :</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;figure&gt;\n &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171" /&gt;\n &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Images_darrière-plan_CSS">Images d'arrière-plan CSS</h2>
+
+<p>Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et <code>background</code> , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :</p>
+
+<pre class="brush: css">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !</p>
+
+<p>En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous en apprendrez beaucoup plus sur les  <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> dans notre topic  <a href="https://developer.mozilla.org/fr/Apprendre/CSS">CSS</a> .</p>
+</div>
+
+<p>C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module :</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..bcb6a30361
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,71 @@
+---
+title: Multimédia et Intégration
+slug: Apprendre/HTML/Multimedia_and_embedding
+tags:
+  - Apprentissage
+  - Audio
+  - Codage
+  - Débutant
+  - Evaluation
+  - Flash
+  - Guide
+  - HTML
+  - Image Vectorielle
+  - Images
+  - Interactivité
+  - SVG
+  - Video
+  - iframes
+  - imagemaps
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p>Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. </p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">introduction au HTML</a>. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.</p>
+
+<dl>
+ <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></strong></dt>
+ <dd>Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.</dd>
+ <dt><strong><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Vidéo et contenu audio</a></strong></dt>
+ <dd>Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; à &lt;iframe&gt; — autres techniques d'intégration</a></dt>
+ <dd>À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <code>&lt;iframe&gt;</code> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web">Ajouter des images vectorielles sur le Web </a></dt>
+ <dd>Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Images adaptatives</a></dt>
+ <dd>
+ <p>Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du <a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">responsive design</a>, un futur sujet CSS que vous pourrez apprendre.</p>
+ </dd>
+</dl>
+
+<h2 id="Évaluations">Évaluations</h2>
+
+<p>Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></dt>
+ <dd>Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !</dd>
+</dl>
+
+<h2 id="À_voir_aussi">À voir aussi</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Intégrer une carte interactive en haut d'une image</a></dt>
+ <dd>Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.</dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web Principes fondamentaux 2</a></dt>
+ <dd>
+ <p>Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  <em>Multimedia et intégration</em>. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). </p>
+ </dd>
+</dl>
diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
new file mode 100644
index 0000000000..26193c8bac
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
@@ -0,0 +1,110 @@
+---
+title: 'Évaluation : page d''accueil Mozilla'
+slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
+translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding">Multimedia et Intégration</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif:</th>
+   <td>Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> sur github. Mettez le contenu du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> dans un fichier appelé <code>index.html</code> sur votre disque dur local, dans un nouveau répertoire. Puis copiez <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> dans le même dossier (clic droit sur l'image pour le menu des options).</p>
+
+<p>Allez dans le répertoire <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.</p>
+
+<div class="note">
+<p><strong>Note</strong>: le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.</p>
+</div>
+
+<h2 id="Énoncé_du_projet">Énoncé du projet</h2>
+
+<p>Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :</p>
+
+<h3 id="Préparer_les_images">Préparer les images</h3>
+
+<p>Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :</p>
+
+<ul>
+ <li><code>firefox_logo-only_RGB.png</code></li>
+ <li><code>firefox-addons.jpg</code></li>
+ <li><code>mozilla-dinosaur-head.png</code></li>
+</ul>
+
+<p>Donnez-leur des noms similaires comme :  <code>firefoxlogo400.png</code> et <code>firefoxlogo120.png</code>.</p>
+
+<p>Continuons avec <code>mdn.svg</code>, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace<code>further-info</code>. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p>
+
+<p>Puis, créez une version paysage de 1200px de large de <code>red-panda.jpg</code>, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'<code>index.html</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. <a href="https://tinypng.com/">tinypng.com</a> est une bonne aide pour faire ça aisément.</p>
+</div>
+
+<h3 id="Ajouter_un_logo_à_l'en-tête">Ajouter un logo à l'en-tête</h3>
+
+<p>A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.</p>
+
+<h3 id="Ajouter_une_vidéo_dans_le_contenu_principal_de_l'article">Ajouter une vidéo dans le contenu principal de l'article</h3>
+
+<p>Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.</p>
+
+<h3 id="Ajouter_des_images_adaptatives_aux_liens_vers_les_ressources_externes">Ajouter des images adaptatives aux liens vers les ressources externes</h3>
+
+<p>Dans l'élément {{htmlelement("div")}} de la catégorie <code>further-info</code> vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.</p>
+
+<p>Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.</p>
+
+<p>Assurez-vous de faire correspondre les bonnes images avec les liens corrects !</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour tester correctement les exemples <code>srcset</code>/<code>sizes</code>, vous devez charger votre site sur un serveur (utiliser <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p>
+</div>
+
+<h3 id="Un_panda_rouge_créatif">Un panda rouge créatif</h3>
+
+<p>Dans l'élément {{htmlelement("div")}} de la catégorie r<code>ed-panda</code>, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.</p>
+
+<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
+
+<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">fil de discussion concernant cet exercice</a>, ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !</p>
+
+<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module :</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des objets aux "iframes" - autres techniques d'intégration</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Images adaptatives</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page">Évaluation : page d'accueil Mozilla</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
new file mode 100644
index 0000000000..d90d486303
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
@@ -0,0 +1,402 @@
+---
+title: Des objets aux « iframe » — autres techniques d'intégration
+slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies
+tags:
+  - Apprentissage
+  - Article
+  - Codage
+  - Débutant
+  - Flash
+  - Guide
+  - HTML
+  - Integration
+  - Multimédia et intégration
+  - Object
+  - embed
+  - iframe
+translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <code>&lt;iframe&gt;</code> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Compétences informatiques de base,  <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et articles précédents de ce module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Une_courte_histoire_de_l'intégration">Une courte histoire de l'intégration</h2>
+
+<p>Il y a longtemps, sur le Web, il était courant d'utiliser des <strong>cadres</strong> pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé <strong>frameset</strong> (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.</p>
+
+<p> </p>
+
+<p>Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les <a href="https://developer.mozilla.org/fr/docs/Glossary/Java">applets Java</a> et <a href="https://developer.mozilla.org/fr/docs/Glossary/Adobe_Flash">Flash</a> — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.</p>
+
+<p>Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.</p>
+
+<p>Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.</p>
+
+<p> </p>
+
+<h2 id="Apprentissage_actif_utilisations_classiques_de_l'intégration">Apprentissage actif : utilisations classiques de l'intégration</h2>
+
+<p>Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien <a href="https://www.youtube.com/">Youtube</a>, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.</p>
+
+<ol>
+ <li>D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.</li>
+ <li>Au‑dessous de la vidéo, vous devez trouver un bouton <em>Share (Partager)</em> — cliquez‑le pour afficher les options de partage.</li>
+ <li>Sélectionnez le bouton <em>Embed (Intégrer)</em> et vous obtiendrez un morceau de code <code>&lt;iframe&gt;</code> — copiez‑le.</li>
+ <li>Inserez ce code dans la boîte <em>Input</em> ci‑dessous, et voyez le résultat dans <em>Output</em>.</li>
+</ol>
+
+<p>En prime, vous pouvez aussi essayer d'intégrer une carte <a href="https://www.google.com/maps/">Google Map</a> dans l'exemple.</p>
+
+<ol>
+ <li>Allez sur Google Maps et trouvez une carte qui vous plaise.</li>
+ <li>Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.</li>
+ <li>Selectionnez l'option <em>Share or embed map</em> (Partager ou intégrer une carte).</li>
+ <li>Selectionnez l'option <em>Embed map</em> (intégrer une carte), qui vous fournira du code <code>&lt;iframe&gt;</code> — copiez‑le.</li>
+ <li>Inserez‑le dans la boîte <em>Input</em> di‑dessous et voyez le résultat dans <em>Output</em>.</li>
+</ol>
+
+<p>Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, pressez le bouton <em>Afficher la solution</em> pour voir 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;
+
+&lt;div class="output" style="min-height: 250px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Code modifiable&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
+  &lt;input id="solution" type="button" value="Afficher la solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Afficher la solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Afficher la solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Cacher la solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Afficher la solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// bloque la sortie de la zone texte avec la touche tab et fait en
+// sorte qu'il affiche une tabulation à l'emplacement du curseur
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Met à jour le code utilisateur enregistré chaque fois que l'utilisateur le modifie
+
+textarea.onkeyup = function(){
+  // Nous ne voulons enregistrer l'état quand le code utilisateur va être montré,
+  // et non la solution, de sorte que la solution n'est pas enregistrée avec le code utilisateur
+  if(solution.value === 'Afficher la solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p> </p>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Iframes_en_détail">Iframes en détail</h2>
+
+<p>Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme <a href="https://disqus.com/">Disqus</a>, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <code>&lt;iframe&gt;</code>.</p>
+
+<p>Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec &lt;iframe&gt;, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :</p>
+
+<pre>&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox&gt;
+  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+    Lien de repli pour les navigateurs ne prenant pas en charge iframe  &lt;/a&gt; &lt;/p&gt;
+&lt;/iframe&gt;</pre>
+
+<p>Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <code>&lt;iframe&gt;</code> :</p>
+
+<dl>
+ <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
+ <dd>Si activé, <code>&lt;iframe&gt;</code> pourra être mis en mode plein écran avec <a href="/en-US/docs/Web/API/Fullscreen_API">Full Screen API</a> (un peu hors‑sujet dans cet article).</dd>
+ <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
+ <dd>Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}<code>: none;</code> dans le {{Glossary('CSS')}}.</dd>
+ <dt>{{htmlattrxref('src','iframe')}}</dt>
+ <dd>Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.</dd>
+ <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
+ <dd>Ces attributs définissent la largeur et la hauteur souhaitée pour <code>&lt;iframe&gt;</code>.</dd>
+ <dt><strong>Contenu de repli</strong></dt>
+ <dd>Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <code>&lt;iframe&gt;&lt;/iframe&gt;</code> qui seront affichées si l'explorateur ne prend pas en charge <code>&lt;iframe&gt;</code>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <code>&lt;iframe&gt;</code>.</dd>
+ <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
+ <dd>Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <code>&lt;iframe&gt;</code> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note </strong>: Afin d'améliorer la vitesse, il est pertinent de définir l'attribut <code>src</code> de <code>iframe</code> avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).</p>
+</div>
+
+<h3 id="Problèmes_de_sécurité">Problèmes de sécurité</h3>
+
+<p>Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <code>&lt;iframe&gt;</code> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <code>&lt;iframe&gt;</code> — il faut juste être prudent. Poursuivons ...</p>
+
+<p>Fabricants de navigateurs et développeurs Web ont appris à la dure que <code>&lt;iframe&gt;</code> constitue sur le Web une cible commune (terme officiel : un <strong>vecteur d'attaque</strong>) pour des personnes mal intentionnées (souvent appelés <strong>hackeurs (</strong>pirates), ou plus exactement, <strong>crackeurs</strong>).  <code>&lt;iframe&gt;</code> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <code>&lt;iframe&gt;</code> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.</p>
+
+<div class="note">
+<p>Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <code>&lt;iframe&gt;</code> : les hackeurs incorporent un <code>&lt;iframe&gt;</code> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.</p>
+</div>
+
+<p>Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trouver en direct sur Github</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">code source</a> aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la <em>Console</em> dans les <a href="https://developer.mozilla.org/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique <em>Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing</em> (<em>Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre</em>) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <code>&lt;iframe&gt;</code> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.</p>
+
+<h4 id="N'intégrer_que_si_nécessaire">N'intégrer que si nécessaire</h4>
+
+<p>Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."</p>
+
+<p>Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.</p>
+
+<div>
+<p>Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.</p>
+</div>
+
+<h4 id="Utilisez_HTTPS">Utilisez HTTPS</h4>
+
+<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :</p>
+
+<ol>
+ <li>    HTTPS réduit les risques d'altération du contenu distant lors du transfert,</li>
+ <li>    HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.</li>
+</ol>
+
+<p>L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que <a href="https://letsencrypt.org/">Let's Encrypt</a> facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, <em>et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP</em> (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <code>&lt;iframe&gt;</code>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut <code>src</code> de <code>&lt;iframe&gt;</code> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.</p>
+</div>
+
+<h4 id="Toujours_utiliser_l'attribut_sandbox">Toujours utiliser l'attribut  <code>sandbox</code></h4>
+
+<p>Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox </a>(<em>bac à sable</em>).</p>
+
+<p>Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut <code>sandbox</code> sans paramètres, comme montré dans notre exemple précédent.</p>
+
+<p>Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut <code>sandbox=""</code>) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez <em>jamais</em> mettre à la fois les valeurs <code>allow-scripts</code> et <code>allow-same-origin</code> aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».</p>
+
+<div class="note">
+<p><strong>Note </strong>: Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <code>&lt;iframe&gt;</code>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.</p>
+</div>
+
+<h4 id="Configurer_les_directives_CSP">Configurer  les directives CSP</h4>
+
+<p>{{Glossary("CSP")}} est un acronyme pour « <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong> » (politique de sécurité du contenu) ; les directives CSP fournissent un <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">ensemble d'en‑têtes HTTP</a> (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <code>&lt;iframe&gt;</code>, vous pouvez <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurer votre serveur pour qu'il adresse une en‑tête appropriée <code>X-Frame-Options</code></a>.</em> Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Lisez le post de Frederik Braun sur <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.</p>
+</div>
+
+<h2 id="Les_éléments_&lt;embed>_et_&lt;object>">Les éléments &lt;embed&gt; et &lt;object&gt;</h2>
+
+<p>Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !</p>
+
+<div class="note">
+<p><strong>Note </strong>: Un <strong>greffon</strong> est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.</p>
+</div>
+
+<p>Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.</p>
+
+<p>Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">{{htmlelement("embed")}}</th>
+   <th scope="col">{{htmlelement("object")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("URL")}} du contenu à intégrer</td>
+   <td>{{htmlattrxref('src','embed')}}</td>
+   <td>{{htmlattrxref('data','object')}}</td>
+  </tr>
+  <tr>
+   <td>{{glossary("type MIME", 'type de media')}} <em>précis</em> du contenu intégré</td>
+   <td>{{htmlattrxref('type','embed')}}</td>
+   <td>{{htmlattrxref('type','object')}}</td>
+  </tr>
+  <tr>
+   <td>hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon</td>
+   <td>{{htmlattrxref('height','embed')}}<br>
+    {{htmlattrxref('width','embed')}}</td>
+   <td>{{htmlattrxref('height','object')}}<br>
+    {{htmlattrxref('width','object')}}</td>
+  </tr>
+  <tr>
+   <td>noms et valeurs à passer en paramètre au greffon</td>
+   <td>attributs adéquats avec ces noms et valeurs</td>
+   <td>éléments de la simple balise {{htmlelement("param")}}, contenus dans <code>&lt;object&gt;</code></td>
+  </tr>
+  <tr>
+   <td>contenu HTML indépendant en repli en cas de ressources inaccessibles</td>
+   <td>non pris en charge (<code>&lt;noembed&gt;</code> a été abandonné)</td>
+   <td>contenu dans <code>&lt;object&gt;</code>, après <code>les éléments &lt;param&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note </strong>: <code>&lt;object&gt;</code> requiert un attribut <code>data</code>, un attribut <code>type</code>, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). <code>typemustmatch</code> empêche le fichier incorporé d'être exécuté avant que l'attribut <code>type</code> indique le type exact de média. <code>typemustmatch</code>  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).</p>
+</div>
+
+<p>Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">en direct sur Github</a> ainsi que <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">le code source</a> également):</p>
+
+<pre class="brush: html">&lt;embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+
+<p>Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément &lt;objet&gt; avec un élément &lt;embed&gt; intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.</p>
+
+<p>Regardons maintenant un exemple avec <code>&lt;object&gt;</code> ; il intègre  un PDF dans une  (voir  <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">l'exemple en direct</a> et le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">code source</a>) :</p>
+
+<pre class="brush: html">&lt;object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch&gt;
+  &lt;p&gt;Vous ne possédez pas de greffon PDF, mais vous pouvez &lt;a href="myfile.pdf"&gt;télécharger le fichier PDF.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;</pre>
+
+<p>Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a> et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.</p>
+
+<h3 id="Le_cas_«_greffons_»">Le cas « greffons »</h3>
+
+<p>Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.</p>
+
+<p><strong>Mettez‑vous à portée de tout le monde</strong>. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.</p>
+
+<ul>
+ <li><strong>Offrez-vous un répit avec les <a href="http://webaim.org/techniques/flash/">migraines d'accessibilités supplémentaires</a> qui proviennent de Flash et des autres greffons.</strong></li>
+ <li><strong>Restez à l'écart des risques supplémentaires en matière de sécurité.</strong><strong> </strong>Adobe Flash est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoirement</a> non‑sûr<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">,</a> même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demandé qu'Adobe arrête</a><a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso"> Flash.</a></li>
+</ul>
+
+<p>Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la <a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vidéo HTML5</a> pour vos besoins en médias, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour les images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst écrivait déjà il y a quelques années</a> qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.</p>
+
+<p>D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.</p>
+
+<p> </p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et Vidéo</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; à &lt;iframe&gt; — autres techniques d'intégration</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écrans d'accueil Mozilla</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
new file mode 100644
index 0000000000..8aa1cd799b
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -0,0 +1,272 @@
+---
+title: Images adaptatives
+slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web
+tags:
+  - Design
+  - Débutant
+  - Graphics
+  - Guide
+  - HTML
+  - Image
+  - Intermediate
+  - Intermédiaire
+  - img
+  - picture
+  - sizes
+  - srcset
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une part (elles préparent le terrain) dans la conception de sites Web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un futur module au sujet des CSS.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vous devriez savoir <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a> et <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">comment ajouter des images statiques à une page web.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre comment utiliser des fonctionnalités comme {{htmlattrxref("srcset", "img")}} et l'élément {{htmlelement("picture")}}  pour implémenter des solutions d'images adaptatives sur les sites Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pourquoi_des_images_adaptatives">Pourquoi des images adaptatives ?</h2>
+
+<p>Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site Web classique a probablement une image d'en-tête pour flatter le regard du visiteurs, plus peut-être quelques images de contenu plus loin. Vous voulez probablement que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voyons un exemple simple :</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">voir cet exemple en direct</a> et trouver son <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">code source</a> sur Github). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :</p>
+
+<ul>
+ <li>Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 px et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100% de la largeur de la vue.</li>
+ <li>L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 px.</li>
+ <li>Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder.</li>
+</ul>
+
+<p>Tout cela c'est très bien, mais le problème vient quand vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinger les personnes !</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtisses, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de <strong>décisions de nature artistique</strong>.</p>
+
+<p>De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des <strong>changements de résolution</strong> — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des <a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a>, une image matricielle paraît grenue et horrible si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les utilisateurs de mobiles en particulier ne veulent pas cramer de leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site Web.</p>
+
+<p>Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre  pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.</p>
+
+<p>Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle : utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affichés dans l'exemple ci-dessus.</p>
+
+<p>Ce type de problème n'existait pas quand le Web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le Web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Toutes les nouvelles fonctionnalités présentées dans cet article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sont toutes prises en charge dans les parutions d'explorateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris l'explorateur Edge de Microsoft,  même si ce n'est pas le cas d'Internet Explorer.) </p>
+</div>
+
+<h2 id="Comment_créer_des_images_adaptatives">Comment créer des images adaptatives ?</h2>
+
+<p>Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément {{htmlelement("img")}} du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">sans doute de meilleurs outils </a>que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.</p>
+
+<h3 id="Commutations_de_résolution_tailles_différentes">Commutations de résolution : tailles différentes</h3>
+
+<p>Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard {{htmlelement("img")}} vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"&gt;</pre>
+
+<p>Mais il est possible d'utiliser deux nouveaux attributs — {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} — permettant de fournir plusieurs images source avec des indications pour permettre à l'explorateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> sur Github (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">code source</a>) :</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva habillée en fée"&gt;</pre>
+
+<p>Les attributs <code>srcset</code> et <code>sizes</code> paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons en revue leur contenu maintenant :</p>
+
+<p><strong><code>srcset</code></strong> definit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :</p>
+
+<ol>
+ <li>un nom de <strong>fichier image </strong>(<code>elva-fairy-480w.jpg</code>),</li>
+ <li>un espace,</li>
+ <li>la <strong>largeur intrinsèque en  pixels</strong> (<code>480w</code>) — notez l'utilisation de l'unité <code>w</code>, et non <code>px</code> comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur  (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur <kbd>Cmd</kbd> + <kbd>I</kbd> pour faire apparaître l'écran des infos).</li>
+</ol>
+
+<p><strong><code>sizes</code></strong> définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule</p>
+
+<ol>
+ <li>une <strong>condition pour le média</strong> (<code>(max-width:480px)</code>) — vous pourrez en savoir plus à ce propos dans l'<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">article sur les CSS</a>, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,</li>
+ <li>une espace,</li>
+ <li><strong>la largeur de la place </strong>occupée par l'image si la condition pour le média est vraie (<code>440px</code>).</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (<code>px</code>, <code>em</code>) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement  ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). L'explorateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.</p>
+</div>
+
+<p>Ainsi, une fois ces attributs en place, l'explorateur va :</p>
+
+<ol>
+ <li>noter la largeur du périphérique,</li>
+ <li>vérifier quelle est la première condition vraie pour le média dans la liste des tailles,</li>
+ <li>noter la largeur d'emplacement demandée par le média,</li>
+ <li>charger l'image référencée dans la liste <code>srcset</code> qui est la plus proche de la taille choisie.</li>
+</ol>
+
+<p>Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média <code>(max-width: 480px)</code> sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier <code>elva-fairy-480w.jpg</code> sera chargé, car sa largeur intrinsèque (<code>480w</code>) est celle qui est la plus proche de <code>440px</code>. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux utilisateurs de mobiles d'économiser beaucoup de bande passante.</p>
+
+<p>Les explorateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut {{htmlattrxref("src", "img")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans l'élément {{htmlelement("head")}} du document, vous trouvez la ligne <code>&lt;meta name="viewport" content="width=device-width"&gt;</code> : ceci force les explorateurs de mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains explorateurs de mobile mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception. Nous vous en dirons plus à ce propos dans un module à venir.)</p>
+</div>
+
+<h3 id="Outils_de_développement">Outils de développement</h3>
+
+<p>Il y a quelques outils de développement utiles dans les navigateurs pour vous aider à déterminer les largeurs d'affichage nécessaires, etc, que vous devez utiliser. Pour les déterminer, j'ai d'abord chargé la version non adaptative de l'exemple (<code>not‑responsive.html</code>), puis je suis allé dans <a href="https://developer.mozilla.org/fr/docs/Tools/Responsive_Design_Mode">Responsive Design View </a>(<em>Outils &gt; Développement Web &gt; Vue adaptative</em>), qui vous permet de regarder les mises en page Web comme si elles étaient visualisées à travers un éventail de tailles d'écran d'appareils différents.</p>
+
+<p>J'ai réglé la largeur de la fenêtre à 320px puis 480px ; pour chacun, je suis allé dans l'<a href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector">inspecteur DOM</a>, j'ai cliqué sur l'élément {{htmlelement("img")}}} qui nous intéresse, puis j'ai regardé sa taille dans l'onglet Box Model View sur le côté droit de l'écran. Cela devrait vous donner les largeurs intrinsèques d'image dont vous avez besoin.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>Ensuite, vous pouvez vérifier si <code>srcset</code> fonctionne en réglant la largeur de la fenêtre sur ce que vous voulez (par exemple une largeur étroite), en ouvrant Network Inspector (<em>Outils &gt; Développement Web &gt; Réseau</em>), puis en rechargeant la page. Ceci devrait vous donner une liste des ressources téléchargées pour dresser la page web, et ici vous pouvez vérifier quel fichier image a été choisi pour le téléchargement.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Utilisez Mozilla Firefox pour tester <code>srcset</code>. Chrome charge la meilleure image dans le cache de l'explorateur, ce qui empêche de la tester dans les outils de développement.</p>
+</div>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Commutation_de_résolution_même_taille_résolutions_differentes">Commutation de résolution : même taille, résolutions differentes</h3>
+
+<p>Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant <code>srcset</code> avec <code>x-descriptors</code> et sans <code>sizes</code> — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">code source</a>) :</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva habillée en fée"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :</p>
+
+<pre class="brush: css notranslate">img {
+  width: 320px;
+}</pre>
+
+<p>Dans ce cas, <code>sizes</code> n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans <code>srcset</code>. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image <code>elva-fairy-320w.jpg</code> sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image <code>elva‑fairy-640w.jpg</code> sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.</p>
+
+<h3 id="Décision_de_nature_artistique">Décision de nature artistique</h3>
+
+<p>Pour résumer, le problème des <strong>décisions de nature artistique</strong> réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site Web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément {{htmlelement("picture")}} nous permet d'implémenter ce type de solution.</p>
+
+<p>Revenons à notre exemple initial du fichier <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>. Cette image nécessite d'opérer un choix de nature artistique :</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"&gt;</pre>
+
+<p>Arrangeons cela avec {{htmlelement("picture")}}} ! Comme pour <code>&lt;vidéo&gt;</code> et <code>&lt;audio&gt;</code>, l'élément <code>&lt;picture&gt;</code> est une enveloppe conteneur de plusieurs éléments {{htmlelement("source")}}} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément {{htmlelement("img")}}}. Le code dans <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ressemblera à :</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>Les éléments <code>&lt;source&gt;</code> incluent un attribut <code>media</code> qui contient une condition pour le média — comme avec le premier exemple <code>srcset</code>, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie <code>true</code> sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément <code>&lt;source&gt;</code> sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.</li>
+ <li>Les attributs <code>srcset</code> contiennent le chemin vers l'image à afficher. Noter que comme avec <code>&lt;img&gt;</code> plus haut, <code>&lt;source&gt;</code> peut prendre plusieurs attributs <code>srcset</code> référençant plusieurs images, ainsi qu'un attribut <code>sizes</code> également.  Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élement <code>&lt;picture&gt;</code> element, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent.</li>
+ <li>Dans tous les cas, vous devez fournir un élément <code>&lt;img&gt;</code>, avec <code>src</code> et  <code>alt</code>, juste avant <code>&lt;/picture&gt;</code>, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément <code>&lt;source&gt;</code> dans cet exemple), et un repli pour les navigateurs qui ne prennent pas en charge l'élément <code>&lt;picture&gt;</code>.</li>
+</ul>
+
+<p>Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous ne devez utiliser l'attribut <code>media</code> qu'avec un scénario de décision de nature artistique ; quand vous utilisez <code>media</code>, ne mettez pas de conditions pour le média avec l'attribut <code>sizes.</code></p>
+</div>
+
+<h3 id="Pourquoi_ne_peut-on_pas_réaliser_cela_avec_le_CSS_ou_du_JavaScript">Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?</h3>
+
+<p>Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme <code>srcset</code>. Vous ne pourriez pas, par exemple, charger l'élément {{htmlelement("img")}}}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. A ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.</p>
+
+<ul>
+</ul>
+
+<h3 id="Utilisez_largement_les_formats_dimage_modernes">Utilisez largement les formats d'image modernes</h3>
+
+<p>Il existe plusieurs nouveaux formats d'image très interessants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.</p>
+
+<p><code>&lt;picture&gt;</code> nous permet de servir encore les plus vieux explorateurs. Vous pouvez indiquer le type MIME dans les attributs <code>type</code> de façon à ce que l'explorateur puisse immédiatement rejeter les types de fichiers non pris en charge :</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>N'utilisez pas l'attribut <code>media</code>, sauf à devoir prendre une décision de nature artistique.</li>
+ <li>Dans un élément <code>&lt;source&gt;</code>, vous ne pouvez vous référer qu'à des images du type déclaré avec <code>type</code>.</li>
+ <li>Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec <code>srcset</code> et <code>sizes</code>, selon les besoins.</li>
+</ul>
+
+<h2 id="Apprentissage_actif_mise_en_œuvre_de_vos_images_adaptatives">Apprentissage actif : mise en œuvre de vos images adaptatives</h2>
+
+<p>Pour cet apprentissage actif, nous attendons que vous soyiez courageux et que vous y alliez seul.... la plupart du temps. Nous souhaitons que vous preniez une décision artistique en mettant en place vos  propres écrans étroit et large en utilisant &lt;image&gt;, et un exemple de commutation de résolution en utilisant srcset.</p>
+
+<ol>
+ <li>Écrivez un HTML simple contenant votre code (utilisez <code>not-responsive.html</code> comme point de départ si vous voulez)</li>
+ <li>Trouvez une jolie image de paysage de grande largeur avec quelques détails à l'intérieur. Créez une version taille web de cette dernière avec un éditeur graphique, puis découpez en une partie plus petite qui zoome sur un des détails, et créez une deuxième image (une largeur de l'ordre de 480 px conviendra parfaitement).</li>
+ <li>Utilisez l'élément <code>&lt;picture&gt;</code> pour implémenter une bascule d'image en décision artistique !</li>
+ <li>Créez plusieurs fichiers image de tailles différentes, chacun montrant la même image.</li>
+ <li>Utilisez <code>srcset</code>/<code>size</code> pour créer un exemple de commutateur de résolution, soit pour servir une image de même taille avec différentes résolutions, ou diverses tailles d'images avec diverses largeur de vue.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Utilisez les outils de développement du navigateur pour vous aider dans le choix des tailles dont vous avez besoin, comme mentionné plus haut.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :</p>
+
+<ul>
+ <li><strong>les décisions de nature artistique </strong>: cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On resout alors ce problème avec {{htmlelement("picture")}}.</li>
+ <li><strong>la commutation de résolution </strong>: cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On resout ce problème avec l'utilisation de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">graphiques vectoriels</a> (images SVG) ainsi qu'à l'aide des attributs {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}}.</li>
+</ul>
+
+<p>Cet article est aussi la conclusion de l'ensemble du module <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia et intégration</a> ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">L'excellente introduction aux images adaptatives de Jason Grigsby</a></li>
+ <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Images adaptatives : si vous changez juste de résolution, utilisez srcset</a> — comporte plus d'explications sur la façon dont l'explorateur retravaille l'image à utiliser</li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenus audio et video</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De &lt;object&gt; à &lt;iframe&gt; — autres techniques d'intégration</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Ajout de graphiques vectoriels dans le Web</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images adaptatives</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Écran d'accueil Mozilla</a></li>
+</ul>
+</div>
diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
new file mode 100644
index 0000000000..deb09eb186
--- /dev/null
+++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
@@ -0,0 +1,314 @@
+---
+title: Contenu audio et vidéo
+slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
+tags:
+  - Article
+  - Audio
+  - Débutant
+  - Guide
+  - HTML
+  - Légendes
+  - Video
+  - pistes (audio ou texte)
+  - sous‑titres
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Compétences informatiques de base,  <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">installation des outils de base</a>, bases de la <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">manipulation des fichiers</a>, connaissance des fondamentaux du HTML (comme expliqué dans  <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML)</a> et <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Audio_et_vidéo_sur_le_web">Audio et vidéo sur le web</h2>
+
+<p>Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme <a href="https://fr.wikipedia.org/wiki/Adobe_Flash">Flash</a> (puis, plus tard, <a href="https://fr.wikipedia.org/wiki/Silverlight">Silverlight</a>) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.</p>
+
+<p>Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.</p>
+
+<p>Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">fichiers d'échantillons audio et vidéo et exemples de code</a> pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, et <a href="https://vimeo.com/">Vimeo</a>. Pour l'audio, voyez <a href="https://soundcloud.com/">Soundcloud</a>  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.</p>
+</div>
+
+<h3 id="L'_élément_&lt;video>">L' élément &lt;video&gt;</h3>
+
+<p>L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :</p>
+
+<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un &lt;a href="rabbit320.webm"&gt;lien sur la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Les fonctionnalités de ce code sont :</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut <code>src</code> (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'<a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie">épilepsie</a>.) Vous devez vous servir de l'attribut  <code>controls</code> pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLMediaElement">API JavaScript </a>adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.</dd>
+ <dt>Le paragraphe dans la balise <code>&lt;video&gt;</code></dt>
+ <dd>Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <code>&lt;video&gt;</code> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.</dd>
+</dl>
+
+<p>La vidéo intégrée donnerait quelque chose comme ça :</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>Faites un essai avec <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">l'exemple ici</a>. (voyez aussi le <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">code source</a>.)</p>
+
+<h3 id="Gestion_de_différents_formats">Gestion de différents formats</h3>
+
+<p>Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.</p>
+
+<p>Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des <a href="https://fr.wikipedia.org/wiki/Format_conteneur">formats conteneurs</a>. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.</p>
+
+<p>Les pistes audio et vidéo sont aussi de différents formats, par exemple :</p>
+
+<ul>
+ <li>Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.</li>
+ <li>Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.</li>
+ <li>L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.</li>
+</ul>
+
+<p>Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Ce n'est pas si simple, comme vous pouvez le voir dans le <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité des codecs audio-vidéo</a>. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.</p>
+</div>
+
+<p>Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note : </strong>Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats <strong>MP3 </strong>(pour l'audio) et <strong>MP4/H.264</strong> (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.</p>
+
+<p> </p>
+</div>
+
+<p>Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">mis à jour</a>, (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">essayez-le directement ici</a> aussi) :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un &lt;a href="rabbit320.mp4"&gt;lien sur la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Ici, nous avons retiré l'attribut <code>src</code> de la balise &lt;video&gt; et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <code>&lt;source&gt;</code> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.</p>
+
+<p>Chaque élément &lt;source&gt; possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.</p>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note</strong> : L'<a href="/en-US/docs/Web/HTML/Supported_media_formats">article sur les formats média pris en charge</a> contient quelques types {{glossary("MIME type","MIME")}} courants.</p>
+</div>
+
+<h3 id="Autres_fonctionnalités_de_&lt;video>">Autres fonctionnalités de &lt;video&gt;</h3>
+
+<p>Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :</p>
+
+<pre class="brush: html">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un &lt;a href="rabbit320.mp4"&gt;lien à la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Cela produit une sortie du type suivant :</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"></p>
+
+<p>Voici les nouvelles fonctionnalités :</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}</dt>
+ <dd>Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable <strong>rapport de proportions</strong>. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Cet attribut coupe le son de la vidéo par défaut.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :</p>
+
+ <ul>
+  <li><code>"none"</code> : ne pas mettre le fichier dans un tampon</li>
+  <li><code>"auto"</code> : mettre le fichier média dans un tampon</li>
+  <li><code>"metadata"</code> : ne mettre que les métadonnées dans le tampon</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Vous trouverez cet exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">prêt pour l'interprétation</a> sur Github ( voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html"> code source</a>). Notez que nous n'avons pas inséré l'attribut <code>autoplay</code> dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !</p>
+
+<h3 id="L'élément_&lt;audio>">L'élément  &lt;audio&gt;</h3>
+
+<p>L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un &lt;a href="viper.mp3"&gt;lien sur l'audio&lt;/a&gt;.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Vous verrez quelque chose de ce genre dans un navigateur :</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouver <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">lancer la démo de l'audio en direct </a>sur Github (voir aussi le <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">code source de l'interpréteur</a>.)</p>
+</div>
+
+<p>Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :</p>
+
+<ul>
+ <li>L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs <code>width</code>/<code>height</code> — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur.</li>
+ <li>Il ne prend pas en charge non plus l'attribut <code>poster</code> — toujours pas de composant visuel.</li>
+</ul>
+
+<p>Excepté ce qui précéde, <code>&lt;audio&gt;</code> accepte les mêmes fonctionnalités que <code>&lt;video&gt;</code> — revoyez les sections ci-desssus pour plus d'informations à ce propos.</p>
+
+<h2 id="Afficher_du_texte_dans_une_vidéo">Afficher du texte dans une vidéo</h2>
+
+<p>Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :</p>
+
+<ul>
+ <li>De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son.</li>
+ <li>D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger.</li>
+ <li>Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média.</li>
+</ul>
+
+<p>Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.</p>
+</div>
+
+<p>WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :</p>
+
+<dl>
+ <dt>les sous‑titres (<code>subtitles</code>)</dt>
+ <dd>Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.</dd>
+ <dt>les légendes (<code>captions</code>) </dt>
+ <dd>Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.</dd>
+ <dt>les descriptions programmées (<code>descriptions</code>) </dt>
+ <dd>Textes convertis en audio, pour aider les personnes avec des défauts de vision.</dd>
+</dl>
+
+<p>Un fichier WebVTT typique ressemblera à :</p>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+Ceci est le premier sous‑titre.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+Ceci est le deuxième.
+
+  ...</code>
+</pre>
+
+<p>Pour qu'il soit affiché avec la diffusion du média HTML, il faut :</p>
+
+<ol>
+ <li>Enregistrer le fichier avec l'extension <code>.vtt</code> dans un endroit sensé.</li>
+ <li>Lier le fichier <code>.vtt</code> avec l'élément {{htmlelement("track")}}. <code>&lt;track&gt;</code> doit être placé entre les balises <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code>, mais après tous les éléments <code>&lt;source&gt;</code>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  <code>subtitles</code>, <code>captions</code> ou <code>descriptions</code>. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.</li>
+</ol>
+
+<p>Voici un exemple :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>Pour plus de détails, lisez <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous‑titres aux vidéos HTML5</a>. Vous <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trouverez un exemple</a>, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a> aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. </p>
+
+<div class="note">
+<p><strong>Note </strong>: Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.</p>
+</div>
+
+<h3 id="Apprentissage_interactif_intégrer_vos_propres_vidéos_et_audios">Apprentissage interactif : intégrer vos propres vidéos et audios</h3>
+
+<p>Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> et <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Nous aimerions que vous essayiez !</p>
+
+<p>Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">échantillons audio et vidéo </a>pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.</p>
+
+<p>Il vous faudra :</p>
+
+<ol>
+ <li>Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.</li>
+ <li>Créer un nouveau fichier HTML dans le même répertoire nommé :  <code>index.html</code>.</li>
+ <li>Ajouter des éléments  <code>&lt;audio&gt;</code> et  <code>&lt;video&gt;</code> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.</li>
+ <li>Leur attribuer (aux deux) des éléments <code>&lt;source&gt;</code> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  <code>type</code>.</li>
+ <li>Donner à l'élément <code>&lt;video&gt;</code> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.</li>
+</ol>
+
+<p>En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.</p>
+
+<h2 id="Consultez_aussi">Consultez aussi :</h2>
+
+<ul>
+ <li>{{htmlelement("audio")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("track")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video"> Ajouter des légendes et sous-titres aux vidéos HTML5</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Intégration Audio et Vidéo </a>: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipuler l'Audio et la Vidéo</a>: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).</li>
+ <li>Options automatisées pour la <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduction multimédia</a>.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<p> </p>
+
+<h2 id="Contenu_du_module">Contenu du module :</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et vidéo</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web">Ajouter des images vectorielles à une page Web</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Ajouter des images "responsive" à une page Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+
+<p> </p>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html
new file mode 100644
index 0000000000..30815fb4ec
--- /dev/null
+++ b/files/fr/learn/html/tables/advanced/index.html
@@ -0,0 +1,479 @@
+---
+title: 'Tableaux HTML :  dispositions avancées et accessibilité'
+slug: Apprendre/HTML/Tableaux/Advanced
+tags:
+  - Accessibilité
+  - Apprentissage
+  - Article
+  - Avancés
+  - Codage
+  - Débutant
+  - En-têtes
+  - HTML
+  - Imbrication
+  - Portée
+  - Tableaux
+  - caption
+  - resume
+  - tbody
+  - tfoot
+  - thead
+translation_of: Learn/HTML/Tables/Advanced
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+
+<p class="summary">Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les bases de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ajouter_un_titre_aux_tableaux_avec_&lt;caption>">Ajouter un titre aux tableaux avec &lt;caption&gt;</h2>
+
+<p>Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <code>&lt;table&gt;</code>.</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Dinosaures dans le Jurassique&lt;/caption&gt;
+
+  ...
+&lt;/table&gt;</pre>
+
+<p>Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.</p>
+
+<p>Le titre est placé directement sous la balise <code>&lt;table&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <code>&lt;table&gt;</code> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <code>&lt;caption&gt;</code>,  car <code>summary</code> est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTLM5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).</p>
+</div>
+
+<h3 id="Apprentissage_actif_Ajouter_un_titre">Apprentissage actif : Ajouter un titre</h3>
+
+<p>Essayons en revisitant un exemple rencontré dans l'article précédent.</p>
+
+<ol>
+ <li>Ouvrez le planning du professeur de langue de la fin de <a href="/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">Tableaux HTML : notions de base</a> ou faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a>.</li>
+ <li>Ajoutez un titre approprié pour le tableau.</li>
+ <li>Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver notre version sur GitHub — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">voir aussi directement</a>).</p>
+</div>
+
+<h2 id="Ajout_d'une_structure_avec_&lt;thead>_&lt;tfoot>_et_&lt;tbody>">Ajout d'une structure avec &lt;thead&gt;, &lt;tfoot&gt;, et &lt;tbody&gt;</h2>
+
+<p>Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.</p>
+
+<p>Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.</p>
+
+<p>Pour les utiliser :</p>
+
+<ul>
+ <li>L'élément <code>&lt;thead&gt;</code> doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments  {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.</li>
+ <li>L'élément <code>&lt;tfoot&gt;</code> doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément &lt;tfoot&gt;  à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément &lt;thead&gt; (le navigateur l'affichera toujours en pied de tableau).</li>
+ <li>L'élément <code>&lt;tbody&gt;</code>  doit couvrir toutes les parties du tableau non contenues dans un &lt;thead&gt; ou un &lt;tfoot&gt;. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : <code>&lt;tbody&gt;</code> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <code>&lt;tbody&gt;</code> et regardez le code HTML dans les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement de votre navigateur</a> — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.</p>
+</div>
+
+<h3 id="Apprentissage_actif_Ajout_d'une_structure_au_tableau">Apprentissage actif : Ajout d'une structure au tableau</h3>
+
+<p>Mettons en œuvre ces nouveaux éléments.</p>
+
+<ol>
+ <li>D'abord, faites une copie locale des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> dans un nouveau dossier.</li>
+ <li>Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.</li>
+ <li>Mettez la ligne d'en-têtes en évidence avec l'élément <code>&lt;thead&gt;</code> , la ligne des totaux ("SUM") dans un <code>&lt;tfoot&gt;</code>, et le reste du contenu dans un <code>&lt;tbody&gt;</code>.</li>
+ <li>Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <code>&lt;tfoot&gt;</code> a renvoyé la ligne "SUM" en bas du tableau.</li>
+ <li>Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».</li>
+ <li>Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le &lt;head&gt; du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS :
+  <pre class="brush: css">tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+</pre>
+ </li>
+ <li>Enregistrez, actualisez et regardez le résultat. Si <code>&lt;tbody&gt;</code> et <code>&lt;tfoot&gt;</code> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (<a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a> est un bon moyen de commencer ; il y a aussi un article spécifique sur <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">l'esthétique des tables</a>).</p>
+</div>
+
+<p>Le code de votre tableau fini devrait ressembler à quelque chose comme :</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Enregistrer mes dépenses&lt;/title&gt;
+    &lt;style&gt;
+
+        html {
+          font-family: sans-serif;
+        }
+
+          table {
+          border-collapse: collapse;
+          border: 2px solid rgb(200,200,200);
+          letter-spacing: 1px;
+          font-size: 0.8rem;
+        }
+
+        td, th {
+          border: 1px solid rgb(190,190,190);
+          padding: 10px 20px;
+        }
+
+        th {
+          background-color: rgb(235,235,235);
+        }
+
+        td {
+          text-align: center;
+        }
+
+        tr:nth-child(even) td {
+          background-color: rgb(250,250,250);
+        }
+
+        tr:nth-child(odd) td {
+          background-color: rgb(245,245,245);
+        }
+
+        caption {
+          padding: 10px;
+        }
+
+        tbody {
+          font-size: 90%;
+          font-style: italic;
+        }
+
+        tfoot {
+          font-weight: bold;
+        }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;table&gt;
+        &lt;caption&gt;Comment j'ai choisi de dépenser mon argent&lt;/caption&gt;
+        &lt;thead&gt;
+          &lt;tr&gt;
+            &lt;th&gt;Achats&lt;/th&gt;
+            &lt;th&gt;Où ?&lt;/th&gt;
+            &lt;th&gt;Date&lt;/th&gt;
+            &lt;th&gt;Avis&lt;/th&gt;
+            &lt;th&gt;Coût (€)&lt;/th&gt;
+          &lt;/tr&gt;
+        &lt;/thead&gt;
+        &lt;tfoot&gt;
+          &lt;tr&gt;
+            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
+            &lt;td&gt;118&lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tfoot&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Coupe de cheveux&lt;/td&gt;
+            &lt;td&gt;Coiffeur&lt;/td&gt;
+            &lt;td&gt;12/09&lt;/td&gt;
+            &lt;td&gt;Bonne idée&lt;/td&gt;
+            &lt;td&gt;30&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Lasagnes&lt;/td&gt;
+            &lt;td&gt;Restaurant&lt;/td&gt;
+            &lt;td&gt;12/09&lt;/td&gt;
+            &lt;td&gt;Regrets&lt;/td&gt;
+            &lt;td&gt;18&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Souliers&lt;/td&gt;
+            &lt;td&gt;Chaussures&lt;/td&gt;
+            &lt;td&gt;13/09&lt;/td&gt;
+            &lt;td&gt;Gros regrets&lt;/td&gt;
+            &lt;td&gt;65&lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;Dentifrice&lt;/td&gt;
+            &lt;td&gt;Supermarché&lt;/td&gt;
+            &lt;td&gt;13/09&lt;/td&gt;
+            &lt;td&gt;Bien&lt;/td&gt;
+            &lt;td&gt;5&lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+    &lt;/table&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez aussi le trouver sur Github  <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">voir aussi le résultat</a> directement).</p>
+</div>
+
+<h2 id="Tableaux_imbriqués">Tableaux imbriqués</h2>
+
+<p>Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <code>&lt;table&gt;</code>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.</p>
+
+<p>Le balisage suivant montre un tableau simple imbriqué :</p>
+
+<pre class="brush: html">&lt;table id="table1"&gt;
+  &lt;tr&gt;
+    &lt;th&gt;title1&lt;/th&gt;
+    &lt;th&gt;title2&lt;/th&gt;
+    &lt;th&gt;title3&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="nested"&gt;
+      &lt;table id="table2"&gt;
+        &lt;tr&gt;
+          &lt;td&gt;cell1&lt;/td&gt;
+          &lt;td&gt;cell2&lt;/td&gt;
+          &lt;td&gt;cell3&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/table&gt;
+    &lt;/td&gt;
+    &lt;td&gt;cell2&lt;/td&gt;
+    &lt;td&gt;cell3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;cell4&lt;/td&gt;
+    &lt;td&gt;cell5&lt;/td&gt;
+    &lt;td&gt;cell6&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Voici la sortie qui en résulte :</p>
+
+<table id="table1">
+ <tbody>
+  <tr>
+   <th>title1</th>
+   <th>title2</th>
+   <th>title3</th>
+  </tr>
+  <tr>
+   <td id="nested">
+    <table id="table2">
+     <tbody>
+      <tr>
+       <td>cell1</td>
+       <td>cell2</td>
+       <td>cell3</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>cell2</td>
+   <td>cell3</td>
+  </tr>
+  <tr>
+   <td>cell4</td>
+   <td>cell5</td>
+   <td>cell6</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tableaux_pour_utilisateurs_malvoyants">Tableaux pour utilisateurs malvoyants</h2>
+
+<p>Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.</p>
+
+<table>
+ <caption>Articles vendus Août 2016</caption>
+ <tbody>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <th colspan="3" scope="colgroup">Vêtements</th>
+   <th colspan="2" scope="colgroup">Accessoires</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td> </td>
+   <th scope="col">Pantalons</th>
+   <th scope="col">Jupes</th>
+   <th scope="col">Robes</th>
+   <th scope="col">Bracelets</th>
+   <th scope="col">Bagues</th>
+  </tr>
+  <tr>
+   <th rowspan="3" scope="rowgroup">Belgique</th>
+   <th scope="row">Anvers</th>
+   <td>56</td>
+   <td>22</td>
+   <td>43</td>
+   <td>72</td>
+   <td>23</td>
+  </tr>
+  <tr>
+   <th scope="row">Gand</th>
+   <td>46</td>
+   <td>18</td>
+   <td>50</td>
+   <td>61</td>
+   <td>15</td>
+  </tr>
+  <tr>
+   <th scope="row">Bruxelles</th>
+   <td>51</td>
+   <td>27</td>
+   <td>38</td>
+   <td>69</td>
+   <td>28</td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Pays-bas</th>
+   <th scope="row">Amsterdam</th>
+   <td>89</td>
+   <td>34</td>
+   <td>69</td>
+   <td>85</td>
+   <td>38</td>
+  </tr>
+  <tr>
+   <th scope="row">Utrecht</th>
+   <td>80</td>
+   <td>12</td>
+   <td>43</td>
+   <td>36</td>
+   <td>19</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/" title="Vision Impairment Data">données de l'OMS en 2017</a>.</p>
+</div>
+
+<p>Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.</p>
+
+<h3 class="attTitle" id="Utilisation_des_en-têtes_de_colonnes_et_de_lignes">Utilisation des en-têtes de colonnes et de lignes</h3>
+
+<p>Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.</p>
+
+<p>Nous avons déjà traité des en-têtes dans notre article précédent — voir <a href="/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Ajouter des en-têtes avec &lt;th&gt;</a> .</p>
+
+<h3 class="attTitle" id="L'attribut_scope">L'attribut <code>scope</code></h3>
+
+<p>Aux balises <code>&lt;th&gt;</code>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <code>&lt;th&gt;</code> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :</p>
+
+<pre class="brush: html">&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th scope="col"&gt;Achats&lt;/th&gt;
+    &lt;th scope="col"&gt;Ou ?&lt;/th&gt;
+    &lt;th scope="col"&gt;Date&lt;/th&gt;
+    &lt;th scope="col"&gt;Avis&lt;/th&gt;
+    &lt;th scope="col"&gt;Coût (€)&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;</pre>
+
+<p>Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):</p>
+
+<pre class="brush: html">&lt;tr&gt;
+  &lt;th scope="row"&gt;Coupe de cheveux&lt;/th&gt;
+  &lt;td&gt;Coiffeur&lt;/td&gt;
+  &lt;td&gt;12/09&lt;/td&gt;
+  &lt;td&gt;Bonne idée&lt;/td&gt;
+  &lt;td&gt;30&lt;/td&gt;
+&lt;/tr&gt;</pre>
+
+<p>Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.</p>
+
+<p><code>scope</code> a deux autres valeurs possibles — <code>colgroup</code> et <code>rowgroup</code>. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<code>&lt;th&gt;</code>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  <code>scope="colgroup"</code>, alors que les autres doivent recevront un attribut <code>scope="col"</code>.</p>
+
+<h3 class="attTitle" id="Les_attributs_id_et_headers">Les attributs <code>id</code> et <code>headers</code></h3>
+
+<p>Une alternative à l'usage de l'attribut <code>scope</code> est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :</p>
+
+<ol>
+ <li>Vous ajoutez un identifiant unique <code>id</code> à chaque élément <code>&lt;th&gt;</code>.</li>
+ <li>Vous ajoutez un attribut <code>headers</code> à chaque élément  <code>&lt;td&gt;</code> . Chaque attribut <code>headers</code> doit contenir une liste des <code>id</code> de tous les éléments &lt;th&gt; qu'il contient, séparés par des espaces.</li>
+</ol>
+
+<p>Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.</p>
+
+<p>En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :</p>
+
+<pre class="brush: html">&lt;thead&gt;
+  &lt;tr&gt;
+    &lt;th id="purchase"&gt;Achats&lt;/th&gt;
+    &lt;th id="location"&gt;Où ?&lt;/th&gt;
+    &lt;th id="date"&gt;Date&lt;/th&gt;
+    &lt;th id="evaluation"&gt;Avis&lt;/th&gt;
+    &lt;th id="cost"&gt;Coût (€)&lt;/th&gt;
+  &lt;/tr&gt;
+&lt;/thead&gt;
+&lt;tbody&gt;
+&lt;tr&gt;
+  &lt;th id="haircut"&gt;Coupe de cheveux&lt;/th&gt;
+  &lt;td headers="location haircut"&gt;Coiffeur&lt;/td&gt;
+  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
+  &lt;td headers="evaluation haircut"&gt;Bonne idée&lt;/td&gt;
+  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
+&lt;/tr&gt;
+
+  ...
+
+&lt;/tbody&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise <strong>beaucoup</strong> plus de balisage et ne laisse aucune marge d'erreur.  L'approche <code>scope</code> est généralement suffisante pour la plupart des tableaux.</p>
+</div>
+
+<h3 id="Apprentissage_actif_jouer_avec_scope_et_headers">Apprentissage actif : jouer avec <code>scope</code> et <code>headers</code></h3>
+
+<ol>
+ <li>Pour cet exercice final, nous aimerions que vous fassiez une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items‑sold.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, dans un nouveau répertoire.</li>
+ <li>Maintenant essayez d'ajouter un attribut <code>scope</code> approprié pour améliorer ce tableau.</li>
+ <li>Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs <code>id</code> et <code>headers</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">voir aussi directement</a>)<br>
+          et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">voir aussi directement</a>).</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Décor des tableaux</a>.</p>
+
+<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+
+<div>
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Tableaux HTML : notions de base</a></li>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a></li>
+ <li><a class="new" href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data" rel="nofollow">Structuration de données sur les planètes</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html
new file mode 100644
index 0000000000..b218a2b677
--- /dev/null
+++ b/files/fr/learn/html/tables/basics/index.html
@@ -0,0 +1,579 @@
+---
+title: 'Tableaux HTML : notions de base'
+slug: Apprendre/HTML/Tableaux/Basics
+tags:
+  - Apprentissage
+  - Article
+  - Bases
+  - Codage
+  - Débutant
+  - En-têtes
+  - HTML
+  - Tableaux
+  - cellule
+  - col
+  - colgroup
+  - colspan
+  - rangées
+  - rowspan
+translation_of: Learn/HTML/Tables/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<blockquote>
+<dl>
+ <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</dd>
+</dl>
+</blockquote>
+
+<dl>
+</dl>
+
+<table class="learn-box standard-table" style="height: 97px; width: 672px;">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Les bases de HTML (voir <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec les tableaux HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest-ce_quun_tableau">Qu'est-ce qu'un tableau ?</h2>
+
+<p>Un tableau est un ensemble structuré de données (<strong>table de données</strong>) présentées en lignes et colonnes. <span class="translation">Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier</span>.</p>
+
+<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p>
+
+<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p>
+
+<p><span class="translation">Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800</span> :</p>
+
+<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p>
+
+<p><span class="translation">Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web</span> .</p>
+
+<h3 id="Comment_fonctionne_un_tableau">Comment fonctionne un tableau ?</h3>
+
+<p>L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.</p>
+
+<table>
+ <caption>Données sur les planètes du système solaire (repris de <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption>
+ <thead>
+  <tr>
+   <td colspan="2"></td>
+   <th scope="col">Nom</th>
+   <th scope="col">Masse (10<sup>24</sup>kg)</th>
+   <th scope="col">Diamètre (km)</th>
+   <th scope="col">Densité (kg/m<sup>3</sup>)</th>
+   <th scope="col">Gravité (m/s<sup>2</sup>)</th>
+   <th scope="col">Durée du jour (hours)</th>
+   <th scope="col">Distance du Soleil (10<sup>6</sup>km)</th>
+   <th scope="col">Température moyenne (°C)</th>
+   <th scope="col">Nombre de lunes</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="2" rowspan="4" scope="rowgroup">Planètes telluriques</th>
+   <th scope="row">Mercure</th>
+   <td>0.330</td>
+   <td>4,879</td>
+   <td>5427</td>
+   <td>3.7</td>
+   <td>4222.6</td>
+   <td>57.9</td>
+   <td>167</td>
+   <td>0</td>
+   <td>La plus proche du Soleil</td>
+  </tr>
+  <tr>
+   <th scope="row">Venus</th>
+   <td>4.87</td>
+   <td>12,104</td>
+   <td>5243</td>
+   <td>8.9</td>
+   <td>2802.0</td>
+   <td>108.2</td>
+   <td>464</td>
+   <td>0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Terre</th>
+   <td>5.97</td>
+   <td>12,756</td>
+   <td>5514</td>
+   <td>9.8</td>
+   <td>24.0</td>
+   <td>149.6</td>
+   <td>15</td>
+   <td>1</td>
+   <td>Notre monde</td>
+  </tr>
+  <tr>
+   <th scope="row">Mars</th>
+   <td>0.642</td>
+   <td>6,792</td>
+   <td>3933</td>
+   <td>3.7</td>
+   <td>24.7</td>
+   <td>227.9</td>
+   <td>-65</td>
+   <td>2</td>
+   <td>La planète rouge</td>
+  </tr>
+  <tr>
+   <th rowspan="4" scope="rowgroup">Planètes joviennes</th>
+   <th rowspan="2" scope="rowgroup">Géantes gazeuses</th>
+   <th scope="row">Jupiter</th>
+   <td>1898</td>
+   <td>142,984</td>
+   <td>1326</td>
+   <td>23.1</td>
+   <td>9.9</td>
+   <td>778.6</td>
+   <td>-110</td>
+   <td>67</td>
+   <td>La plus grosse planète</td>
+  </tr>
+  <tr>
+   <th scope="row">Saturne</th>
+   <td>568</td>
+   <td>120,536</td>
+   <td>687</td>
+   <td>9.0</td>
+   <td>10.7</td>
+   <td>1433.5</td>
+   <td>-140</td>
+   <td>62</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="rowgroup">Géantes glacées</th>
+   <th scope="row">Uranus</th>
+   <td>86.8</td>
+   <td>51,118</td>
+   <td>1271</td>
+   <td>8.7</td>
+   <td>17.2</td>
+   <td>2872.5</td>
+   <td>-195</td>
+   <td>27</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Neptune</th>
+   <td>102</td>
+   <td>49,528</td>
+   <td>1638</td>
+   <td>11.0</td>
+   <td>16.1</td>
+   <td>4495.1</td>
+   <td>-200</td>
+   <td>14</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="rowgroup">Planètes naines</th>
+   <th scope="row">Pluton</th>
+   <td>0.0146</td>
+   <td>2,370</td>
+   <td>2095</td>
+   <td>0.7</td>
+   <td>153.3</td>
+   <td>5906.4</td>
+   <td>-225</td>
+   <td>5</td>
+   <td>Déclassée en tant que planète en 2006 mais décision controverséee.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="translation">Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.</span></p>
+
+<h3 id="Style_de_tableau">Style de tableau</h3>
+
+<p>Vous pouvez également <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder sur l'exemple réel</a> sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.</p>
+
+<p>Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec <a href="/en-US/docs/Learn/CSS">CSS</a>, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article <a href="/fr/docs/Learn/CSS/Styling_boxes/Styling_tables">Style et tableaux</a> quand vous aurez fini ici.</p>
+
+<p>Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">feuille de style ici</a>, et également <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">un exemple HTML d'application de cette feuille de style là</a> — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.</p>
+
+<h3 id="Quand_NE_PAS_utiliser_de_tableaux_en_HTML">Quand NE PAS utiliser de tableaux en HTML ?</h3>
+
+<p>Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec <a href="/fr/docs/Learn/Accessibility/HTML#Page_layouts">Mises en page</a> dans notre <a href="/fr/docs/Learn/Accessibility">Module d'apprentissage à l'Accessibilité</a>. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.</p>
+
+<p>Bref, utiliser les tableaux pour la mise en page <a href="/fr/docs/Learn/CSS/CSS_layout">au lieu des techniques des CSS</a> est une mauvaise idée. En voici les principales raisons :</p>
+
+<ol>
+ <li><strong>Les tableaux de mise en page diminuent l'accessibilité aux malvoyants </strong>: les <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lecteurs d'écran</a>, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.</li>
+ <li><strong>Les tables produisent de la bouillie :</strong> Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.</li>
+ <li><strong>Les tableaux ne s'adaptent pas automatiquement </strong>: Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.</li>
+</ol>
+
+<h2 id="Apprentissage_actif_créer_votre_premier_tableau">Apprentissage actif : créer votre premier tableau</h2>
+
+<p>Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.</p>
+
+<ol>
+ <li>Avant tout, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire de votre ordinateur.</li>
+ <li>Le contenu de chaque tableau est encadré par ces deux balises : <strong><code><a href="/fr/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Ajoutez‑les dans le corps de votre HTML.</li>
+ <li>Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <strong><code><a href="/fr/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau :
+  <pre class="brush: html notranslate">&lt;td&gt;Bonjour, je suis votre première cellule.&lt;/td&gt;</pre>
+ </li>
+ <li>Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme :
+  <pre class="brush: html notranslate">&lt;td&gt;Bonjour, je suis votre première cellule &lt;/td&gt;
+&lt;td&gt;je suis votre deuxième cellule&lt;/td&gt;
+&lt;td&gt;je suis votre troisième cellule&lt;/td&gt;
+&lt;td&gt;je suis votre quatrième cellule&lt;/td&gt;</pre>
+ </li>
+</ol>
+
+<p>Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <code>&lt;td&gt;</code> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.</p>
+
+<p>Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <strong><code><a href="/fr/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> (« tr » comme « table rangée »). Étudions cela maintenant.</p>
+
+<ol>
+ <li>Placez les quatre cellules que vous avez créées entre deux balises <code>&lt;tr&gt;</code> ainsi :
+
+  <pre class="brush: html notranslate">&lt;tr&gt;
+  &lt;td&gt;Bonjour, je suis votre première cellule &lt;/td&gt;
+  &lt;td&gt;je suis votre deuxième cellule &lt;/td&gt;
+  &lt;td&gt;je suis votre troisième cellule &lt;/td&gt;
+  &lt;td&gt;je suis votre quatrième cellule &lt;/td&gt;
+&lt;/tr&gt;</pre>
+ </li>
+ <li>Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <code>&lt;tr&gt;</code>, et comprend chaque cellule encadrée par <code>&lt;td&gt;</code>.</li>
+</ol>
+
+<p>Il devrait en résulter un tableau qui ressemble à :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Bonjour, je suis votre première cellule.</td>
+   <td>je suis votre deuxième cellule.</td>
+   <td>je suis votre troisième cellule</td>
+   <td>je suis votre quatrième cellule</td>
+  </tr>
+  <tr>
+   <td>Deuxième ligne, première cellule.</td>
+   <td>Cellule 2.</td>
+   <td>Cellule 3.</td>
+   <td>Cellule 4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez également trouver cela sur GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">voir en direct aussi</a>).</p>
+</div>
+
+<h2 id="Ajouter_des_en-têtes_avec_&lt;th>"><a id="Adding_headers_with_%3Cth%3E_elements" name="Adding_headers_with_%3Cth%3E_elements"></a>Ajouter des en-têtes avec &lt;th&gt;</h2>
+
+<p>Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
+    &lt;td&gt;Knocky&lt;/td&gt;
+    &lt;td&gt;Flor&lt;/td&gt;
+    &lt;td&gt;Ella&lt;/td&gt;
+    &lt;td&gt;Juan&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Race&lt;/td&gt;
+    &lt;td&gt;Jack Russell&lt;/td&gt;
+    &lt;td&gt;Poodle&lt;/td&gt;
+    &lt;td&gt;Streetdog&lt;/td&gt;
+    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;16&lt;/td&gt;
+    &lt;td&gt;9&lt;/td&gt;
+    &lt;td&gt;10&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Propriétaire&lt;/td&gt;
+    &lt;td&gt;Belle-mère&lt;/td&gt;
+    &lt;td&gt;Moi&lt;/td&gt;
+    &lt;td&gt;Moi&lt;/td&gt;
+    &lt;td&gt;Belle-soeur&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Habitudes alimentaires&lt;/td&gt;
+    &lt;td&gt;Mange tous les restes&lt;/td&gt;
+    &lt;td&gt;Grignotte la nourriture&lt;/td&gt;
+    &lt;td&gt;Mange copieusement&lt;/td&gt;
+    &lt;td&gt;Mange jusqu'à ce qu'il éclate&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Maintenant, le rendu du tableau réel :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td></td>
+   <td>Knocky</td>
+   <td>Flor</td>
+   <td>Ella</td>
+   <td>Juan</td>
+  </tr>
+  <tr>
+   <td>Race</td>
+   <td>Jack Russell</td>
+   <td>Poodle</td>
+   <td>Streetdog</td>
+   <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+   <td>Age</td>
+   <td>16</td>
+   <td>9</td>
+   <td>10</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Propriétaire</td>
+   <td>Belle-mère</td>
+   <td>Moi</td>
+   <td>Moi</td>
+   <td>Belle-soeur</td>
+  </tr>
+  <tr>
+   <td>Habitudes alimentaires</td>
+   <td>Mange tous les restes</td>
+   <td>Grignotte la nourriture</td>
+   <td>Mange copieusement</td>
+   <td>Mange jusqu'à ce qu'il éclate</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.</p>
+
+<h3 id="Apprentissage_actif_en-tête_de_tableau">Apprentissage actif : en-tête de tableau</h3>
+
+<p>Améliorons ce tableau.</p>
+
+<ol>
+ <li>En premier lieu, faites une copie des fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.</li>
+ <li>Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <code>&lt;td&gt;</code>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <code>&lt;td&gt;</code> des cellules entourant le tableau par des <code>&lt;th&gt;</code>.</li>
+ <li>Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez trouver notre exemple achevé <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">voir en direct aussi</a>).</p>
+</div>
+
+<h3 id="Pourquoi_les_en-têtes_sont-ils_utiles">Pourquoi les en-têtes sont-ils utiles ?</h3>
+
+<p>Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.</p>
+</div>
+
+<p>Les en-têtes de tableau ont un autre avantage — avec l'attribut <code>scope</code> (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.</p>
+
+<h2 id="Étendre_des_cellules_sur_plusieurs_lignes_ou_colonnes">Étendre des cellules sur plusieurs lignes ou colonnes</h2>
+
+<p>Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.</p>
+
+<p>Le code initial ressemble à cela :</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Animaux&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Hippopotame&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Cheval&lt;/th&gt;
+    &lt;td&gt;Jument&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Étalon&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Crocodile&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Poulet&lt;/th&gt;
+    &lt;td&gt;Coq&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Coq&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Mais le résultat ne nous donne pas ce que nous voulions :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Animaux</th>
+  </tr>
+  <tr>
+   <th>Hippopotame</th>
+  </tr>
+  <tr>
+   <th>Cheval</th>
+   <td>Jument</td>
+  </tr>
+  <tr>
+   <td>Étalon</td>
+  </tr>
+  <tr>
+   <th>Crocodile</th>
+  </tr>
+  <tr>
+   <th>Poulet</th>
+   <td>Coq</td>
+  </tr>
+  <tr>
+   <td>Coq</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs <code>colspan</code> et <code>rowspan</code>, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, <code>colspan="2"</code> génère une cellule sur deux colonnes.</p>
+
+<p>Utilisons <code>colspan</code> et <code>rowspan</code> pour améliorer ce tableau.</p>
+
+<ol>
+ <li>Tout d'abord, faites une copie locale de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.</li>
+ <li>Ensuite, utilisez <code>colspan</code> pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.</li>
+ <li>Enfin, utilisez <code>rowspan</code> pour mettre « Cheval » and « Poulet » sur deux lignes.</li>
+ <li>Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez trouver l'exemple achevé dans <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> sur GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">voir en direct aussi</a>).</p>
+</div>
+
+<table id="tabular" style="background-color: white;">
+</table>
+
+<h2 id="Attribuer_un_style_commun_aux_colonnes">Attribuer un style commun aux colonnes</h2>
+
+<p>Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <strong><code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code></strong>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <code>&lt;td&gt;</code> ou <code>&lt;th&gt;</code> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.</p>
+
+<p>Observez l'exemple simple suivant :</p>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th style="background-color: yellow"&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>Ce qui nous donne comme résultat :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Data 1</th>
+   <th style="background-color: yellow;">Data 2</th>
+  </tr>
+  <tr>
+   <td>Calcutta</td>
+   <td style="background-color: yellow;">Orange</td>
+  </tr>
+  <tr>
+   <td>Robots</td>
+   <td style="background-color: yellow;">Jazz</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une <code>classe</code> dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <code>&lt;col&gt;</code>. Les éléments <code>&lt;col&gt;</code> sont utilisés dans un conteneur <code>&lt;colgroup&gt;</code> juste en-dessous de la balise <code>&lt;table&gt;</code>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :</p>
+
+<pre class="brush: html notranslate"> &lt;table&gt;
+   &lt;colgroup&gt;
+    &lt;col&gt;
+    &lt;col style="background-color: yellow"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Data 1&lt;/th&gt;
+    &lt;th&gt;Data 2&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Calcutta&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Robots&lt;/td&gt;
+    &lt;td&gt;Jazz&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <code>&lt;col&gt;</code>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.</p>
+
+<p>Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <code>&lt;col&gt;</code> avec un attribut span, comme ceci :</p>
+
+<pre class="brush: html notranslate">&lt;colgroup&gt;
+  &lt;col style="background-color: yellow" span="2"&gt;
+&lt;/colgroup&gt;</pre>
+
+<p>Comme <code>colspan</code> et <code>rowspan</code>, <code>span</code> reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.</p>
+
+<h3 id="Apprentissage_actif_colgroup_et_col"><a id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col"></a>Apprentissage actif : <code>colgroup</code> et <code>col</code></h3>
+
+<p>Maintenant, il est temps de vous y mettre vous-même.</p>
+
+<p>Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p>
+
+<p>Recréez le tableau en suivant les étapes ci-dessous.</p>
+
+<ol>
+ <li>Tout d'abord, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.</li>
+ <li>Ajoutez un élément <code>&lt;colgroup&gt;</code>  au début du tableau, juste en dessous de la balise <code>&lt;table&gt;</code>,dans lequel vous pouvez ajouter vos éléments <code>&lt;col&gt;</code> (voir les étapes restantes ci-dessous).</li>
+ <li>Les deux premières colonnes doivent rester sans style.</li>
+ <li>Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut <code>style</code> est <code>background-color:#97DB9A;</code></li>
+ <li>Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li>
+ <li>Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut <code>style</code> est <code>background-color: #97DB9A;</code></li>
+ <li>Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut <code>style</code> sont <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
+ <li>Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut <code>style</code> est <code>width: 42px;</code></li>
+</ol>
+
+<p><span lang="fr">Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version </span> <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (à<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html"> voir aussi</a> directement) <span lang="fr">sur GitHub</span> .</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.</p>
+
+<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+
+
+<div>
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases des tableaux en HTML</a></li>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des tableaux en HTML et accessibilité</a></li>
+ <li><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></li>
+</ul>
+</div>
diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html
new file mode 100644
index 0000000000..5dd680eddf
--- /dev/null
+++ b/files/fr/learn/html/tables/index.html
@@ -0,0 +1,43 @@
+---
+title: Les tableaux en HTML
+slug: Apprendre/HTML/Tableaux
+tags:
+  - Article
+  - CodingScripting
+  - Débutant
+  - Guide
+  - HTML
+  - Landing
+  - Module
+  - Tableaux
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de <a href="/en-US/docs/Learn/CSS">CSS</a> pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Ce module contient les articles suivants :</p>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/HTML/Tables/Basics">Bases à propos des Tableaux en HTML</a></dt>
+ <dd>Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.</dd>
+ <dt><a href="/fr/docs/Learn/HTML/Tables/Advanced">Caractéristiques avancées des Tableaux HTML et accessibilité</a></dt>
+ <dd>Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.</dd>
+</dl>
+
+<h2 id="Évaluation_des_connaissances">Évaluation des connaissances</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/HTML/Tables/Structuring_planet_data">Structuration de données sur les planètes</a></dt>
+ <dd>Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.</dd>
+</dl>
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html
new file mode 100644
index 0000000000..7ee33d6adf
--- /dev/null
+++ b/files/fr/learn/html/tables/structuring_planet_data/index.html
@@ -0,0 +1,72 @@
+---
+title: "Revue\_: structurer les données des planètes"
+slug: Apprendre/HTML/Tableaux/Structuring_planet_data
+translation_of: Learn/HTML/Tables/Structuring_planet_data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+
+<p class="summary"><span id="result_box" lang="fr"><span>Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td><span id="result_box" lang="fr"><span>Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.</span></span></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td><span id="result_box" lang="fr"><span>Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p><span id="result_box" lang="fr"><span>Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.</span></span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez aussi utiliser un site comme<a class="external external-icon" href="https://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> dans la page HTML.</p>
+</div>
+
+<h2 id="Résumé_du_projet">Résumé du projet</h2>
+
+<p>Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.</p>
+
+<p>Le tableau terminé devrait ressembler à celui-ci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Vous pouvez aussi <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">regarder l'exemple ici</a> (sans regarder le code source — ne trichez pas !)</p>
+
+<ul>
+</ul>
+
+<h2 id="Étapes_à_suivre">Étapes à suivre</h2>
+
+<p>Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier <code>planets-data.txt</code>. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.</p>
+
+<ol>
+ <li>Ouvrez votre copie de <code>blank-template.html</code>, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.</li>
+ <li>Ajoutez la légende fournie à votre tableau.</li>
+ <li>Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.</li>
+ <li>Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.</li>
+ <li>Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.</li>
+ <li>Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.</li>
+ <li>Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).</li>
+</ol>
+
+<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
+
+<ul>
+ <li>La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes.</li>
+ <li>Les en-têtes regrouppant des lignes (<em>exemple : les planètes joviennes</em>) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple :  <em>Saturne</em>) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.</li>
+ <li>une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre.</li>
+</ul>
+
+<h2 id="Correction">Correction</h2>
+
+<p>Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, ou dans le <a href="irc://irc.mozilla.org/mdn">#mdn</a> canal IRC sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !</p>
+
+<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>