From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- files/fr/learn/html/cheatsheet/index.html | 317 ++++++++++++++------- .../add_a_hit_map_on_top_of_an_image/index.html | 6 +- .../html/howto/define_terms_with_html/index.html | 14 +- files/fr/learn/html/howto/index.html | 93 +++--- .../use_javascript_within_a_webpage/index.html | 8 +- files/fr/learn/html/index.html | 18 +- .../advanced_text_formatting/index.html | 120 ++++---- .../creating_hyperlinks/index.html | 56 ++-- .../introduction_to_html/debugging_html/index.html | 24 +- .../document_and_website_structure/index.html | 36 ++- .../getting_started/index.html | 60 ++-- .../html_text_fundamentals/index.html | 76 ++--- .../fr/learn/html/introduction_to_html/index.html | 4 +- .../marking_up_a_letter/index.html | 4 +- .../structuring_a_page_of_content/index.html | 8 +- .../the_head_metadata_in_html/index.html | 82 +++--- .../adding_vector_graphics_to_the_web/index.html | 17 +- .../images_in_html/index.html | 86 +++--- .../learn/html/multimedia_and_embedding/index.html | 2 +- .../mozilla_splash_page/index.html | 28 +- .../other_embedding_technologies/index.html | 56 ++-- .../responsive_images/index.html | 10 +- .../video_and_audio_content/index.html | 52 ++-- files/fr/learn/html/tables/advanced/index.html | 42 ++- files/fr/learn/html/tables/basics/index.html | 87 +++--- files/fr/learn/html/tables/index.html | 4 +- .../html/tables/structuring_planet_data/index.html | 14 +- 27 files changed, 646 insertions(+), 678 deletions(-) (limited to 'files/fr/learn/html') diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html index a3839113a3..f9fcdc2434 100644 --- a/files/fr/learn/html/cheatsheet/index.html +++ b/files/fr/learn/html/cheatsheet/index.html @@ -14,174 +14,271 @@ original_slug: Apprendre/HTML/Cheatsheet

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. 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.

-

Rappel : 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.

+

Note : 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.

-

Mise en forme inline

+

Éléments en ligne

-

Un élément dit « en ligne » ou inline 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.

+

Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.

- +
- - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - + + + - - - + + + - - - + + + + + + + + + + + + +
UtilisationFragment de codeRésultatUsageÉlémentExemple
Un lien simple<a href="https://developer.mozilla.org">Un lien vers MDN</a>Un lien vers MDNUn lien{{HTMLElement("a")}}
<a href="https://example.org">
+Un lien vers example.org</a>.
+ {{EmbedLiveSample("a-example", 100, 60)}}
Une image simple<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />Une image{{HTMLElement("img")}}
<img src="beast.png" width="25" />
+ {{EmbedLiveSample("img-example", 100, 60)}}
Un texte avec emphase<em>Je suis distingué</em>Je suis distinguéUn conteneur en ligne{{HTMLElement("span")}}
Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
+ {{EmbedLiveSample("span-example", 100, 60)}}
Un texte marqué comme important<strong>Je suis important</strong>Je suis importantEmphase du texte{{HTMLElement("em")}}
<em>La classe non ?</em>.
+ {{EmbedLiveSample("em-example", 100, 60)}}
Un texte mis en avant<mark>Remarquez-moi</mark>Remarquez-moiTexte idiomatique{{HTMLElement("i")}}
+Marque la phrase <i>généralement en italique</i>.
+ {{EmbedLiveSample("i-example", 100, 60)}}
Barrer du texte qui n'est plus pertinent<s>Je ne suis plus d'actualité ou plus pertinent</s>Je ne suis plus d'actualité ou plus pertinentTexte d'attention{{HTMLElement("b")}}
+Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
+ {{EmbedLiveSample("b-example", 100, 60)}}
Souligner pour ajouter une annotation non-textuelleCeci est <u>mal orthographié</u>Ceci est mal orthographiéTexte d'importance{{HTMLElement("strong")}}
<strong>Ce contenu est important !</strong>
+ {{EmbedLiveSample("strong-example", 100, 60)}}
Du texte qui doit être affiché en indiceH<sub>2</sub>OH2OMarquer du texte{{HTMLElement("mark")}}
<mark>Vous me voyez ?</mark>
+ {{EmbedLiveSample("mark-example", 100, 60)}}
Du texte qui doit être affiché en exposantM<sup>me</sup> de BovaryMme de BovaryTexte barré{{HTMLElement("s")}}
<s>Je ne suis plus pertinent.</s>
+ {{EmbedLiveSample("s-example", 100, 60)}}
Une citation dans le cours du texteIl a dit : <q>Je suis ton père.</q>Il a dit : Je suis ton père.Mise en indice{{HTMLElement("sub")}}
H<sub>2</sub>O
+ {{EmbedLiveSample("sub-example", 100, 60)}}
Texte de commentaire{{HTMLElement("small")}}
+Utilisé pour représenter <small>les petites
+notes </small> d'un document.
+{{EmbedLiveSample("small-example", 100, 60)}}
Adresse{{HTMLElement("address")}}
<address>15 Rue du Bourg</address>
+{{EmbedLiveSample("address-example", 100, 60)}}
Citation textuelle{{HTMLElement("cite")}}
Pour plus d'informations sur les monstres,
+voir <cite>Le monstrueux livre des monstres</cite>.
+ {{EmbedLiveSample("cite-example", 100, 60)}}
Mise en exposant{{HTMLElement("sup")}}
x<sup>2</sup>
+ {{EmbedLiveSample("sup-example", 100, 60)}}
Citation en ligne{{HTMLElement("q")}}
+<q>Toi aussi mon fils ?</q>, a-t-il dit.
+{{EmbedLiveSample("q-example", 100, 60)}}
Un saut de ligneLigne 1 <br/> Ligne 2Ligne 1
- Ligne 2		{{HTMLElement("br")}}
Ligne 1<br>Ligne 2
+{{EmbedLiveSample("br-example", 100, 80)}}
Du code informatique (code « machine »)<code>System.print.File("coucou")</code>System.print.File("coucou")Un saut de ligne possible{{HTMLElement("wbr")}}
+<div style="width: 200px">
+  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
+</div>
+{{EmbedLiveSample("wbr-example", 100, 80)}}
Un fichier audio intégré<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio> - - Date{{HTMLElement("time")}}
+Utilisé pour mettre en forme la date. Par exemple :
+<time datetime="2020-05-24" pubdate>
+Publié le 24 mai 2020</time>.
+{{EmbedLiveSample("time-example", 100, 60)}}
Un fichier vidéo intégré<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video> - - Code{{HTMLElement("code")}}
+Ce texte est au format normal,
+mais <code>celui-ci représente du code</code>.
+{{EmbedLiveSample("code-example", 100, 60)}}
Audio{{HTMLElement("audio")}}
+<audio controls="controls">
+  <source="t-rex-roar.mp3" type="audio/mpeg">
+  Votre navigateur ne prend pas en charge audio.
+</audio>
+{{EmbedLiveSample("audio-example", 100, 80)}}
Video{{HTMLElement("video")}}
+<video controls  width="250"
+  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
+  L'élément <code>video</code> n'est pas pris en charge.
+</video>
+{{EmbedLiveSample("video-example", 100, 200)}}
-

Mise en forme block

+

Éléments de bloc

-

Les éléments de bloc (block 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.

+

Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.

- +
- - - + + + - - - + + - - - + + + - - - + + + - - - + + + - - - + + + + + + + + + + + + + + + + + -
UtilisationFragment de codeRésultatUsageÉlémentExemple
Un paragraphe simple -

<p>Je suis un paragraphe</p>
- <p>Je suis un autre paragraphe</p>

- 		-

Je suis un paragraphe

- -

Je suis un autre paragraphe

+ 		Un paragraphe{{HTMLElement("p")}}
+<p>Je suis un paragraphe</p>
+<p>Et un autre paragraph</p>
+{{EmbedLiveSample("p-example", 100, 150)}}
Une liste non-ordonnée<ul>
-   <li>Je suis un élément</li>
-   <li>Je suis un autre élément</li>
- <ul>		 -
    -
  • Je suis un élément
    • -
  • Je suis un autre élément
    • -
- 		Une citation étendue{{HTMLElement("blockquote")}}
Ils sont alors dit :
+<blockquote>L'élément blockquote indique une citation étendue.</blockquote>
+{{EmbedLiveSample("blockquote-example", 100, 100)}} +
Une liste ordonnée<ol>
-   <li>Je suis le premier élément</li>
-   <li>Je suis le deuxième élément</li>
- <ol>		 -
    -
  1. Je suis le premier élément
    2. -
  2. Je suis le deuxième élément
    3. -
- 		Information supplémentaire{{HTMLElement("details")}}
+<details>
+  <summary>Anti-sèche HTML</summary>
+  <p>Éléments en ligne</p>
+  <p>Éléments de bloc</p>
+</details>
+{{EmbedLiveSample("details-example", 100, 150)}} +
Une ligne horizontale<hr/> -
Une liste non-ordonnée{{HTMLElement("ul")}}
+<ul>

+  <li>Je suis un élément de liste</li>

+  <li>Et moi un autre</li>

+</ul>
+{{EmbedLiveSample("ul-example", 100, 100)}} +
Des titres de différents niveaux (du plus important au moins important) -

<h2>Un titre de niveau 2</h2>
- <h3>Un titre de niveau 3</h3>
- <h4>Un titre de niveau 4</h4>
- <h5>Un titre de niveau 5</h5>

- 		-

Un titre de niveau 2

- -

Un titre de niveau 3

- -

Un titre de niveau 4

- -
Un titre de niveau 5
+ 		Une liste ordonnée{{HTMLElement("ol")}}
+<ol>

+  <li>Je suis le premier élément</li>

+  <li>Et moi le deuxième</li>

+</ol>
+{{EmbedLiveSample("ol-example", 100, 100)}} +
Une liste de définitions{{HTMLElement("dl")}}
+<dl>
+  <dt>Un terme</dt>

+  <dd>La définition du terme</dd>
+  <dt>Un autre terme</dt>
+  <dd>La définition d'un autre terme</dd>
+</dl>
+{{EmbedLiveSample("dl-example", 100, 150)}}
Un séparateur horizontal{{HTMLElement("hr")}}
+avant<hr>après
+{{EmbedLiveSample("hr-example", 100, 100)}} +
Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
+<h1> Titre de niveau 1 </h1>
+<h2> Titre de niveau 2 </h2>
+<h3> Titre de niveau 3 </h3>
+<h4> Titre de niveau 4 </h4>
+<h5> Titre de niveau 5 </h5>
+<h6> Titre de niveau 6 </h6>
+{{EmbedLiveSample("h1-h6-example", 100, 350)}} +
+ \ No newline at end of file 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 index 5d6e826597..2bd7ccebb6 100644 --- 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 @@ -9,11 +9,9 @@ tags: translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image --- -

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

-
- +
@@ -27,7 +25,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image
Prérequis :
-

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.

+

Attention : 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.

Les cartes imagées cliquables et leurs inconvénients

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 index ba6015387c..c4a834b1a4 100644 --- a/files/fr/learn/html/howto/define_terms_with_html/index.html +++ b/files/fr/learn/html/howto/define_terms_with_html/index.html @@ -9,15 +9,13 @@ tags: translation_of: Learn/HTML/Howto/Define_terms_with_HTML original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML --- -

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.

-
- +
- + @@ -33,8 +31,6 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
Bleu (adjectif)
La couleur du ciel lors d'un temps clair.
Le ciel est bleu.
-
Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.
- Un steak bleu s'il vous plaît.
@@ -69,7 +65,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML </p>
-

La spécification HTML met en avant l'attribut title 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 title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

+

Note : La spécification HTML met en avant l'attribut title 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 title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

Améliorer l'accessibilité

@@ -91,7 +87,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML

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.).

-

Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

+

Note : Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

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")}}.

@@ -123,7 +119,7 @@ original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML
-

La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). 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.

+

Note : La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). 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.

Améliorer l'aspect visuel

diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html index 62b8556ca8..e5f130e8ca 100644 --- a/files/fr/learn/html/howto/index.html +++ b/files/fr/learn/html/howto/index.html @@ -13,16 +13,14 @@ original_slug: Apprendre/HTML/Comment

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 :

-
-

Structure de base

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

Sémantique de base pour le texte

@@ -30,35 +28,32 @@ original_slug: Apprendre/HTML/Comment

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.

-
- -

Les hyperliens

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

Images et multimédia

Script et mise en forme

@@ -66,25 +61,21 @@ original_slug: Apprendre/HTML/Comment

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")}}.

Intégrer du contenu

-
-

Problèmes avancés ou rares

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 :

-
-

Les formulaires

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 le guide dédié aux formulaires. Vous pouvez commencer ici :

@@ -99,42 +90,40 @@ original_slug: Apprendre/HTML/Comment

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 :

La représentation de données

Interactivité

-
-

Sémantique avancée pour les éléments textuels

Images et multimédia avancés

L'internationalisation

@@ -142,9 +131,7 @@ original_slug: Apprendre/HTML/Comment

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.

-
-
+
  • Comment ajouter plusieurs langages sur une seule page web
    • +
  • Comment gérer les caractères japonais (ruby)
    • +
  • Comment afficher des heures et des dates avec HTML
    • + \ No newline at end of file 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 index c920171729..e57980829e 100644 --- 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 @@ -9,11 +9,9 @@ tags: translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web --- -

    Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

    -
    -
    Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.Vous devez au préalable savoir comment créer un document HTML simple.
    Objectifs :
    +
    @@ -31,7 +29,7 @@ original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web

    {{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.

    -

    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 les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

    +

    Note : 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 les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

    Comment déclencher le code JavaScript depuis le document HTML

    @@ -67,7 +65,7 @@ window.addEventListener('load', function () {

    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é :

    Prérequis :
    +
    @@ -34,11 +34,11 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting
    Prérequis :
    -

    Listes descriptives

    +

    Listes descriptives

    -

    Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. 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 :

    +

    Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. 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 :

    -
    soliloque
+
    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.
@@ -47,7 +47,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen
 
 
    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")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :
    
 
-
    <dl>
+
    <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>
@@ -69,11 +69,13 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen
 
 
    Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :
    
 
-
    
- 
    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.
    
- 
    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é).
    
-
    
+
    +<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>
+
    
 
 
    Apprentissage interactif : balisez une série de définitions
    
 
@@ -81,10 +83,7 @@ Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquemen
 
 
    Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}
    
 
 
    Citations
    
 
@@ -219,38 +217,38 @@ textarea.onkeyup = function(){
 
 
    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 <blockquote> :
    
 
-
    <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
+
    <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>
    
 
+
    Exemple de bloc de citation
    
 
    Pour le changer en bloc de citation, on ferait simplement ceci :
    
 
-
    <blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
+
    <blockquote cite="/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>
    
 
 
    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é :
    
-
-
    
-
    L'Élément HTML <blockquote> (ou Élément HTML bloc de citation) indique que le bloc de texte inclus est une citation étendue.
    
-
    
+
    {{EmbedLiveSample("Blocs_de_citation")}}
    
 
 
    Citations en ligne
    
 
 
    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 <q> :
    
 
-
    <p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
+
    Exemple de citation en ligne
    
+
+
    <p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
 pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
    
 
 
    Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :
    
 
-
    L'élément citation — <q> — est prévu pour de courtes citations ne nécessitant pas un nouvel alinéa.
    
+
    {{EmbedLiveSample("Exemple_de_citation_en_ligne")}}
    
 
 
    Citations
    
 
 
    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 cite 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 <cite> à la source de la citation d'une manière ou d'une autre :
    
 
-
    <p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
+
    <p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
 <cite>page blockquote du MDN</cite></a>:
 </p>
 
@@ -285,10 +283,7 @@ pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</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 Voir la solution pour obtenir la réponse.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}
    
 
 
    Abréviations
    
 
 
    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>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</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>
    
 
@@ -425,17 +419,14 @@ textarea.onkeyup = function(){
 
    Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.
    
 
 
    
-
    Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, 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 <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.
    
+
    Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, 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 <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.
    
 
    
 
 
    Apprentissage actif : marquer une abréviation
    
 
 
    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.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}
    
 
 
    Balisage des détails de contact
    
 
 
    HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :
    
 
-
    <address>
+
    <address>
   <p>Chris Mills, Manchester, The Grim North, UK</p>
 </address>
    
 
 
    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 n'importe quelle 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 :
    
 
-
    <address>
+
    <address>
   <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
 </address>
    
 
@@ -571,7 +561,7 @@ textarea.onkeyup = function(){
 
 
    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>Ma date de naissance est le 1<sup>er</sup> mai 2001.</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>
    
 
@@ -581,7 +571,7 @@ textarea.onkeyup = function(){
 
 
    La formule chimique de la caféine est C8H10N4O2.
    
 
-
    Si x2 égale 9, x doit valoir 3 ou -3.
    
+
    Si x^2 égale 9, x doit valoir 3 ou -3.
    
 
 
    Représentation du code informatique
    
 
@@ -597,10 +587,10 @@ textarea.onkeyup = function(){
 
 
    Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :
    
 
-
    <pre><code>var para = document.querySelector('p');
+
    <pre><code>var para = document.querySelector('p');
 
 para.onclick = function() {
-  alert('Owww, arrête de me toucher !');
+  alert('Owww, arrête de me toucher !');
 }</code></pre>
 
 <p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
@@ -623,7 +613,7 @@ para.onclick = function() {
 
 
    HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :
    
 
-
    <time datetime="2016-01-20">20 janvier 2016</time>
    
+
    <time datetime="2016-01-20">20 janvier 2016</time>
    
 
 
    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 :
    
 
@@ -634,31 +624,31 @@ para.onclick = function() {
  
  • 20/01/16
    • 
  
  • 01/20/16
    • 
  
  • Le 20 du mois prochain
    • 
- 
  • 20e Janvier 2016
    • 
- 
  • 2016年1月20日
    • 
- 
  • etc.
    • 
+ 
  • 20e Janvier 2016
    • 
+ 
  • 2016年1月20日
    • 
+ 
  • etc.
    • 
 
 
 
    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.
    
 
 
    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 :
    
 
-
    <!-- Simple date standard -->
-<time datetime="2016-01-20">20 janvier 2016</time>
+
    <!-- Simple date standard -->
+<time datetime="2016-01-20">20 janvier 2016</time>
 <!-- Juste l'année et le mois -->
-<time datetime="2016-01">janvier 2016</time>
+<time datetime="2016-01">janvier 2016</time>
 <!-- Juste le mois et les jour -->
-<time datetime="01-20">20 janvier</time>
+<time datetime="01-20">20 janvier</time>
 <!-- Juste l'heure, heure et minutes -->
-<time datetime="19:30">19h30</time>
+<time datetime="19:30">19h30</time>
 <!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
-<time datetime="19:30:01.856">19h30m1,856s</time>
+<time datetime="19:30:01.856">19h30m1,856s</time>
 <!-- Date et heure -->
-<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
+<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
 <!-- Date et heure avec décalage de fuseau horaire -->
-<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
+<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
 <!-- Appel d'un numéro de semains donné -->
-<time datetime="2016-W04">La 4e semaine de 2016</time>
    
+<time datetime="2016-W04">La 4e semaine de 2016</time>
    
 
 
    Résumé
    
 
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
index 95ce137c9b..abaeb6d167 100644
--- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
    {{LearnSidebar}}
    
 {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
    
 
-
    Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.
    
+
    Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.
    
 
-
+
    
@@ -39,30 +39,30 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
    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 une toile — 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")}}).
    
-
    Note : 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).
    
+
    Note : 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).
    
 
    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.
    
 
-
    frontpage of bbc.co.uk, showing many news items, and navigation menu functionality
    
+
    frontpage of bbc.co.uk, showing many news items, and navigation menu functionality
    Anatomie d'un lien
    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 Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.
    
 
-
    <p>Je suis en train de créer un lien à
+
    <p>Je suis en train de créer un lien à
 <a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
 </p>
    
 
 
    qui donne le résultat suivant :
    
 
-
    Je suis en train de créer un lien à  la page d'accueil de Mozilla.
    
+
    Je suis en train de créer un lien à  la page d'accueil de Mozilla.
    
 
 
    Ajouter des informations d'assistance avec l'attribut title
    
 
 
    L'autre attribut qu'il est possible d'ajouter à un lien est title ; 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>Je suis en train de créer un lien à
+
    <p>Je suis en train de créer un lien à
 <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">la page d'accueil Mozilla</a>.
@@ -70,10 +70,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
 
    Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :
    
 
-
    Je suis en train de créer un lien vers la page d'accueil de Mozilla
    
+
    Je suis en train de créer un lien vers la page d'accueil de Mozilla
    
 
 
    
-
    Note : le title 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 title. Si une information de title 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.
    
+
    Note : le title 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 title. Si une information de title 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.
    
 
    
 
 
    Apprentissage actif : création de votre propre exemple de lien
    
@@ -90,12 +90,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
 
    Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des éléments bloc . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.
    
 
-
    <a href="https://www.mozilla.org/fr/">
+
    <a href="https://www.mozilla.org/fr/">
   <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
 </a>
    
 
 
    
-
    Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.
    
+
    Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.
    
 
    
 
 
    Une brève présentation des URL et des chemins
    
@@ -106,7 +106,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
 
 
    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 creating-hyperlinks).
    
 
-
    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.
    
+
    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.
    
 
 
    La racine de cette structure de répertoires s'appelle creating-hyperlinks. 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 index.html et un contacts.html. Sur un site réel, index.html 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).
    
 
@@ -116,38 +116,38 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks
  
  • 
   
    Dans un même dossier : si vous voulez inclure un hyperlien dans index.html (celui de plus haut niveau) pointant vers contacts.html, 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 contacts.html :
    
 
-  
    <p>Voulez‑vous rencontrer un membre du personnel en particulier ?
+  
    <p>Voulez‑vous rencontrer un membre du personnel en particulier ?
 Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p>
    
  
    • 
  
  • 
   
    Descendre dans les sous-répertoires : si vous désirez inclure un hyperlien dans index.html (celui de plus haut niveau) pointant vers projects/index.html, vous avez besoin de descendre dans le dossierprojects 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 projects/index.html :
    
 
-  
    <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p>
    
+  
    <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p>
    
  
    • 
  
  • 
   
    Monter dans les dossiers parents : si vous voulez inclure un hyperlien dans projects/index.html qui pointe vers pdfs/projects-brief.pdf, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier pdfs. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — .. —, de sorte que l'URL à utiliser sera ../pdfs/project‑brief.pdf :
    
 
-  
    <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p>
    
+  
    <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p>
    
  
    • 
 
 
 
    
-
    Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.
    
+
    Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.
    
 
    
 
 
    Fragments de documents
    
 
 
    Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), 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 :
    
 
-
    <h2 id="Adresse_mailing">Adresse de mailing</h2>
    
+
    <h2 id="Adresse_mailing">Adresse de mailing</h2>
    
 
 
    Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :
    
 
-
    <p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
    
+
    <p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
    
 
 
    Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :
    
 
-
    <p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
    
+
    <p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
    
 
 
    URL absolue vs. URL relative
    
 
@@ -184,13 +184,13 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a&
 
 
    Bon texte de lien: Télécharger Firefox
    
 
-
    <p><a href="https://firefox.com/">
+
    <p><a href="https://firefox.com/">
   Télécharger Firefox
 </a></p>
    
 
 
    Mauvais texte de lien : Cliquer ici pour télécharger Firefox
    
 
-
    <p><a href="https://firefox.com/">
+
    <p><a href="https://firefox.com/">
   Cliquer ici
 </a>
 pour télécharger Firefox</p>
@@ -225,7 +225,7 @@ pour télécharger Firefox</p>
 
 
    Voici quelques exemples suggérant les genres de texte pouvant être employé :
    
 
-
    <p><a href="http://www.exemple.com/rapport-volumineux.pdf">
+
    <p><a href="http://www.exemple.com/rapport-volumineux.pdf">
   Télécharger le rapport des ventes (PDF, 10Mo)
 </a></p>
 
@@ -241,10 +241,10 @@ pour télécharger Firefox</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 download 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 :
    
 
-
    <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
+
    <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
    download="firefox-latest-64bit-installer.exe">
   Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
-</a>
    
+</a>
    
 
 
    Apprentissage actif : création d'un menu de navigation
    
 
@@ -270,10 +270,10 @@ pour télécharger Firefox</p>
 
 
    L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :
    
 
-
    Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.
    
+
    Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.
    
 
 
    
-
    Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.
    
+
    Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.
    
 
    
 
 
    Liens de courriel
    
@@ -282,7 +282,7 @@ pour télécharger Firefox</p>
 
 
    Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :
    
 
-
    <a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
+
    <a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
 
    
 
 
    Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.
    
@@ -295,7 +295,7 @@ pour télécharger Firefox</p>
 
 
    Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :
    
 
-
    <a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
+
    <a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
   Envoyer un mail avec copie, copie cachée, sujet et corps de message
 </a>
    
 
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
index 34d758d938..ed0cfa6a2b 100644
--- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html
+++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html
@@ -17,9 +17,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 
    {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
    
 
-
    É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.
    
+
    É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.
    
 
-
    
  
   
    
    Prérequis :
 
 
 
 
 
 
 
 
    
+
    
@@ -36,7 +36,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 
    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.
    
 
-
    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 ».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 println!(Salut, Ô Monde!"); 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.
    
+
    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 ».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 println!(Salut, Ô Monde!"); 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.
    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.
    
 
@@ -60,7 +60,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
    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 !
    
-
    Note : 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.
    
+
    Note : 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.
    
 
    Apprentissage actif : étude avec un code permissif
    
@@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
 
 
      
  
    1. Primo, télécharchez notre démo debug-example 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 malformé, par opposition à bien-formé).
      2. 
- 
    2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :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. 
      3. 
+ 
    3. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :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. 
      4. 
  
    4. 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 body est affiché) :
   
          <h1>Exemple de HTML à déboguer</h1>
 
@@ -100,7 +100,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML
   
  
      5. 
  
    5. 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 Découverte des outils de développement du navigateur.
      6. 
- 
    6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
      7. 
+ 
    7. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
      8. 
  
    8. 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 devraient donner le même résultat) :
   
        
    
      • Les éléments p et li ont été pourvus de balises fermantes.
        • 
@@ -127,9 +127,9 @@ en HTML. Voici un exemple :</strong>
 
 
        La meilleure stratégie consiste à faire passer votre page HTML par le Markup Validation Service (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.
        
 
-
        La page d'accueil du validateur HTML
        
+
        La page d'accueil du validateur HTML
        
 
-
        Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).
        
+
        Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).
        
 
 
        Apprentissage actif : validation d'un document HTML
        
 
@@ -144,7 +144,7 @@ en HTML. Voici un exemple :</strong>
 
 
        Cela vous donnera une liste d'erreurs et autres informations.
        
 
-
        La liste des résultats de la validation de HTML par le service de validation du W3C.
        
+
        La liste des résultats de la validation de HTML par le service de validation du W3C.
        
 
 
        Interprétation des messages d'erreur
        
 
@@ -159,7 +159,7 @@ en HTML. Voici un exemple :</strong>
   
        exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html>
        
 
   
        
-  
        Note : 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.
        
+  
        Note : 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.
        
   
        
  
  
      • « Unclosed element ul » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} est correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.
        • 
@@ -167,9 +167,9 @@ en HTML. Voici un exemple :</strong>
 
 
        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.
        
 
-
        Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : 
        
+
        Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : 
        
 
-
        Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."
        
+
        Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."
        
 
 
        Résumé
        
 
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
index 37fcd02cc2..2ffb0e3cdf 100644
--- 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
@@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
 {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
        
  
 
-
        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.
        
+
        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.
        
 
-
    
  
   
    
    Prérequis :
 
 
 
 
 
 
    
+
    
@@ -56,7 +56,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
  Un « site web typique » pourrait ressembler à quelque chose comme ceci :
 
-
    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.
    
+
    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.
    HTML pour structurer un contenu
    
 
@@ -65,7 +65,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
 
    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 » ?
    
-
    Note : Les daltoniens représentent environ 8% de la population mondiale 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 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).
    
+
    Note : Les daltoniens représentent environ 8% de la population mondiale 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 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).
    
 
    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 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.
    
@@ -174,7 +174,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur
 
      
  
    • {{HTMLElement('main')}} est relatif au contenu unique de la page. N'utilisez <main> 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.
      • 
  
    • {{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.)
      • 
- 
    • {{HTMLElement('section')}} ressemble à <article>, 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 heading ; notez également que vous pouvez fractionner un <article> en plusieurs <section> ou bien des <section> en divers <article>, selon le contexte.
      • 
+ 
    • {{HTMLElement('section')}} ressemble à <article>, 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 heading ; notez également que vous pouvez fractionner un <article> en plusieurs <section> ou bien des <section> en divers <article>, selon le contexte.
      • 
  
    • {{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).
      • 
  
    • {{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 titles et headings).
      • 
  
    • {{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.
      • 
@@ -212,7 +212,7 @@ alors qu'il titubait en travers de la porte <span class="editor-note">
 
      Ce n'est pas vraiment un élément <aside> 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 <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.
      
 
 
      
-
      Avertissement : les div 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.
      
+
      Attention : les div 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.
      
 
      
 
 
      Sauts de ligne et traits horizontaux
      
@@ -226,7 +226,7 @@ Qui aimait écrire du HTML<br>
 Mais ses structures et sémantiques affligeantes<br>
 rendaient de ses marquages la lecture inélégante.</p>
 
-
      Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :
      
+
      Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :
      
 
 
      Il y avait une fois une fille nommée Nell
      
  Qui aimait écrire du HTML
      
@@ -235,27 +235,25 @@ rendaient de ses marquages la lecture inélégante.</p>
 
 
      Les éléments <hr> 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 :
      
 
+
      Exemple avec hr
      
+
 
      <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>
      
 
 
      sera rendu ainsi :
      
-
-
      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.
      
-
-
      
-
      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.
      
+
      {{EmbedLiveSample("Exemple_avec_hr")}}
      
 
 
      Planification d'un site web simple
      
 
 
      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 !
      
 
 
        
- 
      1. 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. 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é.
        2. 
- 
      2. 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. 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.
        3. 
- 
      3. 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. 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.
        4. 
- 
      4. 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")}}.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.
        5. 
- 
      5. 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. 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.
        6. 
+ 
      6. 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. 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é.
        7. 
+ 
      7. 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. 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.
        8. 
+ 
      8. 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. 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.
        9. 
+ 
      9. 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")}}.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.
        10. 
+ 
      10. 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. 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.
        11. 
 
      
 
 
      Apprentissage actif : créez la cartographie de votre propre site
      
@@ -263,7 +261,7 @@ rendaient de ses marquages la lecture inélégante.</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 ?
      
 
 
      
-
      Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.
      
+
      Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.
      
 
      
 
 
      Résumé
      
@@ -273,7 +271,7 @@ rendaient de ses marquages la lecture inélégante.</p>
 
      Voir aussi
      
 
 
 
 
      {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
      
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
index 5636377789..dce8e89b0e 100644
--- a/files/fr/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html
@@ -18,9 +18,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
 
 
      {{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
      
 
-
      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.
      
+
      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.
      
 
-
    
  
   
    
    Prérequis :
 
 
 
 
 
 
 
    
+
    
@@ -44,14 +44,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
 
    <p>Mon chat est très grincheux</p>
    
-
    Note : 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 <title>, <TITLE>, <Title>, <TiTlE>, 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.
    
+
    Note : 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 <title>, <TITLE>, <Title>, <TiTlE>, 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.
    
 
    Anatomie d'un élément HTML
    Regardons notre élément paragraphe d'un peu plus près :
    
 
-
    
+
    Les principales parties de notre élément sont :
    
 
@@ -68,10 +68,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started
 
 
    Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}
    Eléments imbriqués
    
 
@@ -223,15 +219,15 @@ textarea.onkeyup = function(){
 
    {{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}
    
-
    Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. 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.
    
+
    Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. 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.
    
 
    
-
     Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS 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.
    
+
    Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS 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.
    
 
    
-
    Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.
    
+
    Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.
    
 
    Éléments vides
    
@@ -248,7 +244,7 @@ textarea.onkeyup = function(){
 
 
    Les éléments peuvent aussi avoir des attributs, qui comme suit:
    
 
-
    &amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>
    
+
    &amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/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 class 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 style CSS ou un comportement particulier, par exemple.
    
 
@@ -274,10 +270,7 @@ textarea.onkeyup = function(){
 
 
    Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}
    Les attributs booléens
    
 
@@ -488,12 +480,12 @@ textarea.onkeyup = function(){
 
    
-
    Note: Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.
    
+
    Note : Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.
    
 
    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:
    
 
-
    Une simple page HTML affichant Voici ma pageDans 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 <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :
    
+
    Une simple page HTML affichant Voici ma pageDans 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 <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :
      
  
    • Au début du document, juste après la balise d'ouverture <body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante <h1> et la balise fermante </ h1> ;
      • 
@@ -505,10 +497,7 @@ textarea.onkeyup = function(){
 
 
      Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.
      
 
-
 
-
      {{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}
      
+
      {{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}
      
 
 
      Espace vide en HTML
      
 
@@ -689,7 +677,7 @@ textarea.onkeyup = function(){
 
      {{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}
      
 
 
      
-
      Note: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.
      
+
      Note : Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.
      
 
      
 
 
      Commentaires en HTML
      
@@ -711,7 +699,7 @@ textarea.onkeyup = function(){
 
      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 !
      
 
 
      
-
      Note: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. 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.
      
+
      Note : À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. 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.
      
 
      
 
 
      Voir aussi
      
diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
index b0755184e9..213a383e88 100644
--- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
+++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -19,9 +19,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
      {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
      
 
-
      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.
      
+
      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.
      
 
-
    
  
   
    
    Prérequis :
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
+
    
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
    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.
    
 
-
    An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.
    
+
    An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.
    Le contenu structuré facilite la lecture et la rend plus agréable.
    
 
@@ -90,7 +90,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
    Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !
    
 
-
    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.
    
+
    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.
    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 :
    
 
@@ -109,10 +109,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals
 
 
    Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code', 700, 370) }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}
    Pourquoi a-t-on besoin de sémantique ?
    
 
@@ -282,11 +278,7 @@ houmous
 
 
    Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code_2', 700, 400) }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}
    Listes ordonnées
    
 
@@ -430,11 +421,7 @@ Roulez sur 300 mètres, l'école est sur votre droite
    Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code_3', 700, 500) }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}
    Apprentissage actif : mettre des balises pour une recette de cuisine
    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 text-start.html 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.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code_4', 700, 500) }}
    
+
    {{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}
    Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.
    
 
@@ -775,14 +757,11 @@ function insertAtCaret(text) {
 
    <p>Ce liquide est <strong>hautement toxique</strong> —
 si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
    
 
-
    Apprentissage actif : soulignez l'important !
    
+
    Apprentissage actif : soulignez l'important
    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.
    
 
-
 
-
    {{ EmbedLiveSample('Playable_code_5', 700, 500) }}
    
+
    {{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}
    Italique, gras, soulignement…
    
 
@@ -916,12 +894,12 @@ textarea.onkeyup = function(){
 
 
      
  
    • {{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…
      • 
- 
    • {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…
      • 
+ 
    • {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…
      • 
  
    • {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...
      • 
 
    
-
    Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> 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.
    
+
    Note : Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> 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.
    
 
    <!-- noms scientifiques -->
diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html
index fdd62cd744..d4a5b51dbd 100644
--- a/files/fr/learn/html/introduction_to_html/index.html
+++ b/files/fr/learn/html/introduction_to_html/index.html
@@ -16,14 +16,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML
 ---
 
    {{LearnSidebar}}
    
 
-
    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.
    
+
    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.
    
 
 
    Prérequis
    
 
 
    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 cet article et comprendre comment créer et gérer des fichiers tel qu'expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s'adresse aux débutants.
    
 
 
    
-
    Note : 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 JSBin ou Thimble.
    
+
    Note : 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 JSBin ou Thimble.
    
 
    
 
 
    Guides
    
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
index 748b35d142..faa34e068d 100644
--- 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
@@ -16,9 +16,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter
 
 
    {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
    
 
-
    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 <head> en HTML.
    
+
    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 <head> en HTML.
    
 
-
    
  
   
    
    Pré-requis:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
+
    
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
index e3ce2ceabc..0fa7c74921 100644
--- 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
@@ -7,9 +7,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
 
    {{LearnSidebar}}
    
 {{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
    
 
-
    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.
    
+
    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.
    
 
-
    
  
   
    
    Prérequis :
    
+
    
@@ -61,7 +61,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
  
  • appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.
    • 
 
-
    Conseils et astuces
    
+
    Conseils et astuces
      
  
    • Utilisez le « W3C HTML validator » 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).
      • 
@@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content
 
 
      La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.
      
 
-
      L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.
      
+
      L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.
      
 
 
      Évaluation
      
 
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
index 8bb80d773c..af254c337d 100644
--- 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
@@ -8,9 +8,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
      {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
      
 
-
      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.
      
+
      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.
      
 
-
    
  
   
    
    Prérequis :
 
 
 
    
+
    
@@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
    Qu'est-ce que l'en-tête de HTML ?
    
 
-
    Revoyons le document HTML de base de l' article précédent:
    
+
    Revoyons le document HTML de base de l' article précédent:
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -40,12 +40,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
    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 <head> 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 :
    
 
-
    <head>
+
    <head>
   <meta charset="utf-8">
   <title>Ma page test</title>
 </head>
    
 
-
    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 outils de développement 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 <head>, 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.
    
+
    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 outils de développement 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 <head>, 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.
    
 
 
    Ajouter un titre
    
 
@@ -67,7 +67,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
   
  
  
  • Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça :
-  
    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !
    
+  
    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !
    
  
    • 
  
  • 
   
    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.
    
@@ -76,7 +76,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
    Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.
    
 
-
    Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.
    
+
    Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.
    
 
 
    Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.
    
 
@@ -88,27 +88,27 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
    Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :
    
 
-
    <meta charset="utf-8">
    
+
    <meta charset="utf-8">
    
 
 
    Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8  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 :
    
 
-
    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.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :
    
+
    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.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :
    
 
-
    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.
    
+
    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.
    
 
 
    
-
    Note : 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 utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.
    
+
    Note : 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 utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.
    
 
    
 
 
    Apprentissage actif : expérience avec l'encodage des caractères
    
 
-
    Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page  title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :
    
+
    Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page  title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :
    
 
-
    <p>Japanese example: ご飯が熱い。</p>
    
+
    <p>Japanese example: ご飯が熱い。</p>
    
 
 
    Ajouter le nom de l'auteur et une description
    
 
-
    De nombreux éléments <meta> icontiennent les attributs name et content :
    
+
    De nombreux éléments <meta> icontiennent les attributs name et content :
    
 
 
      
  
    • name définit le type de méta élément ; le type d'informations contenu.
      • 
@@ -117,10 +117,10 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML
 
 
      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 :
      
 
-
      <meta name="author" content="Chris Mills">
-<meta name="description" content="La Zone Apprentissage des documents web
-du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
-savoir pour commencer le développement de pages webs et d'applications.">
      
+
      <meta name="author" content="Chris Mills">
+<meta name="description" content="La Zone Apprentissage des documents web
+du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
+savoir pour commencer le développement de pages webs et d'applications.">
      
 
 
      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.
      
 
@@ -134,24 +134,24 @@ savoir pour commencer le développement de pages webs et d'applicationsAllez sur la page d'accueil de Mozilla Developer Network.
  
    • Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
      • 
  
    • Trouvez la balise méta description. Elle ressemble à ceci :
-  
      <meta name="description" content="MDN Web Docs fournit
+  
      <meta name="description" content="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.">
      
+ outils de développement de Firefox.">
      
  
      • 
  
    • Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine !
-  
      Une page de recherche Google pour "MDN web docs"
      
+  
      Une page de recherche Google pour "MDN web docs"
      
  
      • 
 
 
 
      
-
      Note : 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 Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.
      
+
      Note : 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 Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.
      
 
      
 
 
      
-
      Note: Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — 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.
      
+
      Note : Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — 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.
      
 
      
 
 
      Autres types de métadonnées
      
@@ -160,23 +160,23 @@ savoir pour commencer le développement de pages webs et d'applicationsPar exemple, Open Graph Data 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 :
      
 
-
      <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
-<meta property="og:description" content="MDN Web Docs fournit des
+
      <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
+<meta property="og:description" content="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.">
+Mozilla tels que les outils de développement de Firefox.">
 <meta property="og:title" content="Mozilla Developer Network">
      
 
 
      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.
      
 
-
      Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.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:
      
+
      Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.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:
      
 
-
      <meta name="twitter:title" content="Mozilla Developer Network">
      
+
      <meta name="twitter:title" content="Mozilla Developer Network">
      
 
 
      Ajouter des icônes personnalisées à un site
      
 
-
      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.
      
+
      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.
      
 
 
      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.
      
 
@@ -185,17 +185,17 @@ Mozilla tels que les outils de développement de Firefox.">      
 
        
  
      1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)
        2. 
  
      2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer :
-  
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        
+  
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        
  
        3. 
 
      
 
 
      Voici un exemple de favicône dans un panneau de favoris :
      
 
-
      Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.
      
+
      Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.
      
 
 
      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 :
      
 
-
      <!-- troisième-génération iPad avec haute-résolution Retina display: -->
+
      <!-- troisième-génération iPad avec haute-résolution Retina display: -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
 <!-- iPhone avec haute-résolution Retina display: -->
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
@@ -218,15 +218,15 @@ Mozilla tels que les outils de développement de Firefox.">
  
    • 
   
      L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, rel="stylesheet" indiquant qu'il s'agit de la feuille de style du document, et href indiquant le chemin d'accès au fichier la contenant :
      
 
-  
      <link rel="stylesheet" href="mon_fichier_css.css">
      
+  
      <link rel="stylesheet" href="mon_fichier_css.css">
      
  
      • 
  
    • 
   
      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 </body>), 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).
      
 
-  
      <script src="mon-fichier-js.js"></script>
      
+  
      <script src="mon-fichier-js.js"></script>
      
 
   
      
-  
      Note : L'élément <script> 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 <script>.
      
+  
      Note : L'élément <script> 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 <script>.
      
   
      
  
      • 
 
    
@@ -241,7 +241,7 @@ Mozilla tels que les outils de développement de Firefox.">
 
 
    Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :
    
 
-
    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.
    
+
    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.
    
 
 
      
  
    • 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.
      • 
@@ -249,20 +249,20 @@ Mozilla tels que les outils de développement de Firefox.">
 
    
 
 
    
-
    Note : 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 css-and-js.html .
    
+
    Note : 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 css-and-js.html .
    
 
    
 
 
    Définition de la langue principale du document
    
 
-
    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'attribut lang à la balise ouvrante HTML (voir meta-example.html.)
    
+
    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'attribut lang à la balise ouvrante HTML (voir meta-example.html.)
    
 
-
    <html lang="fr">
    
+
    <html lang="fr">
    
 
 
    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.)
    
 
 
    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>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
    
+
    <p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
    
 
 
    Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).
    
 
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
index 5c2520b633..e8cddd0909 100644
--- 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
@@ -14,13 +14,9 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
    {{LearnSidebar}}
    
  {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
    
 
-
     
    
-
-
    
 
    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.
    
-
    
 
-
    • 
  
   
    
    Prérequis:
    
+
    
@@ -35,7 +31,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
 
    Qu'est-ce que SVG ? Qu'apporte-t-il ?
    
 
-
    SVG 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.
    
+
    SVG 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.
    
 
 
    Certaines images (appelées images « matricielles ») 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é.
    
 
@@ -46,7 +42,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
    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 Inkscape. 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.
    
 
 
    
-
    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 cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.
    
+
    Note : 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 cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.
    
 
    
 
 
    La méthode rapide : {{htmlelement("img")}}
    
@@ -80,12 +76,13 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_pag
 
 
 
    
+  
    Note :
    
 
      
  
    • 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 <img>).
 
-  
      background: url("image-de-secours.png");
-background-image: url(image.svg);
-background-size: contain;
      
+  
      background: url("image-de-secours.png");
+background-image: url(image.svg);
+background-size: contain;
      
  
      • 
  
    • Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, cet article pourra vous aider à résoudre le problème.
      • 
 
    
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
index 762a36442a..abda8ddf31 100644
--- 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
@@ -19,13 +19,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    {{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
    
 
-
    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")}} .
    
+
    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")}} .
    
 
-
    
  
   
    
    Prérequis :
    
+
    
-   
+   
@@ -39,7 +39,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
    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 — src (souvent appelé par son nom entier:  source). L'attribut src 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")}}  href= attribue des valeurs.
    
 
 
    
-
    Note: Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.
    
+
    Note : Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.
    
 
    
 
 
    Donc, par exemple, si votre image s'appelle dinosaur.jpg, 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) :
    
@@ -53,7 +53,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
    Ainsi de suite.
    
 
 
    
-
    Note: 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. dinosaur.jpg est infiniment mieux que img835.png.
    
+
    Note : 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. dinosaur.jpg est infiniment mieux que img835.png.
    
 
    
 
 
    Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :
    
@@ -63,7 +63,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
    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.
    
 
 
    
-
    Attention ! : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
    
+
    Attention : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
    
  
    
  1) Ce soit votre image (vous en êtes le créateur),
    
  2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
    
@@ -74,14 +74,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    Le code au-dessus vous donnera, à peu prés, le résultat suivant :
    
 
-
    A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it
    
+
    A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it
    
 
 
    
-
    Note: 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.
    
+
    Note : 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.
    
 
    
 
 
    
-
    Note: Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)
    
+
    Note : Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)
    
 
    
 
 
    Texte alternatif
    
@@ -94,7 +94,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :
    
 
-
    The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.
    
+
    The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.
    
 
 
    Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :
    
 
@@ -111,14 +111,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
      
  
    • Decoration. Vous devriez utiliser  {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un alt="" vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.
      • 
  
    • Contenu. Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un bref  alt text –  ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de  alt 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  alt="".
      • 
- 
    • Lien. 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 Lien texte accessible . Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <a>, soit dans l'attribut  alt de l'image – utilisez ce qui marche le mieux dans votre cas.
      • 
- 
    • Texte. Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  utilisez CSS  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  alt .
      • 
+ 
    • Lien. 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 Lien texte accessible . Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <a>, soit dans l'attribut  alt de l'image – utilisez ce qui marche le mieux dans votre cas.
      • 
+ 
    • Texte. Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  utilisez CSS  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  alt .
      • 
 
    
 
 
    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.
    
 
 
    
-
    Note: Pour plus d'informations, voyez notre guide  Textes Alternatifs
    
+
    Note : Pour plus d'informations, voyez notre guide  Textes Alternatifs
    
 
    
 
 
    Largeur et hauteur (width-height)
    
@@ -133,19 +133,19 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    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 :
    
 
-
    The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings
    
+
    The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings
    
 
 
    C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.
    
 
 
    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  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.
    
 
 
    
-
    Note: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .
    
+
    Note : Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .
    
 
    
 
 
    Titre d'images
    
 
-
    Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
    
+
    Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
    
 
 
    <img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
@@ -156,7 +156,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    Cela donne une info-bulle avec le texte entré dans l'attribut title :
    
 
-
    The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum 
    
+
    The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum 
    
 
 
    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.
    
 
@@ -178,12 +178,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML
 
 
    Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :
    
 
-
-
-
    {{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}
    
 
 
 
@@ -340,7 +328,7 @@ textarea.onkeyup = function(){
 
    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")}}.
    
 
 
    
-
    Note: 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 alt 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.
    
+
    Note : 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 alt 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.
    
 
    
 
 
    Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :
    
@@ -364,10 +352,7 @@ textarea.onkeyup = function(){
 
 
    Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :
    
 
-
-
-
    {{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}
    
 
 
    Images d'arrière-plan CSS
    
 
@@ -505,7 +485,7 @@ textarea.onkeyup = function(){
 
    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.
    
 
 
    
-
    Note: Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .
    
+
    Note : Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .
    
 
    
 
 
    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.
    
@@ -515,10 +495,10 @@ textarea.onkeyup = function(){
 
    Dans ce module :
    
 
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html
index 86eb86cd9f..445c2724fe 100644
--- a/files/fr/learn/html/multimedia_and_embedding/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/index.html
@@ -29,7 +29,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding
 
    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 : introduction au HTML. 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.
    
 
 
    
-
    Note : 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 JSBin ou Thimble.
    
+
    Note : 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 JSBin ou Thimble.
    
 
    
 
 
    Guides
    
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
index bf2054f890..37cd4e8230 100644
--- 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
@@ -8,13 +8,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 
    {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
    
 
-
    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 !
    
+
    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 !
    
 
-
    
  
   
    
    Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
   
    
   
    
    Objectifs :
    
+
    
-   
+   
@@ -30,7 +30,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
    Allez dans le répertoire originals 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.
    
 
 
    
-
    Note: 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.
    
+
    Note : 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.
    
 
    
 
 
    Énoncé du projet
    
@@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
    Puis, créez une version paysage de 1200px de large de red-panda.jpg, 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'index.html.
    
 
 
    
-
    Note: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.
    
+
    Note : Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.
    
 
    
 
 
    Ajouter un logo à l'en-tête
    
@@ -74,7 +74,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
    Assurez-vous de faire correspondre les bonnes images avec les liens corrects !
    
 
 
    
-
    Note: Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages 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 Responsive images: useful developer tools.
    
+
    Note : Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages 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 Responsive images: useful developer tools.
    
 
    
 
 
    Un panda rouge créatif
    
@@ -85,9 +85,9 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
 
    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.
    
 
-
    A wide shot of our example splash page
    
+
    A wide shot of our example splash page
    
 
-
    A narrow shot of our example splash page
    
+
    A narrow shot of our example splash page
    
 
 
    Évaluation
    
 
@@ -100,12 +100,12 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page
 
    Dans ce module :
    
 
 
 
 
     
    
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
index a35a7d6131..c840ee2f9e 100644
--- 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
@@ -21,13 +21,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 
 
    {{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")}}
    
 
-
    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  <iframe> 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.
    
+
    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  <iframe> 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.
    
 
-
    
  
   
    
    Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
   
    
   
    
    Objectif:
    
+
    
-   
+   
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 
 
     
    
 
-
    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 applets Java et Flash — 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.
    
+
    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 applets Java et Flash — 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.
    
 
 
    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.
    
 
@@ -73,10 +73,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog
 
 
    Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.
    
 
-
-
-
    {{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}
    
 
 
    Iframes en détail
    
 
@@ -212,7 +206,7 @@ textarea.onkeyup = function(){
 
 
    
  
    {{htmlattrxref('allowfullscreen','iframe')}}
    
- 
    Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
    
+ 
    Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
    
  
    {{htmlattrxref('frameborder','iframe')}}
    
  
    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')}}: none; dans le {{Glossary('CSS')}}.
    
  
    {{htmlattrxref('src','iframe')}}
    
@@ -226,7 +220,7 @@ textarea.onkeyup = function(){
 
    
 
 
    
-
    Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe 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).
    
+
    Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe 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).
    
 
    
 
 
    Problèmes de sécurité
    
@@ -236,10 +230,10 @@ textarea.onkeyup = function(){
 
    Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> 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 <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.
    
 
 
    
-
    Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> 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.
    
+
    Note : Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> 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.
    
 
    
 
-
    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 trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . 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 <iframe> (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.
    
+
    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 trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . 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 <iframe> (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.
    
 
 
    N'intégrer que si nécessaire
    
 
@@ -263,7 +257,7 @@ textarea.onkeyup = function(){
 
    L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt 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, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (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 <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.
    
 
 
    
-
    Note: Github pages 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.
    
+
    Note : Github pages 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.
    
 
    
 
 
    Toujours utiliser l'attribut  sandbox
    
@@ -275,15 +269,15 @@ textarea.onkeyup = function(){
 
    Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — 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 jamais mettre à la fois les valeurs allow-scripts et allow-same-origin 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 ».
    
 
 
    
-
    Note : 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 <iframe>). 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")}}.
    
+
    Note : 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 <iframe>). 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")}}.
    
 
    
 
 
    Configurer  les directives CSP
    
 
-
    {{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (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 <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. 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.
    
+
    {{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (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 <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. 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.
    
 
 
    
-
    Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.
    
+
    Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.
    
 
    
 
 
    Les éléments <embed> et <object>
    
@@ -291,7 +285,7 @@ textarea.onkeyup = function(){
 
    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 !
    
 
 
    
-
    Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.
    
+
    Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.
    
 
    
 
 
    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.
    
@@ -342,7 +336,7 @@ textarea.onkeyup = function(){
 
     
    
 
 
    
-
    Note : <object> requiert un attribut data, un attribut type, 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). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  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).
    
+
    Note : <object> requiert un attribut data, un attribut type, 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). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  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).
    
 
    
 
 
    Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):
    
@@ -375,7 +369,7 @@ textarea.onkeyup = function(){
  
  • Restez à l'écart des risques supplémentaires en matière de sécurité. Adobe Flash est notoirement non‑sûr, même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même demandé qu'Adobe arrête Flash.
    • 
 
 
-
    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 vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années 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.
    
+
    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 vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années 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.
    
 
 
    Résumé
    
 
@@ -392,12 +386,12 @@ textarea.onkeyup = function(){
 
    Dans ce module
    
 
 
 
 
     
    
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
index 4ee6bee321..29f0d234da 100644
--- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
+++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -54,7 +54,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
    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).
    
 
 
    
-  
    Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).
    
+  
    Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).
    
 
    
 
 
    Comment créer des images adaptatives ?
    
@@ -97,7 +97,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
 
 
    
-
    Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) 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). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.
    
+
    Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) 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). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.
    
 
    
 
 
    Ainsi, une fois ces attributs en place, le navigateur va :
    
@@ -112,14 +112,14 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
    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 (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. 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 personnes naviguant sur mobile d'économiser beaucoup de bande passante.
    
 
 
    
-  
    Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.
    
+  
    Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.
    
   
    Pour observer les images chargées, vous pouvez utiliser l'onglet Moniteur réseau dans les outils de développement de Firefox.
    
 
    
 
 
    Les navigateurs 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 src.
    
 
 
    
-
    Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles 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).
    
+
    Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles 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).
    
 
    
 
 
@@ -169,7 +169,7 @@ original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page
 
    Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.
    
 
 
    
-
    Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.
    
+
    Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.
    
 
    
 
 
    Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?
    
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
index 4854d24907..75e2a70ecd 100644
--- 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
@@ -18,13 +18,13 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
    {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
    
 
-
    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.
    
+
    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.
    
 
-
    
  
   
    
    Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
   
    
   
    
    Objectif :
    
+
    
-   
+   
@@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
    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 fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.
    
 
 
    
-
    Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  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.
    
+
    Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  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.
    
 
    
 
 
    L' élément <video>
    
@@ -59,14 +59,14 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
  
    {{htmlattrxref("src","video")}}
    
  
    De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
    
  
    {{htmlattrxref("controls","video")}}
    
- 
    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'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript 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.
    
+ 
    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'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript 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.
    
  
    Le paragraphe dans la balise <video>
    
  
    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 <video> , 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.
    
 
 
 
    La vidéo intégrée donnerait quelque chose comme ça :
    
 
-
    A simple video player showing a video of a small white rabbit
    
+
    A simple video player showing a video of a small white rabbit
    
 
 
    Faites un essai avec l'exemple ici. (voyez aussi le code source.)
    
 
@@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
    Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.
    
 
 
    
-
    Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. 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.
    
+
    Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. 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.
    
 
    
 
 
    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.
    
@@ -95,7 +95,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
     
    
 
 
    
-
    Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (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.
    
+
    Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (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.
    
 
 
     
    
 
    
@@ -115,7 +115,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
     
    
 
 
    
-
    Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.
    
+
    Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.
    
 
    
 
 
    Autres fonctionnalités de <video>
    
@@ -133,7 +133,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
    Cela produit une sortie du type suivant :
    
 
-
    A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!
    
+
    A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!
    
 
 
    Voici les nouvelles fonctionnalités :
    
 
@@ -174,10 +174,10 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
    Vous verrez quelque chose de ce genre dans un navigateur :
    
 
-
    A simple audio player with a play button, timer, volume control, and progress bar
    
+
    A simple audio player with a play button, timer, volume control, and progress bar
    
 
 
    
-
    Note: Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)
    
+
    Note : Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)
    
 
    
 
 
    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 :
    
@@ -202,7 +202,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
    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")}}.
    
 
 
    
-
    Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.
    
+
    Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.
    
 
    
 
 
    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 :
    
@@ -218,7 +218,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video
 
 
    Un fichier WebVTT typique ressemblera à :
    
 
-
    WEBVTT
+
    WEBVTT
 
 1
 00:00:22.230 --> 00:00:24.606
@@ -248,12 +248,12 @@ Ceci est le deuxième.
 
 
    Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :
    
 
-
    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."
    
+
    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."
    
 
-
    Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source 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. 
    
+
    Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source 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. 
    
 
 
    
-
    Note : 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.
    
+
    Note : 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.
    
 
    
 
 
    Apprentissage interactif : intégrer vos propres vidéos et audios
    
@@ -285,9 +285,9 @@ Ceci est le deuxième.
  
  • {{htmlelement("video")}}
    • 
  
  • {{htmlelement("source")}}
    • 
  
  • {{htmlelement("track")}}
    • 
- 
  •  Ajouter des légendes et sous-titres aux vidéos HTML5
    • 
- 
  • Intégration Audio et Vidéo : de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.
    • 
- 
  • Manipuler l'Audio et la Vidéo: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).
    • 
+ 
  •  Ajouter des légendes et sous-titres aux vidéos HTML5
    • 
+ 
  • Intégration Audio et Vidéo : de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.
    • 
+ 
  • Manipuler l'Audio et la Vidéo: de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).
    • 
  
  • Options automatisées pour la traduction multimédia.
    • 
 
 
@@ -298,12 +298,12 @@ Ceci est le deuxième.
 
    Contenu du module :
    
 
 
 
 
     
    
diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html
index 11669b25e7..7a6f46a012 100644
--- a/files/fr/learn/html/tables/advanced/index.html
+++ b/files/fr/learn/html/tables/advanced/index.html
@@ -25,9 +25,9 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
 
    {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
    
 
-
    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.
    
+
    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.
    
 
-
    
  
   
    
    Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
   
    
   
    
    Objectifs :
    
+
    
@@ -55,7 +55,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
    Le titre est placé directement sous la balise <table>.
    
 
 
    
-
    Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> 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 <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).
    
+
    Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> 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 <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).
    
 
    
 
 
    Apprentissage actif : Ajouter un titre
    
@@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
 
 
    
-
    Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).
    
+
    Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).
    
 
    
 
 
    Ajout d'une structure avec <thead>, <tfoot>, et <tbody>
    
@@ -87,7 +87,7 @@ original_slug: Apprendre/HTML/Tableaux/Advanced
 
 
 
    
-
    Note : <tbody> 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 <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — 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.
    
+
    Note : <tbody> 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 <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — 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.
    
 
    
 
 
    Apprentissage actif : Ajout d'une structure au tableau
    
@@ -115,15 +115,12 @@ tfoot {
 
 
 
    
-
    Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).
    
+
    Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).
    
 
    
 
 
    Le code de votre tableau fini devrait ressembler à quelque chose comme :
    
 
-
 
-
    {{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
    
+
    {{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}
    
 
 
    
-
    Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).
    
+
    Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).
    
 
    
 
 
    Tableaux imbriqués
    
@@ -270,7 +266,7 @@ tfoot {
 
 
    Voici la sortie qui en résulte :
    
 
-
    
  
   
    
    Prérequis :
    
+
    
@@ -278,8 +274,8 @@ tfoot {
    
-   
    
  
   
    
    title1title3
   
    
   
    
-    
+   
    
+    
@@ -370,18 +366,18 @@ tfoot {
 
    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.
    
-
    Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.
    
+
    Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.
    
 
    Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.
    
 
-
    Utilisation des en-têtes de colonnes et de lignes
    
+
    Utilisation des en-têtes de colonnes et de lignes
    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.
    Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .
    
 
-
    L'attribut scope
    
+
    L'attribut scope
    Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> 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 :
    
 
@@ -409,7 +405,7 @@ tfoot {
 
 
    scope a deux autres valeurs possibles — colgroup et rowgroup. 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 (<th>), 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  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".
    
 
-
    Les attributs id et headers
    
+
    Les attributs id et headers
    Une alternative à l'usage de l'attribut scope 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 :
    
 
@@ -445,7 +441,7 @@ tfoot {
 </tbody>
    
-
    Note: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.
    
+
    Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.
    
 
    Apprentissage actif : jouer avec scope et headers
    
@@ -457,7 +453,7 @@ tfoot {
 
    
-
    Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
    
+
    Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
    
           et items-sold-headers.html (voir aussi directement).
    
 
    
 
@@ -474,7 +470,7 @@ tfoot {
 
diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html
index b4e3cf6667..fe9ef9ef91 100644
--- a/files/fr/learn/html/tables/basics/index.html
+++ b/files/fr/learn/html/tables/basics/index.html
@@ -23,20 +23,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
    {{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
    
 
-
    
-
    
- 
    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.
    
-
    
-
    
+
    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.
    
 
-
    
-
    
-
-
    
      
       
    
        cell1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
+
    
-   
+   
@@ -47,17 +40,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
    Qu'est-ce qu'un tableau ?
    
 
-
    Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. 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.
    
+
    Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. 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.
    
 
-
    A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.
    
+
    A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.
    
 
-
    A swimming timetable showing a sample data table
    
+
    A swimming timetable showing a sample data table
    
 
-
    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 :
    
+
    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 :
    
 
-
    A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
    
+
    A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.
    
 
-
    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 .
    
+
    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 .
    Comment fonctionne un tableau ?
    
 
@@ -197,13 +190,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
  
    
  
   
    
    Prérequis :Les bases de HTML (voir Introduction au HTML).Les bases de HTML (voir Introduction au HTML).
   
    
   
    
    Objectif :
 
 
    
 
    
 
-
    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.
    
+
    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.
    
 
 
    Style de tableau
    
 
 
    Vous pouvez également regarder sur l'exemple réel 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.
    
 
-
    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 CSS, 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 Style et tableaux quand vous aurez fini ici.
    
+
    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 CSS, 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 Style et tableaux quand vous aurez fini ici.
    
 
 
    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 feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.
    
 
@@ -227,10 +220,10 @@ original_slug: Apprendre/HTML/Tableaux/Basics
  
  • Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    • 
  
  • Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    • 
  
  • Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau :
-  
    <td>Bonjour, je suis votre première cellule.</td>
    
+  
    <td>Bonjour, je suis votre première cellule.</td>
    
  
    • 
  
  • 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 :
-  
    <td>Bonjour, je suis votre première cellule </td>
+  
    <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>
    
@@ -244,7 +237,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
      
  
    1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi :
 
-  
      <tr>
+  
      <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>
@@ -274,14 +267,14 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
    • 
 
 
    
-
    Note: Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).
    
+
    Note : Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).
    
 
    
 
-
    Ajouter des en-têtes avec <th>
    
+
    Ajouter des en-têtes avec <th>
    
 
 
    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 :
    
 
-
    <table>
+
    <table>
   <tr>
     <td>&nbsp;</td>
     <td>Knocky</td>
@@ -369,12 +362,12 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
      
  
    1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
      2. 
- 
    2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
      3. 
+ 
    3. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
      4. 
  
    4. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
      5. 
 
    
 
 
    
-
    Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).
    
+
    Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).
    
 
    
 
 
    Pourquoi les en-têtes sont-ils utiles ?
    
@@ -382,7 +375,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
    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.
    
 
 
    
-
    Note : 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.
    
+
    Note : 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.
    
 
    
 
 
    Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (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.
    
@@ -393,7 +386,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
    Le code initial ressemble à cela :
    
 
-
    <table>
+
    <table>
   <tr>
     <th>Animaux</th>
   </tr>
@@ -461,19 +454,17 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
 
    
-
    Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).
    
+
    Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).
    
 
    
 
-
-
    
-
 
    Attribuer un style commun aux colonnes
    
 
-
    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 <col> and <colgroup>. 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  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.
    
+
    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 <col> and <colgroup>. 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  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.
    
 
+
    Premier exemple
    
 
    Observez l'exemple simple suivant :
    
 
-
    <table>
+
    <table>
   <tr>
     <th>Data 1</th>
     <th style="background-color: yellow">Data 2</th>
@@ -489,27 +480,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 </table>
    
 
 
    Ce qui nous donne comme résultat :
    
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
    Data 1Data 2
    CalcuttaOrange
    RobotsJazz
    
+
    {{EmbedLiveSample("Premier_exemple")}}
    
 
 
    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 classe 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 <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :
    
 
-
     <table>
+
    Autres exemples
    
+
+
     <table>
    <colgroup>
     <col>
     <col style="background-color: yellow">
@@ -532,13 +509,13 @@ original_slug: Apprendre/HTML/Tableaux/Basics
 
 
    Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :
    
 
-
    <colgroup>
+
    <colgroup>
   <col style="background-color: yellow" span="2">
 </colgroup>
    
 
 
    Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.
    
 
-
    Apprentissage actif : colgroup et col
    
+
    Apprentissage actif : colgroup et col
    
 
 
    Maintenant, il est temps de vous y mettre vous-même.
    
 
@@ -559,7 +536,7 @@ original_slug: Apprendre/HTML/Tableaux/Basics
  
  • Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    • 
 
 
-
    Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version  timetable-fixed.html (à voir aussi directement) sur GitHub .
    
+
    Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version  timetable-fixed.html (à voir aussi directement) sur GitHub .
    
 
 
    Résumé
    
 
diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html
index 1344ec014c..e29779b351 100644
--- a/files/fr/learn/html/tables/index.html
+++ b/files/fr/learn/html/tables/index.html
@@ -15,14 +15,14 @@ original_slug: Apprendre/HTML/Tableaux
 ---
 
    {{LearnSidebar}}
    
 
-
    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 CSS 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.
    
+
    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 CSS 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.
    
 
 
    Prérequis
    
 
 
    Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.
    
 
 
    
-
    Note : 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 JSBin ou Thimble.
    
+
    Note : 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 JSBin ou Thimble.
    
 
    
 
 
    Guides
    
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html
index 9732baa868..303bf2fdf9 100644
--- a/files/fr/learn/html/tables/structuring_planet_data/index.html
+++ b/files/fr/learn/html/tables/structuring_planet_data/index.html
@@ -8,27 +8,27 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data
 
 
    {{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
    
 
-
    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.
    
+
    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.
    
 
-
+
    
-   
+   
-   
+   
    
  
   
    
    Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
   
    
   
    
    Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
   
    
      
 
    
 
 
    Point de départ
    
 
-
    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.
    
+
    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.
    
 
 
    
-
    Note: Vous pouvez aussi utiliser un site commeJSBin ou Thimble 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 <script>/<style> dans la page HTML.
    
+
    Note : Vous pouvez aussi utiliser un site commeJSBin ou Thimble 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 <script>/<style> dans la page HTML.
    
 
    
 
 
    Résumé du projet
    
@@ -37,7 +37,7 @@ original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data
 
 
    Le tableau terminé devrait ressembler à celui-ci :
    
 
-
    
+
    
 
 
    Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)
    
 
-- 
cgit v1.2.3-54-g00ecf