diff --git a/files/fr/games/index.md b/files/fr/games/index.md
index ead22a494c9a8f..19149fa4b85883 100644
--- a/files/fr/games/index.md
+++ b/files/fr/games/index.md
@@ -15,7 +15,8 @@ Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site
 
 Nous avons également inclus une section de références afin que vous puissiez facilement trouver des informations sur toutes les API les plus courantes utilisées dans le développement de jeux.
 
-> **Note :** La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La [Zone "Apprendre"](/fr/Apprendre) est un bon endroit pour commencer avec les bases.
+> [!NOTE]
+> La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La [Zone "Apprendre"](/fr/Apprendre) est un bon endroit pour commencer avec les bases.
 
 ## Portez des jeux natifs sur le Web
 
diff --git a/files/fr/games/publishing_games/game_distribution/index.md b/files/fr/games/publishing_games/game_distribution/index.md
index fb5da6833321ee..b1cd147963456f 100644
--- a/files/fr/games/publishing_games/game_distribution/index.md
+++ b/files/fr/games/publishing_games/game_distribution/index.md
@@ -65,7 +65,8 @@ Vous pouvez aussi uploader et publier votre jeu directement sur différentes bou
 
 Voyons quelles options sont à notre disposition en matière de marketplaces/magasins d'applications disponibles pour chaque plateforme et système d'exploitation.
 
-> **Note :** Ces plateformes de distribution sont les plus populaires, mais cela ne signifie pas qu'elles sont les seules. Plutôt que d'essayer d'ajouter votre jeu à des milliers d'autres dans l'app store iOS par exemple, vous pouvez également tenter de trouver une niche et faire la promotion de votre jeu directement auprès d'une audience qui sera intéressée par vos jeux. Il est essentiel de faire preuve de créativité ici.
+> [!NOTE]
+> Ces plateformes de distribution sont les plus populaires, mais cela ne signifie pas qu'elles sont les seules. Plutôt que d'essayer d'ajouter votre jeu à des milliers d'autres dans l'app store iOS par exemple, vous pouvez également tenter de trouver une niche et faire la promotion de votre jeu directement auprès d'une audience qui sera intéressée par vos jeux. Il est essentiel de faire preuve de créativité ici.
 
 ### Boutiques en ligne
 
diff --git a/files/fr/games/techniques/2d_collision_detection/index.md b/files/fr/games/techniques/2d_collision_detection/index.md
index 0e3100793c7221..b8fa72c25154ad 100644
--- a/files/fr/games/techniques/2d_collision_detection/index.md
+++ b/files/fr/games/techniques/2d_collision_detection/index.md
@@ -33,7 +33,8 @@ if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) {
 }
 ```
 
-> **Note :** vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/knam8/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
+> [!NOTE]
+> Vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/knam8/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
 
 ## Collision de cercles
 
@@ -52,7 +53,8 @@ if (distance < circle1.radius + circle2.radius) {
 }
 ```
 
-> **Note :** vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/gQ3hD/2/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
+> [!NOTE]
+> Vous pouvez tester un [exemple interactif de cet algorithme](https://jsfiddle.net/gQ3hD/2/) sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.
 
 ## Théorème des axes séparateurs
 
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
index 6e3adbd1c7c475..b336e06dd4e351 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
@@ -19,7 +19,8 @@ PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités
 
 ![](playcanvas-demos.png)
 
-> **Note :** Consultez la liste des [démos](https://playcanvas.com/explore) pour trouver plus d'exemples.
+> [!NOTE]
+> Consultez la liste des [démos](https://playcanvas.com/explore) pour trouver plus d'exemples.
 
 ## Moteur vs Éditeur
 
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
index f52dd25b21c0f0..5080c456d087c1 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md
@@ -9,7 +9,8 @@ l10n:
 
 Une scène 3D dans un jeu, même la plus simple qui soit, contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir, des lumières et des matériaux pour améliorer son esthétique, des animations pour la rendre vivante, etc. **Three.js**, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three.js, notamment la configuration d'un environnement de développement, la structure du code HTML nécessaire, les objets fondamentaux de ThreeJS et la manière de créer une démonstration de base.
 
-> **Note :** Nous avons choisi ThreeJS, car il s'agit de l'une des bibliothèques [WebGL](/fr/docs/Web/API/WebGL_API) les plus populaires, avec laquelle il est facile de commencer. Nous ne disons pas qu'il s'agit de la meilleure bibliothèque WebGL disponible, n'hésitez pas à expérimenter avec d'autres bibliothèques, comme [CopperLicht](https://www.ambiera.com/copperlicht/index.html), ou [PlayCanvas](https://playcanvas.com/).
+> [!NOTE]
+> Nous avons choisi ThreeJS, car il s'agit de l'une des bibliothèques [WebGL](/fr/docs/Web/API/WebGL_API) les plus populaires, avec laquelle il est facile de commencer. Nous ne disons pas qu'il s'agit de la meilleure bibliothèque WebGL disponible, n'hésitez pas à expérimenter avec d'autres bibliothèques, comme [CopperLicht](https://www.ambiera.com/copperlicht/index.html), ou [PlayCanvas](https://playcanvas.com/).
 
 ## Configuration de l'environnement de développement
 
@@ -105,7 +106,8 @@ Il existe d'autres types de caméra (cube, orthographique), mais la plus simple
 
 N'hésitez pas à modifier ces valeurs et observer les effets de ces changements sur la scène.
 
-> **Note :** Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent correspondre à toute unité que vous utiliserez pour l'ensemble des objets de la scène (millimètres, mètres, etc.).
+> [!NOTE]
+> Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent correspondre à toute unité que vous utiliserez pour l'ensemble des objets de la scène (millimètres, mètres, etc.).
 
 ## Rendu de la scène
 
diff --git a/files/fr/games/techniques/audio_for_web_games/index.md b/files/fr/games/techniques/audio_for_web_games/index.md
index 31098314e7ae43..144272c10a67d2 100644
--- a/files/fr/games/techniques/audio_for_web_games/index.md
+++ b/files/fr/games/techniques/audio_for_web_games/index.md
@@ -19,9 +19,11 @@ Pour une lecture automatique audio plus passive, par exemple une musique de fond
 
 Pour faire primer l'audio de cette façon, nous voulons en jouer une partie ; pour cette raison, il est utile d'inclure un moment de silence à la fin de votre échantillon audio. Ce silence signifiera que nous pouvons maintenant utiliser JavaScript pour lire ce fichier à des points arbitraires.
 
-> **Note :** Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous). Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.
+> [!NOTE]
+> Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous). Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.
 
-> **Note :** L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités. Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement. Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.
+> [!NOTE]
+> L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités. Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement. Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.
 
 ### Volume
 
@@ -31,7 +33,8 @@ Le contrôle du volume programmé peut être désactivé dans les navigateurs mo
 
 Probablement comme une tentative d'atténuation de l'utilisation des données du réseau mobile, nous trouvons souvent que la mise en mémoire tampon est désactivée avant que la lecture n'ait été lancée. La mise en mémoire tampon est le processus par lequel le navigateur télécharge le média à l'avance, ce que nous devons souvent faire pour assurer une lecture fluide.
 
-> **Note :** À bien des égards, le concept de mise en mémoire tampon est obsolète. Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent. Cependant, le préchargement est toujours utile; sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.
+> [!NOTE]
+> À bien des égards, le concept de mise en mémoire tampon est obsolète. Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent. Cependant, le préchargement est toujours utile; sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.
 
 ### Lecture audio simultanée
 
@@ -115,13 +118,17 @@ Voici un tableau qui montre quelles plateformes mobiles prennent en charge les f
   </tbody>
 </table>
 
-> **Note :** Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément. Si vous échelonnez la lecture, vous aurez peut-être un certain succès.
+> [!NOTE]
+> Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément. Si vous échelonnez la lecture, vous aurez peut-être un certain succès.
 
-> **Note :** La lecture audio simultanée est testée à l'aide de notre [exemple de test audio simultané](https://jsfiddle.net/dmkyaq0r/), avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.
+> [!NOTE]
+> La lecture audio simultanée est testée à l'aide de notre [exemple de test audio simultané](https://jsfiddle.net/dmkyaq0r/), avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.
 
-> **Note :** La fonctionnalité de lecture automatique simple est testée avec notre [exemp;e test lecture automatique](https://jsfiddle.net/vpdspp2b/).
+> [!NOTE]
+> La fonctionnalité de lecture automatique simple est testée avec notre [exemp;e test lecture automatique](https://jsfiddle.net/vpdspp2b/).
 
-> **Note :** La variabilité du volume est testée avec notre [exemple test volume](https://jsfiddle.net/7ta12vw4/).
+> [!NOTE]
+> La variabilité du volume est testée avec notre [exemple test volume](https://jsfiddle.net/7ta12vw4/).
 
 ## Solutions de contournement pour mobile
 
@@ -190,11 +197,14 @@ myAudio.addEventListener(
 );
 ```
 
-> **Note :** Vous pouvez [essayer notre lecteur de sprite audio](https://jsfiddle.net/59vwaame/) sur JSFiddle.
+> [!NOTE]
+> Vous pouvez [essayer notre lecteur de sprite audio](https://jsfiddle.net/59vwaame/) sur JSFiddle.
 
-> **Note :** Sur mobile nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.
+> [!NOTE]
+> Sur mobile nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.
 
-> **Note :** Attention aux débits binaires. L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.
+> [!NOTE]
+> Attention aux débits binaires. L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.
 
 ## Musique de fond
 
@@ -208,7 +218,8 @@ Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception
 
 Une stratégie inter-navigateurs envisageable serait de fournir un son basique à l'aide de l'élément standard {{HTMLElement ("audio")}} et, là où cela est pris en charge, d'améliorer l'expérience en utilisant l'API Web Audio.
 
-> **Note :** De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.
+> [!NOTE]
+> De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.
 
 Comme l'API Web Audio permet un timing et un contrôle précis de la lecture audio, nous pouvons l'utiliser pour jouer des échantillons à des moments spécifiques, ce qui est un aspect immersif crucial du jeu. Vous voulez que ces explosions soient **accompagnées** par un boom tonitruant, pas **l'un après les autres**, après tout.
 
@@ -296,7 +307,8 @@ for (var i = 0, len = tracks.length; i < len; i++) {
 }
 ```
 
-> **Note :** Vous pouvez essayer notre [démo multipiste API Web Audio](https://jsfiddle.net/c87z11jj/1/) sur JSFiddle.
+> [!NOTE]
+> Vous pouvez essayer notre [démo multipiste API Web Audio](https://jsfiddle.net/c87z11jj/1/) sur JSFiddle.
 
 Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioContext")}} et créons une fonction `(playTrack ())` qui charge et commence à jouer une piste.
 
@@ -312,7 +324,8 @@ Si le second paramètre de `start ()` — the offset (_le décalage_) — est nu
 
 Dans le contexte de votre monde de jeu, vous pouvez avoir des boucles et des échantillons qui sont joués dans différentes circonstances, et il peut être utile de pouvoir les synchroniser avec d'autres pistes pour une expérience plus transparente.
 
-> **Note :** Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant; nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.
+> [!NOTE]
+> Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant; nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.
 
 Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle si elle entre dans le battement, la mesure ou la phrase, selon l'unité que vous voulez pour votre musique de fond.
 
@@ -333,9 +346,11 @@ if (offset == 0) {
 }
 ```
 
-> **Note :** Ici, vous pouvez [essayer notre code calculateur d'attente](https://jsfiddle.net/c87z11jj/2/) , sur JSFiddle (synchronisé à la mesure).
+> [!NOTE]
+> Ici, vous pouvez [essayer notre code calculateur d'attente](https://jsfiddle.net/c87z11jj/2/) , sur JSFiddle (synchronisé à la mesure).
 
-> **Note :** Si le premier paramètre est 0 ou inférieur au contexte `currentTime`, la musique commence immédiatement.
+> [!NOTE]
+> Si le premier paramètre est 0 ou inférieur au contexte `currentTime`, la musique commence immédiatement.
 
 ### Audio positionnel
 
@@ -351,7 +366,8 @@ Nous pouvons relier :
 
 Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant [WebGL](/fr/docs/Web/API/WebGL_API), avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue .
 
-> **Note :** Voir [Web Audio API Spatialization Basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) _(Bases de la spacialisation de l'API Web Audio)_ pour plus de détails.
+> [!NOTE]
+> Voir [Web Audio API Spatialization Basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) _(Bases de la spacialisation de l'API Web Audio)_ pour plus de détails.
 
 ## Voir aussi
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md
index 1600665dfc85d0..c6438e8bb4eca4 100644
--- a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md
@@ -40,7 +40,8 @@ Comme note sur les parcours d'apprentissage — en commençant par le JavaScript
 
 Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.
 
-> **Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.
+> [!NOTE]
+> Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.
 
 ## Prochaines étapes
 
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md
index 9d5bab421329e5..a30adac8ca0bb0 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md
@@ -32,9 +32,11 @@ Toutes les leçons — et les différentes versions de ce [jeu de casse-brique M
 
 Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript.
 
-> **Note :** Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série [Jeu de casse-tête 2D avec Phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser).
+> [!NOTE]
+> Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série [Jeu de casse-tête 2D avec Phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser).
 
-> **Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .
+> [!NOTE]
+> Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .
 
 ## Prochaines étapes
 
diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index 31fc8404bb62cf..7b2757ca6769da 100644
--- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -82,7 +82,8 @@ La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la l
 
 La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.
 
-> **Note :** Vous pouvez lire l'article [Building Monster Wants Candy](http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) pour une introduction approfondie aux fonctions et méthodes de base de Phaser.
+> [!NOTE]
+> Vous pouvez lire l'article [Building Monster Wants Candy](http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723) pour une introduction approfondie aux fonctions et méthodes de base de Phaser.
 
 Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :
 
@@ -322,7 +323,8 @@ Plus l'appareil est incliné, plus la force appliquée à la balle et sa véloci
 
 ![](cyber-orb-flame-orientation.png)
 
-> **Note :** Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez [Gardez-le au niveau : en réponse aux changements d'orientation du périphérique](/fr/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes).
+> [!NOTE]
+> Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez [Gardez-le au niveau : en réponse aux changements d'orientation du périphérique](/fr/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes).
 
 ### Ajout du trou
 
diff --git a/files/fr/glossary/base64/index.md b/files/fr/glossary/base64/index.md
index 5cf95352509959..93a629a241d534 100644
--- a/files/fr/glossary/base64/index.md
+++ b/files/fr/glossary/base64/index.md
@@ -22,7 +22,8 @@ En JavaScript, il existe deux fonctions utilisées pour encoder et décoder des
 
 L'algorithme utilisé par `atob()` et `btoa()` est défini dans la section 4 de [la RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648).
 
-> **Note :** La méthode `btoa()` s'attend à recevoir des données binaires et il émettra une erreur si la chaîne en paramètre contient n'importe lequel caractère dont la représentation UTF-16 occupe plus d'un octet.
+> [!NOTE]
+> La méthode `btoa()` s'attend à recevoir des données binaires et il émettra une erreur si la chaîne en paramètre contient n'importe lequel caractère dont la représentation UTF-16 occupe plus d'un octet.
 
 ## Augmentation de la taille lors de l'encodage
 
@@ -74,7 +75,8 @@ UnicodeDecodeB64("JUUyJTlDJTkzJTIwJUMzJUEwJTIwbGElMjBtb2Rl"); // "✓ à la mode
 
 ### Seconde solution&nbsp;: réécrire `atob()` et `btoa()` en utilisant des tableaux typés (`TypedArray`) et UTF-8
 
-> **Note :** Le code suivant peut également être utilisé pour obtenir un [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) depuis une chaîne en base64 et vice-versa ([voir ci-après](#annexe_décoder_une_chaîne_en_base64_en_un_objet_uint8array_ou_arraybuffer)).
+> [!NOTE]
+> Le code suivant peut également être utilisé pour obtenir un [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) depuis une chaîne en base64 et vice-versa ([voir ci-après](#annexe_décoder_une_chaîne_en_base64_en_un_objet_uint8array_ou_arraybuffer)).
 
 ```js
 "use strict";
@@ -326,7 +328,8 @@ var monBuffer = base64DecToArr(
 alert(monBuffer.byteLength);
 ```
 
-> **Note :** La fonction `base64DecToArr(sBase64[, nTailleBloc])` renvoie un [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument `nTailleBloc`, qui représente le nombre d'octets dont la propriété `uint8Array.buffer.bytesLength` doit être un multiple&nbsp;:
+> [!NOTE]
+> La fonction `base64DecToArr(sBase64[, nTailleBloc])` renvoie un [`Uint8Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument `nTailleBloc`, qui représente le nombre d'octets dont la propriété `uint8Array.buffer.bytesLength` doit être un multiple&nbsp;:
 >
 > - `1` ou pas de paramètre pour l'ASCII (chaque caractère dans la chaîne est considéré comme un octet de donnée binaire)
 > - `2` pour les chaînes UTF-16
diff --git a/files/fr/glossary/block-level_content/index.md b/files/fr/glossary/block-level_content/index.md
index ff87901f34b780..306dae9de861ca 100644
--- a/files/fr/glossary/block-level_content/index.md
+++ b/files/fr/glossary/block-level_content/index.md
@@ -9,7 +9,8 @@ Les éléments HTML (**Hypertext Markup Language**) étaient historiquement cat
 
 Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.
 
-> **Note :** Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).
+> [!NOTE]
+> Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).
 
 ## Éléments de type bloc
 
diff --git a/files/fr/glossary/certificate_authority/index.md b/files/fr/glossary/certificate_authority/index.md
index 630ce86ec6767b..ad7f3323320afd 100644
--- a/files/fr/glossary/certificate_authority/index.md
+++ b/files/fr/glossary/certificate_authority/index.md
@@ -13,7 +13,8 @@ Pour un certificat numérique d'un site web, ces informations comprennent au min
 
 Les autorités de certification font partie de [l'infrastructure à clés publiques](https://fr.wikipedia.org/wiki/Infrastructure_%C3%A0_cl%C3%A9s_publiques) permettant aux navigateurs de vérifier les identités des sites web pour les connexions sécurisées avec TLS (pour accéder aux sites en HTTPS).
 
-> **Note :** Les navigateurs web possèdent chacun une liste de certificats racines préchargés. Le navigateur peut utiliser ces certificats racines pour vérifier de façon sûre que le certificat du site web a été signé par une autorité de certification qu'on peut remonter jusqu'à un certificat racine (autrement dit, l'autorité de certification bénéficie de la confiance du propriétaire du certificat racine ou d'une autorité de certification intermédiaire). Ce processus de chaîne de confiance repose sur le principe que chaque autorité de certification effectue les vérifications d'identité nécessaires avant de signer un certificat&nbsp;!
+> [!NOTE]
+> Les navigateurs web possèdent chacun une liste de certificats racines préchargés. Le navigateur peut utiliser ces certificats racines pour vérifier de façon sûre que le certificat du site web a été signé par une autorité de certification qu'on peut remonter jusqu'à un certificat racine (autrement dit, l'autorité de certification bénéficie de la confiance du propriétaire du certificat racine ou d'une autorité de certification intermédiaire). Ce processus de chaîne de confiance repose sur le principe que chaque autorité de certification effectue les vérifications d'identité nécessaires avant de signer un certificat&nbsp;!
 
 ## Voir aussi
 
diff --git a/files/fr/glossary/composite_operation/index.md b/files/fr/glossary/composite_operation/index.md
index b11419f7f08c15..73a11bbede3808 100644
--- a/files/fr/glossary/composite_operation/index.md
+++ b/files/fr/glossary/composite_operation/index.md
@@ -18,7 +18,8 @@ L'_opération composite_ est l'opération qui permet de combiner la valeur effec
 - Accumulation
   - : La valeur effective est combinée à la valeur sous-jacente.
 
-> **Note :** En CSS, l'opération composite s'applique uniquement aux opérations.
+> [!NOTE]
+> En CSS, l'opération composite s'applique uniquement aux opérations.
 
 ## Voir aussi
 
diff --git a/files/fr/glossary/cors-safelisted_response_header/index.md b/files/fr/glossary/cors-safelisted_response_header/index.md
index 6e823b4ed51629..8806a61ce7991b 100644
--- a/files/fr/glossary/cors-safelisted_response_header/index.md
+++ b/files/fr/glossary/cors-safelisted_response_header/index.md
@@ -21,7 +21,8 @@ Par défaut, la liste des en-têtes de réponse sûrs contient&nbsp;:
 
 Des en-têtes supplémentaires peuvent être indiqués comme sûr à l'aide de l'en-tête [`Access-Control-Expose-Headers`](/fr/docs/Web/HTTP/Headers/Access-Control-Expose-Headers).
 
-> **Note :** Initialement, [`Content-Length`](/fr/docs/Web/HTTP/Headers/Content-Length) ne faisait pas partie de la liste par défaut des en-têtes de réponse sûrs (voir [la <i lang="en">pull request</i> 626 du dépôt Fetch](https://github.com/whatwg/fetch/pull/626)).
+> [!NOTE]
+> Initialement, [`Content-Length`](/fr/docs/Web/HTTP/Headers/Content-Length) ne faisait pas partie de la liste par défaut des en-têtes de réponse sûrs (voir [la <i lang="en">pull request</i> 626 du dépôt Fetch](https://github.com/whatwg/fetch/pull/626)).
 
 ## Exemples
 
diff --git a/files/fr/glossary/forbidden_header_name/index.md b/files/fr/glossary/forbidden_header_name/index.md
index 6f6da60bbc1490..8a0cb32ac07c28 100644
--- a/files/fr/glossary/forbidden_header_name/index.md
+++ b/files/fr/glossary/forbidden_header_name/index.md
@@ -34,4 +34,5 @@ Les noms d'en-tête interdits commencent avec `Proxy-` ou `Sec-`, ou se composen
 - `Upgrade`
 - `Via`
 
-> **Note :** L'en-tête `User-Agent` n'est plus interdit, [conformément à la spécification](https://fetch.spec.whatwg.org/#terminology-headers) — voir la liste des noms d'en-tête interdit (implémentée dans Firefox 43), et peut donc maintenant être défini dans un objet [en-tête](/fr/docs/Web/API/Headers) Fetch, via XHR [setRequestHeader()](</fr/docs/Web/API/XMLHttpRequest#setRequestHeader()>), etc.
+> [!NOTE]
+> L'en-tête `User-Agent` n'est plus interdit, [conformément à la spécification](https://fetch.spec.whatwg.org/#terminology-headers) — voir la liste des noms d'en-tête interdit (implémentée dans Firefox 43), et peut donc maintenant être défini dans un objet [en-tête](/fr/docs/Web/API/Headers) Fetch, via XHR [setRequestHeader()](</fr/docs/Web/API/XMLHttpRequest#setRequestHeader()>), etc.
diff --git a/files/fr/glossary/index.md b/files/fr/glossary/index.md
index 99f3ce058d6b58..d2f1959d7ec941 100644
--- a/files/fr/glossary/index.md
+++ b/files/fr/glossary/index.md
@@ -11,4 +11,5 @@ Les technologies Web font l'objet d'un important jargon et utilisent des abrévi
 
 Vous pouvez parcourir les termes du glossaire en utilisant la barre latérale.
 
-> **Note :** Le glossaire et sa traduction en français sont en constante évolution. Vous pouvez aider en [traduisant les pages correspondantes depuis l'anglais](/fr/docs/MDN/Community/Contributing/Translated_content) ou en améliorant les pages existantes.
+> [!NOTE]
+> Le glossaire et sa traduction en français sont en constante évolution. Vous pouvez aider en [traduisant les pages correspondantes depuis l'anglais](/fr/docs/MDN/Community/Contributing/Translated_content) ou en améliorant les pages existantes.
diff --git a/files/fr/glossary/inline-level_content/index.md b/files/fr/glossary/inline-level_content/index.md
index 47a583faf34c7e..19c284f2f9f0db 100644
--- a/files/fr/glossary/inline-level_content/index.md
+++ b/files/fr/glossary/inline-level_content/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Inline-level_content
 
 Les éléments HTML (**Hypertext Markup Language**) étaient historiquement catégorisés comme des éléments de type « bloc » (_block_ en anglais) ou de type « en ligne » (_inline_ en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification [_Flow Layout_](/fr/docs/Web/CSS/CSS_Flow_Layout) qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux [éléments de bloc](/fr/docs/Web/HTML/Block-level_elements).
 
-> **Note :** Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.
+> [!NOTE]
+> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.
 
 ## Éléments en ligne et éléments de bloc : un exemple
 
diff --git a/files/fr/glossary/method/index.md b/files/fr/glossary/method/index.md
index 156b9700f32172..ef8655afd82599 100644
--- a/files/fr/glossary/method/index.md
+++ b/files/fr/glossary/method/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Method
 
 Une **méthode** est une {{glossary("fonction", "fonction")}} (`function`) qui est une {{glossary("property","propriété")}} d'un {{glossary("object","objet")}}. Il existe deux sortes de méthodes&nbsp;: Les _méthodes d'instance_ qui représentent les fonctions fournissant une interface pour effectuer des actions dans le contexte de l'objet qu'elles composent ou les _méthodes statiques_ qui représentent les fonctions pouvant être exécutées sans nécessiter d'instanciation.
 
-> **Note :** En JavaScript, les fonctions sont elles-mêmes des objets. Dans ce contexte, une méthode est plus précisément une {{glossary("object reference","référence vers un objet")}} de type `function`.
+> [!NOTE]
+> En JavaScript, les fonctions sont elles-mêmes des objets. Dans ce contexte, une méthode est plus précisément une {{glossary("object reference","référence vers un objet")}} de type `function`.
 
 ## Voir aussi
 
diff --git a/files/fr/glossary/prefetch/index.md b/files/fr/glossary/prefetch/index.md
index 0cfb608fb217c7..c2bbc1f1037a56 100644
--- a/files/fr/glossary/prefetch/index.md
+++ b/files/fr/glossary/prefetch/index.md
@@ -35,7 +35,8 @@ L'en-tête `Link:` peut également être spécifiée à l'intérieur d'un docume
 
 Le format pour l'en-tête `Link:` est décrit dans le [RFC 2068](http://tools.ietf.org/html/rfc2068) section 19.6.2.4.
 
-> **Note :** Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente [RFC 2616](http://tools.ietf.org/html/rfc2616) ne décrit pas l'en-tête `Link:`. Bien que les en-têtes `Link:` ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.
+> [!NOTE]
+> Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente [RFC 2616](http://tools.ietf.org/html/rfc2616) ne décrit pas l'en-tête `Link:`. Bien que les en-têtes `Link:` ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.
 
 Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes.
 
diff --git a/files/fr/glossary/vendor_prefix/index.md b/files/fr/glossary/vendor_prefix/index.md
index b828897438db44..eee3498366da48 100644
--- a/files/fr/glossary/vendor_prefix/index.md
+++ b/files/fr/glossary/vendor_prefix/index.md
@@ -7,7 +7,8 @@ slug: Glossary/Vendor_Prefix
 
 Les vendeurs de navigateurs ajoutent parfois des préfixes aux propriétés CSS expérimentales ou non standards. Les développeurs peuvent ainsi les expérimenter sans que les changements de comportement du navigateur ne cassent le code pendant le processus de standardisation. Les développeurs sont supposés attendre que le comportement du navigateur soit standardisé pour inclure la propriété non préfixée.
 
-> **Note :** Les fournisseurs de navigateurs s'efforcent d'arrêter l'utilisation des préfixes fournisseurs pour les fonctionnalités expérimentales. Les développeurs Web les utilisent sur des sites Web de production, malgré leur caractère expérimental. Cela a rendu plus difficile la compatibilité des fournisseurs de navigateurs et le travail sur de nouvelles fonctionnalités ; cela a également été nuisible aux petits navigateurs qui se sont retrouvés obligés d'ajouter des préfixes d'autres navigateurs afin de charger des sites web populaires.
+> [!NOTE]
+> Les fournisseurs de navigateurs s'efforcent d'arrêter l'utilisation des préfixes fournisseurs pour les fonctionnalités expérimentales. Les développeurs Web les utilisent sur des sites Web de production, malgré leur caractère expérimental. Cela a rendu plus difficile la compatibilité des fournisseurs de navigateurs et le travail sur de nouvelles fonctionnalités ; cela a également été nuisible aux petits navigateurs qui se sont retrouvés obligés d'ajouter des préfixes d'autres navigateurs afin de charger des sites web populaires.
 >
 > Dernièrement, la tendance consiste à ajouter des fonctionnalités expérimentales derrière des indications contrôlées par l'utilisateur, et de travailler sur des spécifications plus petites et dont la stabilité est atteinte plus rapidement.
 
diff --git a/files/fr/glossary/void_element/index.md b/files/fr/glossary/void_element/index.md
index eba9cc66d0a4d6..8e54ecade2ca5a 100644
--- a/files/fr/glossary/void_element/index.md
+++ b/files/fr/glossary/void_element/index.md
@@ -34,7 +34,8 @@ Voici la liste des éléments vides en HTML&nbsp;:
 
 ## Balises auto-fermantes
 
-> **Note :** Les balises auto-fermantes (`<tag />`) n'existent pas en HTML.
+> [!NOTE]
+> Les balises auto-fermantes (`<tag />`) n'existent pas en HTML.
 
 Si une barre oblique `/` de fin est présente dans la balise ouvrante d'un élément HTML, les analyseurs syntaxiques HTML ignoreront ce caractère. Il est important de se rappeler cette distinction pour les éléments (comme [`<script>`](/fr/docs/Web/HTML/Element/script) ou [`<ul>`](/fr/docs/Web/HTML/Element/ul)) qui doivent avoir une balise fermante. Pour ces éléments, ajouter une barre oblique à la fin de la balise ouvrante ne suffira pas à fermer l'élément.
 
@@ -44,7 +45,8 @@ Les balises auto-fermantes sont requises pour les éléments vides en [XML](/fr/
 
 Pour SVG et MathML, les éléments qui ne peuvent pas avoir de nœud enfant peuvent utiliser une balise auto-fermante. Dans ces cas, si l'élément utilise une balise auto-fermante, il ne doit pas avoir de balise fermante en plus.
 
-> **Note :** Si une barre oblique `/` est présente dans la balise ouvrante et directement précédée (sans espace) par une valeur d'attribut sans quotes, la barre oblique fera alors partie de la valeur de l'attribut plutôt que d'être ignorée par l'analyseur syntaxique. Ainsi, si on écrit `<img src=http://www.example.com/logo.svg/>`, cela signifiera que l'attribut `src` contiendra la valeur `http://www.example.com/logo.svg/` et l'URL ainsi construite est invalide.
+> [!NOTE]
+> Si une barre oblique `/` est présente dans la balise ouvrante et directement précédée (sans espace) par une valeur d'attribut sans quotes, la barre oblique fera alors partie de la valeur de l'attribut plutôt que d'être ignorée par l'analyseur syntaxique. Ainsi, si on écrit `<img src=http://www.example.com/logo.svg/>`, cela signifiera que l'attribut `src` contiendra la valeur `http://www.example.com/logo.svg/` et l'URL ainsi construite est invalide.
 
 ## Voir aussi
 
diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md
index cc4fe75190c77c..85249a5c407e8c 100644
--- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md
@@ -54,7 +54,8 @@ Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-v
 2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
 3. La partie du menu de navigation du site ( `<div class="nav"></div>`) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
 
-> **Note :** Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.
+> [!NOTE]
+> Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.
 
 ### Les images
 
diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md
index 104a8cd5082042..5b2f240397f6a5 100644
--- a/files/fr/learn/accessibility/css_and_javascript/index.md
+++ b/files/fr/learn/accessibility/css_and_javascript/index.md
@@ -198,7 +198,8 @@ Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que
 
 Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d'outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d'arrière-plan afin de les vérifier. Par exemple, le [vérificateur de contraste de couleur](https://webaim.org/resources/contrastchecker/) du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.
 
-> **Note :** Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.
+> [!NOTE]
+> Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.
 
 Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.
 
@@ -259,7 +260,8 @@ Par exemple, nous avons écrit un exemple de validation de formulaire côté cli
 
 Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.
 
-> **Note :** La validation côté serveur n'a pas été implémentée dans cette simple démonstration.
+> [!NOTE]
+> La validation côté serveur n'a pas été implémentée dans cette simple démonstration.
 
 Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure&nbsp;:
 
@@ -289,7 +291,8 @@ function validate(e) {
 }
 ```
 
-> **Note :** Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.
+> [!NOTE]
+> Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.
 
 La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l'âge entré est en réalité un nombre et qu'il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`).
 
@@ -317,7 +320,8 @@ function createLink(testItem) {
 
 Chaque lien a un double objectif — il vous dit quelle est l'erreur, vous pouvez aussi cliquer dessus / l'activer pour passer directement à l'élément d'entrée en question et corriger votre saisie.
 
-> **Note :** La partie `focus()` de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc `onclick`/`focus()`. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc `onclick`/`focus()` pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir [bug Firefox 277178](https://bugzil.la/277178)).
+> [!NOTE]
+> La partie `focus()` de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc `onclick`/`focus()`. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc `onclick`/`focus()` pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir [bug Firefox 277178](https://bugzil.la/277178)).
 
 De plus, le champ `errorField` est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page
 
@@ -331,9 +335,11 @@ Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre dé
 
 Nous expliquerons ces attributs dans notre prochain article, qui couvre [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) de manière beaucoup plus détaillée.
 
-> **Note :** Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs `required`, `min`/`minlength`, et `max`/`maxlength` (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).
+> [!NOTE]
+> Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs `required`, `min`/`minlength`, et `max`/`maxlength` (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).
 
-> **Note :** WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.
+> [!NOTE]
+> WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.
 
 ### Autres problèmes d'accessibilité JavaScript
 
diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
index 52bd3d5ed35ef2..2f061a3daa13e2 100644
--- a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
+++ b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md
@@ -7,7 +7,8 @@ slug: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScrip
 
 L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les [meilleures pratiques d'accessibilité en CSS et en JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript).
 
-> **Note :** Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices suivants.
+> [!NOTE]
+> Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices suivants.
 >
 > Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section [Évaluation ou aide supplémentaire](#assessment_or_further_help) en bas de la page.
 
diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md
index cb0655805d133c..6972561fab9053 100644
--- a/files/fr/learn/accessibility/html/index.md
+++ b/files/fr/learn/accessibility/html/index.md
@@ -60,7 +60,8 @@ Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) bal
 
 Continuons et jetons un œil au HTML accessible dans le détail.
 
-> **Note :** C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders) pour plus de détails.
+> [!NOTE]
+> C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders) pour plus de détails.
 
 ## Une bonne sémantique
 
@@ -256,7 +257,8 @@ Si vous essayez notre exemple plus moderne de structure avec un lecteur d'écran
 
 Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir [Référence des éléments HTML](/fr/docs/Web/HTML/Element#Content_sectioning)). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d'écran (et à d'autres outils) pour donner à l'utilisateur des indices supplémentaires sur le contenu qu'il navigue (voir [Prise en charge du lecteur d'écran pour les nouveaux éléments de section HTML5](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/) pour une idée de la prise en charge du lecteur d'écran).
 
-> **Note :** Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d'écran qui se liront auront du sens.
+> [!NOTE]
+> Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d'écran qui se liront auront du sens.
 
 ### Contrôles de l'interface utilisateur
 
@@ -268,7 +270,8 @@ L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisa
 
 Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas).
 
-> **Note :** Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) pour plus de détails.
+> [!NOTE]
+> Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) pour plus de détails.
 
 Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :
 
@@ -359,7 +362,8 @@ document.onkeydown = function (e) {
 
 Ici, nous ajoutons un écouteur à l'objet `document` pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété [`keyCode`](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton `onclick` à l'aide de `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément qui est actuellement ciblé sur la page.
 
-> **Note :** N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), `addEventListener` ne fonctionnera pas.
+> [!NOTE]
+> N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), `addEventListener` ne fonctionnera pas.
 
 C'est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d'autres problèmes. **Mieux vaut utiliser le bon élément pour le bon travail en premier lieu**.
 
@@ -389,7 +393,8 @@ c'est un mauvais texte du lien :
 </p>
 ```
 
-> **Note :** Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html).
+> [!NOTE]
+> Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html).
 
 Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :
 
@@ -414,7 +419,8 @@ Avec le code comme celui-ci, le label sera clairement associée à input; la des
 
 En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection
 
-> **Note :** vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html).
+> [!NOTE]
+> Vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html).
 
 ## Tableaux de données accessibles
 
@@ -452,7 +458,8 @@ Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez
 - Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} — vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut `scope`. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples
 - L'élément {{htmlelement("caption")}} et l'attribut summary `<table>` effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table. `<caption>` est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.
 
-> **Note :** voir notre article [Tableaux HTML&nbsp;: dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles.
+> [!NOTE]
+> Voir notre article [Tableaux HTML&nbsp;: dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles.
 
 ## Alternatives textuelles
 
@@ -483,7 +490,8 @@ Nous avons un exemple simple écrit, [accessible-image.html](http://mdn.github.i
 
 La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image&nbsp;». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l'utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.
 
-> **Note :** c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !
+> [!NOTE]
+> C'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !
 
 Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées.&nbsp;»
 
@@ -491,7 +499,8 @@ Cela met en évidence l'importance non seulement d'utiliser des noms de fichiers
 
 Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n'ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.
 
-> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d'informations sur la mise en œuvre des images et les meilleures pratiques.
+> [!NOTE]
+> Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d'informations sur la mise en œuvre des images et les meilleures pratiques.
 
 Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d'écran liront le texte alternatif, l'attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d'infos lors du survol de la souris.
 
@@ -547,7 +556,8 @@ Il peut arriver qu'une image soit incluse dans la conception d'une page, mais so
 
 La raison d'utiliser un vide `alt` au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun `alt` n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide `alt` sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.
 
-> **Note :** si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.
+> [!NOTE]
+> Si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.
 
 ## Résumé
 
diff --git a/files/fr/learn/accessibility/index.md b/files/fr/learn/accessibility/index.md
index 7b897dd0d59ffc..0aa1431fd2095a 100644
--- a/files/fr/learn/accessibility/index.md
+++ b/files/fr/learn/accessibility/index.md
@@ -11,7 +11,8 @@ Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir dév
 
 Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.
 
-> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
 
 ## Guides
 
diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md
index 6a0e9bf54c058a..878bf4c80d2fc7 100644
--- a/files/fr/learn/accessibility/multimedia/index.md
+++ b/files/fr/learn/accessibility/multimedia/index.md
@@ -272,13 +272,15 @@ Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouv
 
 Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.
 
-> **Note :** Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.
+> [!NOTE]
+> Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.
 
 ## Pistes de texte vidéo
 
 Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .
 
-> **Note :** Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d'entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu'un match de sport est diffusé) ou peuvent ne pas déranger les autres s'ils sont dans un endroit calme (comme une bibliothèque). .)
+> [!NOTE]
+> Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d'entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu'un match de sport est diffusé) ou peuvent ne pas déranger les autres s'ils sont dans un endroit calme (comme une bibliothèque). .)
 
 Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:
 
@@ -336,7 +338,8 @@ Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:
 
 Pour plus de détails, veuillez lire [Ajouter des légendes et des sous titres à des vidéos HTML 5](/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous trouverez [un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/) qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.
 
-> **Note :** Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.
+> [!NOTE]
+> Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.
 
 ## Autre contenu multimédia
 
diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.md b/files/fr/learn/accessibility/wai-aria_basics/index.md
index aabe5a52cbbb91..9267c8cb91207d 100644
--- a/files/fr/learn/accessibility/wai-aria_basics/index.md
+++ b/files/fr/learn/accessibility/wai-aria_basics/index.md
@@ -63,7 +63,8 @@ Cela fonctionne visuellement, mais les lecteurs d'écran ne peuvent pas interpr
 
 Les attributs WAI-ARIA ne modifient en rien la page web en dehors des informations exposées aux API du navigateur portant sur l'accessibilité (ce qu'utilisent les lecteurs d'écran pour récupérer des informations). WAI-ARIA ne modifie pas la structure de la page web, le DOM, etc. On pourra toutefois utiliser ses attributs pour sélectionner certains éléments en CSS.
 
-> **Note :** La spécification WAI-ARIA liste l'ensemble des rôles ARIA et leurs utilisations possibles, avec des liens vers de plus amples informations&nbsp;: [définition des rôles (en anglais)](https://www.w3.org/TR/wai-aria-1.1/#role_definitions). Sur MDN, vous pouvez consulter [la section sur les rôles ARIA](/fr/docs/Web/Accessibility/ARIA/Roles).
+> [!NOTE]
+> La spécification WAI-ARIA liste l'ensemble des rôles ARIA et leurs utilisations possibles, avec des liens vers de plus amples informations&nbsp;: [définition des rôles (en anglais)](https://www.w3.org/TR/wai-aria-1.1/#role_definitions). Sur MDN, vous pouvez consulter [la section sur les rôles ARIA](/fr/docs/Web/Accessibility/ARIA/Roles).
 >
 > La spécification contient également la liste de l'ensemble des propriétés et des états, avec des liens vers de plus amples informations&nbsp;: [définition des états et propriétés (tous les attributs `aria-\*`)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).
 
@@ -83,7 +84,8 @@ Il faut ensuite savoir si les navigateurs en question prennent en charge les fon
 
 Dans cet article, nous n'aborderons pas chaque fonctionnalité WAI-ARIA et les détails de chaque prise en charge. Nous nous intéresserons plutôt aux fonctionnalités essentielles de WAI-ARIA que vous devez connaître, et si nous ne mentionnons pas la compatibilité, vous pouvez partir du principe que la fonctionnalité en question est relativement bien prise en charge. Nous indiquerons clairement s'il y a des exceptions.
 
-> **Note :** Certaines bibliothèques JavaScript prennent en charge WAI-ARIA, ce qui signifie qu'elles ajoutent des attributs ARIA lorsqu'elles génèrent des éléments d'interface complexes comme des contrôles de formulaires. Si vous recherchez une bibliothèque JavaScript tierce pour vos composants d'interface, gardez en tête que l'accessibilité est un critère de choix. On pourra notamment citer jQuery UI (voir [à propos de jQuery UI&nbsp;: prise en charge étendue de l'accessibilité](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/), et [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html).
+> [!NOTE]
+> Certaines bibliothèques JavaScript prennent en charge WAI-ARIA, ce qui signifie qu'elles ajoutent des attributs ARIA lorsqu'elles génèrent des éléments d'interface complexes comme des contrôles de formulaires. Si vous recherchez une bibliothèque JavaScript tierce pour vos composants d'interface, gardez en tête que l'accessibilité est un critère de choix. On pourra notamment citer jQuery UI (voir [à propos de jQuery UI&nbsp;: prise en charge étendue de l'accessibilité](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/), et [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html).
 
 ### Quand faut-il utiliser WAI-ARIA&nbsp;?
 
@@ -102,7 +104,8 @@ S'il y a une chose à se rappeler, c'est qu'**il faut uniquement utiliser WAI-AR
 
 Rappelons-le quand même&nbsp;: **n'utilisez WAI-ARIA que lorsque c'est nécessaire&nbsp;!**
 
-> **Note :** De façon générale, essayez autant que possible de tester votre site avec une diversité de personnes, avec un handicap ou non, utilisant des lecteurs d'écran, utilisant la navigation au clavier, etc. Elles sauront bien mieux vous dire si le résultat fonctionne bien.
+> [!NOTE]
+> De façon générale, essayez autant que possible de tester votre site avec une diversité de personnes, avec un handicap ou non, utilisant des lecteurs d'écran, utilisant la navigation au clavier, etc. Elles sauront bien mieux vous dire si le résultat fonctionne bien.
 
 ## Implémentations concrètes avec WAI-ARIA
 
@@ -232,7 +235,8 @@ Téléchargez un exemplaire du fichier [`aria-no-live.html`](https://github.com/
 
 Cela permettra au lecteur d'écran d'annoncer le contenu dès qu'il est mis à jour.
 
-> **Note :** Si vous voyez une exception de sécurité lors de l'appel `XMLHttpRequest`, c'est que le fichier est chargé localement plutôt que depuis un serveur. Voyez [comment mettre en place un serveur de test](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) pour que cela fonctionne.
+> [!NOTE]
+> Si vous voyez une exception de sécurité lors de l'appel `XMLHttpRequest`, c'est que le fichier est chargé localement plutôt que depuis un serveur. Voyez [comment mettre en place un serveur de test](/fr/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server) pour que cela fonctionne.
 
 C'est mieux, mais seul le texte mis à jour est énoncé. Ce serait encore mieux d'avoir le titre qui est rappelé afin que la personne sache ce qui est énoncé. Pour cela, on peut ajouter la propriété [`aria-atomic`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) à la section. Reprenez la balise ouvrante `<section>` et modifiez-la ainsi&nbsp;:
 
@@ -242,9 +246,11 @@ C'est mieux, mais seul le texte mis à jour est énoncé. Ce serait encore mieux
 
 L'attribut `aria-atomic="true"` indique au lecteur d'écran d'énoncer l'intégralité du contenu de l'élément comme une seule unité et pas uniquement les fragments mis à jour.
 
-> **Note :** Vous pouvez consulter l'exemple terminé dans le fichier [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([et aussi voir le résultat avec cette démonstration](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
+> [!NOTE]
+> Vous pouvez consulter l'exemple terminé dans le fichier [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([et aussi voir le résultat avec cette démonstration](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
 
-> **Note :** La propriété [`aria-relevant`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) peut aussi s'avérer utile pour contrôler ce qui est énoncé lorsqu'une zone dynamique est mise à jour. On peut par exemple la paramétrer pour n'énoncer que les ajouts ou les suppressions.
+> [!NOTE]
+> La propriété [`aria-relevant`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) peut aussi s'avérer utile pour contrôler ce qui est énoncé lorsqu'une zone dynamique est mise à jour. On peut par exemple la paramétrer pour n'énoncer que les ajouts ou les suppressions.
 
 ### Améliorer l'accessibilité au clavier
 
@@ -312,7 +318,8 @@ Nous pouvons aller plus loin avec ARIA et aider à la validation. Comment indiqu
 
 On veillera à toujours associer un élément [`<label>`](/fr/docs/Web/HTML/Element/label) à chaque champ du formulaire. Bien que certains lecteurs d'écran énoncent le texte de remplacement, ce n'est pas le cas de tous. Une solution complémentaire pour indiquer un nom accessible pourra être d'utiliser les attributs [`aria-label`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-label) et [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby). Toutefois, utiliser un élément `<label>` doté d'un attribut `for` restera la meilleure méthode, car elle améliore l'accessibilité pour toutes les personnes, y compris celles qui utilisent la souris.
 
-> **Note :** Vous pouvez voir l'exemple terminé dans le fichier [`form-validation-updated.html`](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
+> [!NOTE]
+> Vous pouvez voir l'exemple terminé dans le fichier [`form-validation-updated.html`](https://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
 
 En plus de [`<label>`](/fr/docs/Web/HTML/Element/label), WAI-ARIA permet certaines techniques avancées pour les libellés des formulaires. Nous avons déjà abordé la propriété [`aria-label`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-label) pour fournir un libellé qu'on ne souhaitait pas afficher visuellement (voir la section [Signes et repères](#signes_et_repères) ci-avant). D'autres techniques utilisent la propriété [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) qui permet de désigner un libellé qui n'est pas un élément `<label>` ou de libeller plusieurs champs avec le même texte. [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) quant à lui permet d'associer d'autres informations à un champ de formulaire afin qu'elles soient énoncées. Voir [le guide WebAIM sur les techniques avancées pour les libellés des formulaires (en anglais)](https://webaim.org/techniques/forms/advanced) pour plus de détails.
 
@@ -362,7 +369,8 @@ Cela peut être corrigé à l'aide d'un rôle WAI-ARIA. Téléchargez un exempla
 
 Maintenant, en utilisant un lecteur d'écran, les boutons seront indiqués par «&nbsp;Cliquez ici&nbsp;! bouton&nbsp;». Bien que ça soit déjà mieux, il faut encore ajouter les fonctionnalités natives auxquelles on s'attend quand on utilise un bouton comme la gestion de la touche <kbd>Entrée</kbd> et des évènements de clic, comme expliqué dans [la documentation du rôle `button`](/fr/docs/Web/Accessibility/ARIA/Roles/button_role).
 
-> **Note :** N'oubliez pas qu'il vaut mieux utiliser l'élément sémantique correct lorsque c'est possible. Si vous souhaitez créer un bouton et que vous pouvez utiliser un élément [`<button>`](/fr/docs/Web/HTML/Element/button), faites-le&nbsp;!
+> [!NOTE]
+> N'oubliez pas qu'il vaut mieux utiliser l'élément sémantique correct lorsque c'est possible. Si vous souhaitez créer un bouton et que vous pouvez utiliser un élément [`<button>`](/fr/docs/Web/HTML/Element/button), faites-le&nbsp;!
 
 #### Guider les utilisatrices et utilisateurs pour les contrôles complexes
 
@@ -409,7 +417,8 @@ Pour voir l'amélioration, vous pouvez télécharger le fichier [`aria-tabbed-in
 </div>
 ```
 
-> **Note :** Le changement le plus important est le retrait des liens. Seuls les éléments de la liste sont utilisés comme onglets. En effet, les liens n'avaient pas vraiment de destination, ils ne faisaient que changer la vue. De plus, cela permet une meilleure utilisation des attributs `aria-setsize` et `aria-posinset`, au lien de toujours énoncer «&nbsp;1 sur 1&nbsp;», le lecteur d'écran pourra maintenant indiquer «&nbsp;1 sur 3&nbsp;», «&nbsp;2 sur 3&nbsp;», etc.
+> [!NOTE]
+> Le changement le plus important est le retrait des liens. Seuls les éléments de la liste sont utilisés comme onglets. En effet, les liens n'avaient pas vraiment de destination, ils ne faisaient que changer la vue. De plus, cela permet une meilleure utilisation des attributs `aria-setsize` et `aria-posinset`, au lien de toujours énoncer «&nbsp;1 sur 1&nbsp;», le lecteur d'écran pourra maintenant indiquer «&nbsp;1 sur 3&nbsp;», «&nbsp;2 sur 3&nbsp;», etc.
 
 Les fonctionnalités ARIA utilisées ici sont&nbsp;:
 
@@ -433,7 +442,8 @@ Cette nouvelle structure apporte plusieurs améliorations&nbsp;:
 - Le lecteur d'écran indique également le numéro de l'onglet sur lequel on se situe.
 - De plus, grâce à `aria-hidden` (seul l'onglet affiché a `aria-hidden="false"`), le contenu non-masqué est le seul vers lequel on peut naviguer, le contenu sélectionné est donc plus simple à trouver.
 
-> **Note :** Si vous souhaitez explicitement que quelque chose ne soit pas énoncé par un lecteur d'écran, il faudra appliquer l'attribut `aria-hidden="true"` à l'élément correspondant.
+> [!NOTE]
+> Si vous souhaitez explicitement que quelque chose ne soit pas énoncé par un lecteur d'écran, il faudra appliquer l'attribut `aria-hidden="true"` à l'élément correspondant.
 
 ## Évaluez vos compétences&nbsp;!
 
diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md
index f9a9cf341cec4d..b5eefc438ee2f1 100644
--- a/files/fr/learn/accessibility/what_is_accessibility/index.md
+++ b/files/fr/learn/accessibility/what_is_accessibility/index.md
@@ -45,7 +45,8 @@ L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier 
 
 Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — _vous n'êtes pas vos utilisateurs_. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de **technologies d'assistance**).
 
-> **Note :** L'aide-mémoire [Handicap et santé](http://www.who.int/mediacentre/factsheets/fs352/fr/) de l'Organisation Mondiale de la Santé indique que « Plus d'un milliard de personnes, c'est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »
+> [!NOTE]
+> L'aide-mémoire [Handicap et santé](http://www.who.int/mediacentre/factsheets/fs352/fr/) de l'Organisation Mondiale de la Santé indique que « Plus d'un milliard de personnes, c'est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »
 
 ### Les personnes ayant des troubles de la vue
 
@@ -100,7 +101,8 @@ Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de
 
 En termes de statistiques, encore une fois, les chiffres sont importants. Le [rapport 2014 sur le statut d'invalidité](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .
 
-> **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue.
+> [!NOTE]
+> La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue.
 
 ## Implémentation de l'accessibilité dans votre projet
 
@@ -125,7 +127,8 @@ D'autre part, si vous travaillez sur un site web de galerie présentant des œuv
 
 Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.
 
-> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail.
+> [!NOTE]
+> Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail.
 
 Résumer :
 
diff --git a/files/fr/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md b/files/fr/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md
index 3a3fc6b607d6cf..3ef9e441c6d768 100644
--- a/files/fr/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md
+++ b/files/fr/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md
@@ -38,7 +38,8 @@ Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de coule
 
 Pour contrôler le contraste, vous pouvez télécharger et installer [l'analyseur de contraste](http://www.paciellogroup.com/resources/contrastanalyser/) du Groupe Paciello.
 
-> **Note :** Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM&nbsp;: [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.
+> [!NOTE]
+> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM&nbsp;: [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.
 
 Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste&nbsp;:
 
@@ -164,7 +165,8 @@ span.subheading {
 
 C'est plus facile de cette façon, n'est-ce pas&nbsp;? Cela fonctionne, à partir d'[Internet Explorer 9 et dans n'importe quel autre navigateur récent](http://caniuse.com/#search=rem), n'hésitez pas à l'utiliser.
 
-> **Note :** Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.
+> [!NOTE]
+> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.
 
 #### Pourquoi aurais-je besoin d'utiliser des unités proportionnelles&nbsp;?
 
@@ -175,7 +177,8 @@ Il est généralement conseillé de&nbsp;:
 - Décrire les tailles de police en unité `rem`, cela ne posera aucun problème à la plupart des navigateurs&nbsp;;
 - Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés.
 
-> **Note :** Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des `em`s, quitte à faire un peu de mathématique en chemin.
+> [!NOTE]
+> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des `em`s, quitte à faire un peu de mathématique en chemin.
 
 ### Largeur de ligne
 
@@ -231,7 +234,8 @@ Les images d'une page web peuvent être décoratives ou informatives mais il n'e
 
 Si l'image peut être décrite succintement, vous pouvez fournir un attribut `alt` qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut `longdesc`. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.
 
-> **Note :** L'utilisation voire l'existence de `longdesc` ont toujours été débatues. Veuillez vous référer à la page du W3C' [Image Description Extension (longdesc)](http://www.w3.org/TR/html-longdesc/) pour une explication complète et des exemples détaillés.
+> [!NOTE]
+> L'utilisation voire l'existence de `longdesc` ont toujours été débatues. Veuillez vous référer à la page du W3C' [Image Description Extension (longdesc)](http://www.w3.org/TR/html-longdesc/) pour une explication complète et des exemples détaillés.
 
 #### Audio/Vidéo
 
diff --git a/files/fr/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/fr/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
index 1584c330de7c62..a4145414698c02 100644
--- a/files/fr/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
+++ b/files/fr/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md
@@ -47,7 +47,8 @@ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur
 
 Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.
 
-> **Note :** Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent [l'idéation](https://fr.wikipedia.org/wiki/Idéation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet).
+> [!NOTE]
+> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent [l'idéation](https://fr.wikipedia.org/wiki/Idéation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet).
 
 ### Qu'est-ce que je veux accomplir exactement ?
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/available_text_editors/index.md b/files/fr/learn/common_questions/tools_and_setup/available_text_editors/index.md
index 91cd456de61f20..3e2d0a6a637515 100644
--- a/files/fr/learn/common_questions/tools_and_setup/available_text_editors/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/available_text_editors/index.md
@@ -43,7 +43,8 @@ Voici quelques questions qui peuvent vous aider à choisir :
 
 Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.
 
-> **Note :** Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.
+> [!NOTE]
+> Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.
 
 Voici un tableau de quelques éditeurs de texte connus :
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md b/files/fr/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
index 842d37641cc0d7..b10066486f3b4f 100644
--- a/files/fr/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/how_much_does_it_cost/index.md
@@ -75,7 +75,8 @@ Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fich
 
 Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : [FileZilla](https://filezilla-project.org/) pour toutes les plateformes, [WinSCP](http://winscp.net/) pour Windows, [Cyberduck](https://cyberduck.io/) pour Mac et Windows [et d'autres encore](https://en.wikipedia.org/wiki/List_of_FTP_server_software).
 
-> **Note :** Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.
+> [!NOTE]
+> Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.
 
 #### Navigateurs
 
@@ -104,7 +105,8 @@ Assurez-vous d'avoir suffisamment de bande passante :
 
 Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.
 
-> **Note :** Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.
+> [!NOTE]
+> Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.
 
 ##### Nom de domaine
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
index 40ca5a035ae866..7f253235ce4bb4 100644
--- a/files/fr/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md
@@ -84,7 +84,8 @@ Voilà la marche à suivre :
 
 5. Par défaut, il affiche la liste des fichiers du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant l'URL `localhost:8000` dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.
 
-> **Note :** Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`.
+> [!NOTE]
+> Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`.
 
 ## Faire fonctionner localement des langages serveur
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/fr/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
index cbf28107e6a1d9..f4c8d475c571fd 100644
--- a/files/fr/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md
@@ -50,7 +50,8 @@ _Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette secti
 
 Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car [c'est un module complémentaire](https://addons.mozilla.org/firefox/addon/fireftp/).
 
-> **Note :** Il existe de nombreuses autres options, voir [les outils de publications : les clients FTP](/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client) pour plus d'informations.
+> [!NOTE]
+> Il existe de nombreuses autres options, voir [les outils de publications : les clients FTP](/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client) pour plus d'informations.
 
 Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :
 
@@ -84,7 +85,8 @@ Tout d'abord, jetons un coup d'œil à `http://demozilla.hebergeurexemple.net/`
 
 ![Our demozilla personal website, seen in a browser: it's empty](demozilla-empty.png)
 
-> **Note :** Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par \[Nom de l'hébergeur] ».
+> [!NOTE]
+> Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par \[Nom de l'hébergeur] ».
 
 Pour connecter votre client FTP au serveur distant, cliquez sur le bouton _« Créer un compte »_ de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/using_github_pages/index.md b/files/fr/learn/common_questions/tools_and_setup/using_github_pages/index.md
index 317622bbd48b9c..a51754272f917f 100644
--- a/files/fr/learn/common_questions/tools_and_setup/using_github_pages/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/using_github_pages/index.md
@@ -17,7 +17,8 @@ GitHub est un outil très populaire et important à l'heure actuelle. Git est [u
 2. Ensuite, [inscrivez-vous sur GitHub](https://github.com/join). La procédure est plutôt simple.
 3. Une fois inscrit, connectez vous à [github.com](https://github.com) avec votre nom d'utilisateur et votre mot de passe.
 
-> **Note :** Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.
+> [!NOTE]
+> Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.
 
 ### Préparer le code afin de l'envoyer vers GitHub
 
@@ -43,7 +44,8 @@ La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface e
 
 ![Interface en ligne de commande](commande.png)
 
-> **Note :** Il existe également des [interfaces graphiques pour Git](http://git-scm.com/downloads/guis) qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.
+> [!NOTE]
+> Il existe également des [interfaces graphiques pour Git](http://git-scm.com/downloads/guis) qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.
 
 Chaque système d'exploitation possède sa propre interface en ligne de commande :
 
@@ -87,7 +89,8 @@ La ligne de commande peut sembler un peu effrayante au début mais ne vous inqui
    ![](repo-site.png)
 5. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
 
-> **Note :** Si vous êtes bloqué-e, n'hésitez pas à utiliser [la page d'aide GitHub sur les pages GitHub](https://pages.github.com/) qui est une excellente ressource (en anglais).
+> [!NOTE]
+> Si vous êtes bloqué-e, n'hésitez pas à utiliser [la page d'aide GitHub sur les pages GitHub](https://pages.github.com/) qui est une excellente ressource (en anglais).
 
 ### Aller plus loin avec Git et GitHub
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/fr/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
index 5a0a90cd71318c..a2166adfa181c6 100644
--- a/files/fr/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md
@@ -7,7 +7,8 @@ slug: Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools
 
 Tous les navigateurs web modernes possèdent un ensemble d'outils de développement. Ces outils permettent de réaliser différentes actions&nbsp;: inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et leur temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (aussi souvent appelés par l'anglicisme «&nbsp;<i lang="en">devtools</i>&nbsp;»).
 
-> **Note :** Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser [l'exemple construit](https://mdn.github.io/beginner-html-site-scripted/) dans la série d'articles [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.
+> [!NOTE]
+> Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser [l'exemple construit](https://mdn.github.io/beginner-html-site-scripted/) dans la série d'articles [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.
 
 ## Comment ouvrir les outils de développement d'un navigateur
 
diff --git a/files/fr/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/files/fr/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
index ba950e6c18f826..58104ecedce48a 100644
--- a/files/fr/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
+++ b/files/fr/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md
@@ -268,7 +268,8 @@ Voici une capture d'écran d'un éditeur de texte en ligne&nbsp;:
 
 Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<i lang="en">uploader</i> en anglais) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article [combien ça coûte de publier quelque chose sur le Web&nbsp;?](/fr/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour _File Transfer Protocol_ ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme [RSync](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages).
 
-> **Note :** FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (_Secure_ FTP) ou via RSync avec SSH.
+> [!NOTE]
+> FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (_Secure_ FTP) ou via RSync avec SSH.
 
 Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails [dans un article à part](/fr/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server). Voyons tout de même une liste de clients FTP basiques&nbsp;:
 
diff --git a/files/fr/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/fr/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
index bf3219c7891019..d5cb0658f01efd 100644
--- a/files/fr/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
+++ b/files/fr/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md
@@ -45,7 +45,8 @@ L'**Internet** est l'épine dorsale du Web&nbsp;: il s'agit de l'infrastructure
 
 Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un [câble Ethernet](https://fr.wikipedia.org/wiki/Ethernet)), soit sans fil (par exemple, via [WiFi](http://fr.wikipedia.org/wiki/WiFi) ou [Bluetooth](http://fr.wikipedia.org/wiki/Bluetooth)). Tous ces types de connexions sont possibles sur les ordinateurs modernes.
 
-> **Note :** À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.
+> [!NOTE]
+> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.
 
 ![Two computers linked together](internet-schema-1.png)
 
diff --git a/files/fr/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/files/fr/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
index 62d51117f3e1a6..f3aace10d99a49 100644
--- a/files/fr/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
+++ b/files/fr/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md
@@ -72,7 +72,8 @@ Une _page web_ est un document simple qui peut être affiché par un [navigateur
 - des _scripts_ — qui ajoutent des fonctions interactives ; ou
 - du _contenu multimédia_ — images, sons, vidéos.
 
-> **Note :** Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers [PDF](/fr/docs/Glossary/PDF) ou des images, mais le terme **page web** désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme **document**.
+> [!NOTE]
+> Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers [PDF](/fr/docs/Glossary/PDF) ou des images, mais le terme **page web** désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme **document**.
 
 Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :
 
diff --git a/files/fr/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/fr/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
index f36fb1b4910e21..9a76858eb6b83c 100644
--- a/files/fr/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
+++ b/files/fr/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md
@@ -63,7 +63,8 @@ Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d
 
 Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.
 
-> **Note :** Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.
+> [!NOTE]
+> Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.
 
 #### Trouver un nom de domaine disponible
 
@@ -118,13 +119,15 @@ Le processus est assez simple :
 3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !
 4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.
 
-> **Note :** Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.
+> [!NOTE]
+> Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.
 
 #### Rafraîchissement du DNS
 
 Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».
 
-> **Note :** Ce temps est parfois appelé **temps de propagation**. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.
+> [!NOTE]
+> Ce temps est parfois appelé **temps de propagation**. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.
 
 ### Comment fonctionne une requête DNS ?
 
@@ -137,7 +140,8 @@ Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site
 
 ![Explanation of the steps needed to obtain the result to a DNS request](2014-10-dns-request2.png)
 
-> **Note :** Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.
+> [!NOTE]
+> Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.
 
 ## Étapes suivantes
 
diff --git a/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md
index c50f35647fc9ce..c339eaf01760fb 100644
--- a/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md
+++ b/files/fr/learn/common_questions/web_mechanics/what_is_a_url/index.md
@@ -73,7 +73,8 @@ http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur
 - ![Anchor](ancre_6.png)
   - : `#QuelquePartDansLeDocument` correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.
 
-> **Note :** Il existe [d'autres fragments et d'autres règles](http://en.wikipedia.org/wiki/Uniform_Resource_Locator) pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.
+> [!NOTE]
+> Il existe [d'autres fragments et d'autres règles](http://en.wikipedia.org/wiki/Uniform_Resource_Locator) pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.
 
 On peut comparer les URL avec les adresses postales : le _protocole_ représente le service postal qu'on souhaite utiliser, le _nom de domaine_ correspond à la ville et le _port_ au code postal, le _chemin_ indique le bâtiment où la lettre doit être acheminée et les _paramètres_ pourraient indique le numéro de l'appartement, enfin l'_ancre_ désigne la personne à laquelle la lettre est adressée.
 
diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md
index 675e3aee7de551..76c22be23abd9e 100644
--- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -180,7 +180,8 @@ Ici, nous avons mis en place un style de bouton avec des états différents selo
 
 Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.
 
-> **Note :** il y a un autre élément qui peut être paramétré parmi les valeurs de `box-shadow` — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le **rayon de diffusion**. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.
+> [!NOTE]
+> Il y a un autre élément qui peut être paramétré parmi les valeurs de `box-shadow` — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le **rayon de diffusion**. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.
 
 ## Filtres
 
@@ -228,7 +229,8 @@ Quelques autres points à noter :
 - Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres.
 - Comme vous pouvez le voir, nous avons inclus une version de la propriété `filter` préfixée par `-webkit-`. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version `-webkit-` de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée.
 
-> **Note :** Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.
+> [!NOTE]
+> Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.
 
 Vous pouvez voir d'autres exemples de filtres sur [filters.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html)).
 
@@ -243,7 +245,8 @@ Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :
 
 Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page [blend-modes.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) et à la page de référence de {{cssxref("&lt;blend-mode&gt;")}}.
 
-> **Note :** Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.
+> [!NOTE]
+> Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.
 
 ### background-blend-mode
 
@@ -339,7 +342,8 @@ Nous obtenons le résultat suivant :
 
 Vous voyez ici que `mix-blend-mode: multiply;` a mélangé non seulement les deux images d'arrière plan, mais également la couleur du `<div>` situé dessous.
 
-> **Note :** Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module [CSS Layout](/fr/docs/Learn/CSS/CSS_layout).
+> [!NOTE]
+> Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module [CSS Layout](/fr/docs/Learn/CSS/CSS_layout).
 
 ## -webkit-background-clip: text
 
@@ -356,7 +360,8 @@ Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe `-webkit-`
 
 Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.
 
-> **Note :** Pour un exemple de code complet avec `-webkit-background-clip: text`, allez à la page [background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)).
+> [!NOTE]
+> Pour un exemple de code complet avec `-webkit-background-clip: text`, allez à la page [background-clip-text.html](https://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)).
 
 ## Apprentissage actif : expérimenter certains effets
 
diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md
index 94e264a60f619f..3cc57705c05b20 100644
--- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -109,7 +109,8 @@ Essayez ce qui suit :
 
 La propriété [`background-position`](/fr/docs/Web/CSS/background-position) permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine `(0,0)` au coin en haut à gauche de la boîte, l'axe (`x`) étant horizontal, l'axe (`y`) vertical.
 
-> **Note :** La valeur par défaut de `background-position` est `(0,0)`.
+> [!NOTE]
+> La valeur par défaut de `background-position` est `(0,0)`.
 
 Les valeurs les plus communes pour `background-position` se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.
 
@@ -175,7 +176,8 @@ Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit
 
 Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.
 
-> **Note :** On peut joyeusement mélanger dégradés et images de fond classiques.
+> [!NOTE]
+> On peut joyeusement mélanger dégradés et images de fond classiques.
 
 Les autres propriétés `background-*` peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que `background-image`:
 
@@ -270,7 +272,8 @@ Pour la propriété qui concerne un des côtés&nbsp;:
 }
 ```
 
-> **Note :** Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes _logiques_ qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera [de la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
+> [!NOTE]
+> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes _logiques_ qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera [de la directionnalité du texte](/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions).
 
 **Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.**
 
@@ -310,7 +313,8 @@ Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :
 
 {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}
 
-> **Note :** Vous pouvez [jeter un œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) — mais essayez d'abord de la trouver par vous-même !
+> [!NOTE]
+> Vous pouvez [jeter un œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) — mais essayez d'abord de la trouver par vous-même !
 
 ## Résumé
 
diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.md b/files/fr/learn/css/building_blocks/box_model_tasks/index.md
index d0e714b33045c9..99ebd72a9fea21 100644
--- a/files/fr/learn/css/building_blocks/box_model_tasks/index.md
+++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.md
@@ -9,7 +9,8 @@ l10n:
 
 L'objectif de cette évaluation est de vous aider à vérifier votre compréhension du [modèle de boîte CSS](/fr/docs/Learn/CSS/Building_blocks/The_box_model).
 
-> **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices.
+> [!NOTE]
+> Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices.
 >
 > Si vous bloquez, demandez-nous de l'aide&nbsp;: voir la section [Évaluation et aide](#évaluation_et_aide) en bas de cette page.
 
diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md
index b63904067f243e..5999a63078e9c0 100644
--- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -65,7 +65,8 @@ Ainsi, si on définit des valeurs pour les propriétés `color` et `font-family`
 
 L'héritage ne concerne pas toutes les propriétés. Ainsi, si on fixe [`width`](/fr/docs/Web/CSS/width) à `50%` sur un élément, cela ne signifie pas que tous ses descendants auront une largeur égale à 50% de celle de leur parent. Si c'était le cas, CSS serait inutilement complexe.
 
-> **Note :** Sur chaque page MDN documentant une propriété CSS, vous pourrez voir un encart intitulé «&nbsp;Définition formelle&nbsp;» qui indique les caractéristiques de cette propriété et notamment son caractère hérité ou non. Voir [la section de la définition formelle pour la propriété `color`](/fr/docs/Web/CSS/color#définition_formelle) comme exemple.
+> [!NOTE]
+> Sur chaque page MDN documentant une propriété CSS, vous pourrez voir un encart intitulé «&nbsp;Définition formelle&nbsp;» qui indique les caractéristiques de cette propriété et notamment son caractère hérité ou non. Voir [la section de la définition formelle pour la propriété `color`](/fr/docs/Web/CSS/color#définition_formelle) comme exemple.
 
 ## Comprendre l'héritage
 
@@ -94,7 +95,8 @@ CSS fournit 5 valeurs spéciales et universelles pour les propriétés afin de c
 - [`unset`](/fr/docs/Web/CSS/unset)
   - : Réinitialise la propriété avec sa valeur naturelle. Autrement dit, si la propriété est naturellement héritée, ce mot-clé sera synonyme de `inherit`, sinon, il sera synonyme de `initial`.
 
-> **Note :** Voir [la section sur les types d'origine](/fr/docs/Web/CSS/Cascade#types_dorigine) pour plus d'informations sur ces valeurs et leur fonctionnement.
+> [!NOTE]
+> Voir [la section sur les types d'origine](/fr/docs/Web/CSS/Cascade#types_dorigine) pour plus d'informations sur ces valeurs et leur fonctionnement.
 
 Utilisons un exemple avec une liste de liens pour observer comment ces valeurs fonctionnent. Dans l'éditeur qui suit, vous pouvez éditer le CSS et voir l'effet de vos changements. Utilisez cette interactivité pour mieux comprendre le comportement de HTML et de CSS.
 
@@ -158,7 +160,8 @@ La spécificité d'un sélecteur est mesurée selon 3 composantes différentes,
 - Élément
   - : On marque un point dans cette colonne pour chaque sélecteur d'élément ou de pseudo-élément contenu dans le sélecteur composite.
 
-> **Note :** Le sélecteur universel ([`*`](/fr/docs/Web/CSS/Universal_selectors)), [les combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`, `>`, `~`, ' '), et le sélecteur d'ajustement de spécificité ([`:where()`](/fr/docs/Web/CSS/:where)) et ses paramètres n'ont pas d'effet sur la spécificité.
+> [!NOTE]
+> Le sélecteur universel ([`*`](/fr/docs/Web/CSS/Universal_selectors)), [les combinateurs](/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators) (`+`, `>`, `~`, ' '), et le sélecteur d'ajustement de spécificité ([`:where()`](/fr/docs/Web/CSS/:where)) et ses paramètres n'ont pas d'effet sur la spécificité.
 
 Les pseudo-classes de négation ([`:not()`](/fr/docs/Web/CSS/:not)), de sélection relationnelle ([`:has()`](/fr/docs/Web/CSS/:has)), et de correspondance ([`:is()`](/fr/docs/Web/CSS/:is)) n'ont pas d'effet par elles-mêmes sur la spécificité, ce sont leurs paramètres qui ont un impact. La contribution à la spécificité du sélecteur de chacune de ses pseudo-classes est égale à la spécificité la plus grande parmi les paramètres qui lui sont passés.
 
@@ -182,7 +185,8 @@ Que se passe-t-il ici&nbsp;? Pour commencer, nous ne nous intéressons qu'aux se
 - Les troisième et quatrième sélecteurs sont en compétition pour la couleur du texte du lien. C'est le quatrième qui l'emporte et qui donne un texte blanc. En effet, bien qu'il ait un sélecteur d'élément en moins, celui-ci est remplacé par un sélecteur de classe, qui possède une spécificité plus élevée que n'importe quelle combinaison de sélecteurs d'élément. La spécificité 1-1-3 l'emporte sur la spécificité 1-0-4.
 - Les trois derniers sélecteurs portent sur la mise en forme de la bordure du lien au survol. Le sixième sélecteur cède la place au cinquième (avec des spécificités respectives de 0-2-3 et 0-2-4), car il a un sélecteur d'élément en moins. Le septième sélecteur l'emporte sur ces deux autres, car il a le même nombre de sous-sélecteurs que le cinquième et qu'un sélecteur d'élément a été remplacé par un sélecteur de classe. La spécificité 0-3-3 l'emporte donc sur les spécificités 0-2-3 et 0-2-4.
 
-> **Note :** Chaque type de sélecteur possède son propre niveau de spécificité et il n'est pas possible de renverser cette hiérarchie de type. Par exemple, l'assemblage d'un _million_ de sélecteurs de **classe** ne l'emporterait toujours pas sur la spécificité d'_un seul_ sélecteur d'**identifiant**.
+> [!NOTE]
+> Chaque type de sélecteur possède son propre niveau de spécificité et il n'est pas possible de renverser cette hiérarchie de type. Par exemple, l'assemblage d'un _million_ de sélecteurs de **classe** ne l'emporterait toujours pas sur la spécificité d'_un seul_ sélecteur d'**identifiant**.
 >
 > La meilleure façon pour évaluer la spécificité est de calculer les scores des composantes individuelles en commençant par la catégorie la plus élevée et en allant vers les plus faibles si nécessaire. En effet, il est uniquement nécessaire de calculer la spécificité d'une catégorie inférieure lorsqu'il y a égalité au niveau supérieur.
 
@@ -194,7 +198,8 @@ Les styles en incise du document (c'est-à-dire les déclarations de style prés
 
 Il existe une méthode permettant de passer outre toutes ces règles, y compris les styles en incise&nbsp;: `!important`. Toutefois, il faut faire preuve de prudence en l'utilisant. Ce marqueur permet de rendre une paire de propriété/valeur la plus spécifique, outrepassant les règles normales de la cascade, y compris pour les styles indiqués dans le document.
 
-> **Attention :** Il est utile de savoir que le marqueur `!important` existe afin de comprendre son effet lorsqu'on le voit dans des bases de code. **Toutefois, il est fortement recommandé de ne pas l'utiliser sauf en cas d'extrême nécessité.** Le marqueur `!important` change la façon dont la cascade fonctionne et peut largement complexifier le débogage de problèmes CSS, notamment pour les grandes feuilles de style.
+> [!WARNING]
+> Il est utile de savoir que le marqueur `!important` existe afin de comprendre son effet lorsqu'on le voit dans des bases de code. **Toutefois, il est fortement recommandé de ne pas l'utiliser sauf en cas d'extrême nécessité.** Le marqueur `!important` change la façon dont la cascade fonctionne et peut largement complexifier le débogage de problèmes CSS, notamment pour les grandes feuilles de style.
 
 Prenons un exemple où nous avons deux paragraphes, dont un qui porte un identifiant.
 
@@ -207,7 +212,8 @@ Voyons ce qui se passe ici (vous pouvez retirer certaines des propriétés et ob
 3. Les deux éléments ont une [classe](/fr/docs/Web/HTML/Global_attributes#class) `better`, et le second porte en plus [l'identifiant](/fr/docs/Web/HTML/Global_attributes#id) `winning`. Comme les identifiants ont une spécificité _toujours supérieure_ à celle des classes (on peut uniquement avoir un seul élément avec un identifiant donné sur une page, mais de nombreux éléments peuvent se partager une même classe), l'arrière-plan rouge et la bordure noire de 1 pixel devraient s'appliquer au second élément et le premier devrait avoir un arrière-plan gris sans bordure, tel qu'indiqué par la classe.
 4. En réalité, le second élément récupère bien l'arrière-plan rouge, mais pas la bordure&nbsp;? Pourquoi&nbsp;? C'est l'effet du marqueur `!important` dans la deuxième règle. Ajouter `!important` après `border: none` signifie que cette déclaration l'emportera sur toutes les valeurs de `border` des règles précédentes, même si le sélecteur d'identifiant possède une spécificité supérieure.
 
-> **Note :** La seule façon de surcharger une déclaration importante est d'inclure une autre déclaration importante avec _la même spécificité_ plus tard dans le code source, ou d'en placer une avec une spécificité supérieure, ou d'inclure une déclaration importante dans une couche de cascade antérieure (nous n'avons pas encore abordé le sujet des couches de cascade).
+> [!NOTE]
+> La seule façon de surcharger une déclaration importante est d'inclure une autre déclaration importante avec _la même spécificité_ plus tard dans le code source, ou d'en placer une avec une spécificité supérieure, ou d'inclure une déclaration importante dans une couche de cascade antérieure (nous n'avons pas encore abordé le sujet des couches de cascade).
 
 Un scénario où on peut justifier l'utilisation du marqueur `!important` est le travail dans un outil de gestion de contenu où il n'est pas possible d'éditer le CSS sous-jacent et qu'on souhaite malgré tout surcharger la mise en forme avec un style en incise ou une déclaration importante et qu'on ne peut pas faire autrement. Ceci étant dit, il est toujours préférable d'éviter `!important` quand on peut.
 
@@ -230,7 +236,8 @@ Les déclarations conflictuelles seront appliquées dans l'ordre suivant. Celles
 5. Les déclarations importantes des feuilles de styles de l'utilisatrice ou de l'utilisateur.
 6. Les déclarations importantes des feuilles de style du navigateur.
 
-> **Note :** L'ordre de précédence est inversé pour les styles marqués avec `!important`. En effet, les équipes de développement web pourraient vouloir surcharger les feuilles de styles des personnes afin de s'assurer qu'un <i lang="en">design</i> fonctionne correctement. Toutefois, les personnes peuvent avoir de bonnes raisons de surcharger ces styles provenant du site et peuvent le faire à l'aide de `!important` dans leurs règles.
+> [!NOTE]
+> L'ordre de précédence est inversé pour les styles marqués avec `!important`. En effet, les équipes de développement web pourraient vouloir surcharger les feuilles de styles des personnes afin de s'assurer qu'un <i lang="en">design</i> fonctionne correctement. Toutefois, les personnes peuvent avoir de bonnes raisons de surcharger ces styles provenant du site et peuvent le faire à l'aide de `!important` dans leurs règles.
 
 ### Ordre des couches de cascade
 
diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.md b/files/fr/learn/css/building_blocks/debugging_css/index.md
index ba218003c5e532..274d2464c05781 100644
--- a/files/fr/learn/css/building_blocks/debugging_css/index.md
+++ b/files/fr/learn/css/building_blocks/debugging_css/index.md
@@ -78,7 +78,8 @@ Vous pouvez utiliser les outils de développement pour ajouter de nouvelles prop
 
 ![Le panneau des outils de développement avec l'ajout d'une nouvelle propriété aux règles, où on voit la liste ouverte des suggestions d'autocomplétion pour font-](inspecting3-font-size.png)
 
-> **Note :** L'inspecteur de règles contient d'autres fonctionnalités comme la mise en évidence des déclarations avec des valeurs invalides qui sont rayées. Pour en savoir plus, voir [Examiner et éditer le CSS (en anglais)](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html).
+> [!NOTE]
+> L'inspecteur de règles contient d'autres fonctionnalités comme la mise en évidence des déclarations avec des valeurs invalides qui sont rayées. Pour en savoir plus, voir [Examiner et éditer le CSS (en anglais)](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html).
 
 ## Comprendre le modèle de boîtes
 
@@ -94,7 +95,8 @@ L'élément avec la classe `box2` utilise `border-box`, ce qui signifie que le r
 
 ![La section Disposition des outils de développement.](inspecting4-box-model.png)
 
-> **Note :** Pour en savoir plus, voir [Examiner et inspecter le modèle de boîtes (en anglais)](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html).
+> [!NOTE]
+> Pour en savoir plus, voir [Examiner et inspecter le modèle de boîtes (en anglais)](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_the_box_model/index.html).
 
 ## Résoudre des problèmes de spécificité
 
diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md
index 5ee919935328ae..960fcd4d803f62 100644
--- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -33,7 +33,8 @@ Pour demarrer cet exercice, vous devez :
 - Récupérer et enregistrer le [fichier HTML de l'exercice](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html) ainsi que le [fichier image associé](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.
 - Enregistrez le [fichier texte des ressources de la CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.
 
-> **Note :** À défaut, vous pouvez utiliser un site comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet [URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) pour faire pointer l'élément `<img>` sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément `<style>` dans l'élément `head` du document.
+> [!NOTE]
+> À défaut, vous pouvez utiliser un site comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet [URL](http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) pour faire pointer l'élément `<img>` sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément `<style>` dans l'élément `head` du document.
 
 ## Énoncé du projet
 
@@ -67,7 +68,8 @@ Nouveaux jeux de règles à écrire :
 - Écrivez un jeu de règles qui donne à `<p>` dans le pied de page une taille de police effective de 15px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.
 - Comme dernière petite touche, donnez au paragraphe à l'intérieur de `<article>` une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe `<h2>` et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.
 
-> **Note :** Gardez présent à l'esprit que le 2e jeu de règles définit `font-size: 10px;` pour l'élément `<html>` — cela signifie que pour tous les enfants de `<html>`, un `em` vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un `font-size` différent placés entre eux et `<html>` dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).
+> [!NOTE]
+> Gardez présent à l'esprit que le 2e jeu de règles définit `font-size: 10px;` pour l'élément `<html>` — cela signifie que pour tous les enfants de `<html>`, un `em` vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un `font-size` différent placés entre eux et `<html>` dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).
 
 Autres choses à prendre en considération :
 
diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md
index aceadea176b920..656f24fd65d59e 100644
--- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -123,7 +123,8 @@ Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit a
 
 Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture.
 
-> **Note :** Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour `float`. Si vous utilisez **Google Chrome** ou **Microsoft Edge**, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.
+> [!NOTE]
+> Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour `float`. Si vous utilisez **Google Chrome** ou **Microsoft Edge**, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.
 
 ### Faut-il utiliser les propriétés physiques ou logiques&nbsp;?
 
diff --git a/files/fr/learn/css/building_blocks/index.md b/files/fr/learn/css/building_blocks/index.md
index 033470e3fdc8ff..a6eebd517d6667 100644
--- a/files/fr/learn/css/building_blocks/index.md
+++ b/files/fr/learn/css/building_blocks/index.md
@@ -18,13 +18,15 @@ Avant de commencer ce cours, nous vous recommandons :
 3. D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)).
 4. D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps)
 
-> **Note :** Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
 
 ## Guides
 
 Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.
 
-> **Note :** Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.
+> [!NOTE]
+> Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.
 
 - [Cascade and inheritance (Cascade et héritage)](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
   - : Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.
diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.md b/files/fr/learn/css/building_blocks/overflowing_content/index.md
index 392ac8b290db78..eb8d3b94781ef7 100644
--- a/files/fr/learn/css/building_blocks/overflowing_content/index.md
+++ b/files/fr/learn/css/building_blocks/overflowing_content/index.md
@@ -84,7 +84,8 @@ Vous pourriez également faire défiler sur l'axe x en utilisant [`overflow-x`](
 
 Comme pour `scroll`, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.
 
-> **Note :** vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété `overflow` en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à `overflow-x` et le second à `overflow-y`. Sinon, `overflow-x` et `overflow-y` sont définis sur la même valeur. Par exemple, `overflow: scroll hidden` définira `overflow-x` sur `scroll` et `overflow-y` sur `hidden`.
+> [!NOTE]
+> Vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété `overflow` en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à `overflow-x` et le second à `overflow-y`. Sinon, `overflow-x` et `overflow-y` sont définis sur la même valeur. Par exemple, `overflow: scroll hidden` définira `overflow-x` sur `scroll` et `overflow-y` sur `hidden`.
 
 Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez `overflow: auto`. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.
 
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md
index bc6901c70ea424..a3d7305bec57d6 100644
--- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -126,7 +126,8 @@ Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant p
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
 
-> **Note :** Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur `s` nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.
+> [!NOTE]
+> Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur `s` nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.
 
 ## Pas suivants
 
diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 99e9fa41243346..a0a2040b797348 100644
--- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -78,7 +78,8 @@ Les pseudo-éléments se comportent de manière similaire, même s'ils se compor
 ::pseudo-element-name;
 ```
 
-> **Note :** Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.
+> [!NOTE]
+> Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.
 
 Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément \<span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.
 
diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index 61a9f53a029862..663ef878bca327 100644
--- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -99,7 +99,8 @@ Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essent
 
 {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
 
-> **Note :** Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.
+> [!NOTE]
+> Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.
 
 ## Prochain article
 
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md
index ae7d7aa685404a..f7860803835003 100644
--- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md
+++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md
@@ -96,7 +96,8 @@ Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La pre
 
 Cette technique est utilisée pour rendre les images _responsive_, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.
 
-> **Note :** En savoir plus sur [les techniques d'images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+> [!NOTE]
+> En savoir plus sur [les techniques d'images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
 
 ## Unités de la fenêtre d'affichage
 
diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.md b/files/fr/learn/css/building_blocks/the_box_model/index.md
index 16a3bc5d7ac488..2e8e5a4319e463 100644
--- a/files/fr/learn/css/building_blocks/the_box_model/index.md
+++ b/files/fr/learn/css/building_blocks/the_box_model/index.md
@@ -81,7 +81,8 @@ Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décr
 
 Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur `flex` de la propriété `display`. Ainsi, si on donne la propriété `display: flex;` à un élément, son type de positionnement extérieur est "en bloc" (`block`), mais son type de positionnement intérieur est modifié en `flex`. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), dont on reparlera plus tard.
 
-> **Note :** Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la [Disposition en ligne et en bloc](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow).
+> [!NOTE]
+> Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la [Disposition en ligne et en bloc](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow).
 
 Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que `flex`, ou encore [`grid`](/fr/docs/Learn/CSS/CSS_layout/Grids).
 
@@ -166,7 +167,8 @@ L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350
 
 ![Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard.](standard-box-model.png)
 
-> **Note :** La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.
+> [!NOTE]
+> La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.
 
 ### Le modèle de boîte CSS alternatif
 
@@ -195,7 +197,8 @@ html {
 }
 ```
 
-> **Note :** Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !
+> [!NOTE]
+> Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !
 
 ## Manipuler les modèles de boîte
 
@@ -205,7 +208,8 @@ Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent
 
 {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}
 
-> **Note :** vous pouvez trouver une solution [ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model).
+> [!NOTE]
+> Vous pouvez trouver une solution [ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model).
 
 ### Utiliser les outils de développement pour voir le modèle de boîte
 
diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.md b/files/fr/learn/css/building_blocks/values_and_units/index.md
index 0ac808699e1f3b..c4e80001be7c17 100644
--- a/files/fr/learn/css/building_blocks/values_and_units/index.md
+++ b/files/fr/learn/css/building_blocks/values_and_units/index.md
@@ -43,9 +43,11 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en
 
 Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que [`<color>`](/fr/docs/Web/CSS/color_value) ou [`<length>`](/fr/docs/Web/CSS/length). Quand vous voyez le type de valeur `<color>`, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de [`<color>`](/fr/docs/Web/CSS/color_value).
 
-> **Note :** Vous verrez également des valeurs CSS appelées _types de données_. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme _valeur_ se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.
+> [!NOTE]
+> Vous verrez également des valeurs CSS appelées _types de données_. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme _valeur_ se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.
 
-> **Note :** Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété [`color`](/fr/docs/Web/CSS/color), comparée au type de données [\<color>](/fr/docs/Web/CSS/color_value)). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.
+> [!NOTE]
+> Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété [`color`](/fr/docs/Web/CSS/color), comparée au type de données [\<color>](/fr/docs/Web/CSS/color_value)). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.
 
 Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction `rgb()`&nbsp;:
 
@@ -161,7 +163,8 @@ Certains types de valeur acceptent des nombres, sans unité. Une telle propriét
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}}
 
-> **Note :** Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.
+> [!NOTE]
+> Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.
 
 ## Couleur
 
@@ -169,7 +172,8 @@ Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant
 
 Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.
 
-> **Note :** Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.
+> [!NOTE]
+> Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.
 
 ### Mots-clés pour les couleurs
 
@@ -197,7 +201,8 @@ Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB&nbsp;:
 
 Il est aussi possible d'utiliser des couleurs RGBA&nbsp;: celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.
 
-> **Note :** Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété [`opacity`](/fr/docs/Web/CSS/opacity) dont nous avons parlé auparavant. Lorsqu'on utilise `opacity`, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.
+> [!NOTE]
+> Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété [`opacity`](/fr/docs/Web/CSS/opacity) dont nous avons parlé auparavant. Lorsqu'on utilise `opacity`, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.
 
 Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes&nbsp;: vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.
 
@@ -205,7 +210,8 @@ Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc engloban
 
 **Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.**
 
-> **Note :** Avec la spécification <i lang="en">CSS Colors Level 4</i>, `rgba()` est un alias pour `rgb()` et `hsla()` est un alias pour `hsl()` (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions `rgba()` à des fonctions `rgb()` pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.
+> [!NOTE]
+> Avec la spécification <i lang="en">CSS Colors Level 4</i>, `rgba()` est un alias pour `rgb()` et `hsla()` est un alias pour `hsl()` (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions `rgba()` à des fonctions `rgb()` pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.
 
 ### Valeurs HSL et HSLA
 
@@ -233,7 +239,8 @@ Voici un exemple où on utilise une image et un dégradé pour la propriété CS
 
 {{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}}
 
-> **Note :** il existe d'autres valeurs possibles pour le type `<image>`, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données [`<image>`](/fr/docs/Web/CSS/image) si vous voulez en savoir plus.
+> [!NOTE]
+> Il existe d'autres valeurs possibles pour le type `<image>`, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données [`<image>`](/fr/docs/Web/CSS/image) si vous voulez en savoir plus.
 
 ## Position
 
diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md
index a3e04a1cdc162d..ca20eee73aac11 100644
--- a/files/fr/learn/css/css_layout/flexbox/index.md
+++ b/files/fr/learn/css/css_layout/flexbox/index.md
@@ -93,7 +93,8 @@ flex-direction: column;
 
 Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.
 
-> **Note :** Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi&nbsp;!
+> [!NOTE]
+> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi&nbsp;!
 
 ## Enveloppement
 
diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.md b/files/fr/learn/css/css_layout/flexbox_skills/index.md
index 57c81b623d259b..a1078c8df640ba 100644
--- a/files/fr/learn/css/css_layout/flexbox_skills/index.md
+++ b/files/fr/learn/css/css_layout/flexbox_skills/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Flexbox_skills
 
 Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.
 
-> **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs ci-dessous ou, si vous le préférez, sur un site comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/).
+> [!NOTE]
+> Vous pouvez tester des solutions dans les éditeurs interactifs ci-dessous ou, si vous le préférez, sur un site comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/).
 >
 > N'hésitez pas à nous contacter si vous avez besoin d'aide — voir la section [Évaluation ou aide supplémentaire](#évaluation_ou_aide_supplémentaire) au bas de cette page.
 
@@ -21,7 +22,8 @@ Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé&nb
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (1re mise en page)](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (1re mise en page)](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html).
 
 ## Disposition flexible 2
 
@@ -37,7 +39,8 @@ Questions supplémentaires&nbsp;:
 
 - Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres&nbsp;?
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (2e mise en page)](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox2-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (2e mise en page)](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox2-download.html).
 
 ## Disposition flexible 3
 
@@ -49,7 +52,8 @@ Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé&nb
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (3e mise en page)](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (3e mise en page)](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html).
 
 ## Disposition flexible 4
 
@@ -61,7 +65,8 @@ Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé&nb
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html).
 
 ## Évaluation ou aide supplémentaire
 
diff --git a/files/fr/learn/css/css_layout/grid_skills/index.md b/files/fr/learn/css/css_layout/grid_skills/index.md
index 544ccda49fc6d6..fb2bb5c44a189d 100644
--- a/files/fr/learn/css/css_layout/grid_skills/index.md
+++ b/files/fr/learn/css/css_layout/grid_skills/index.md
@@ -7,7 +7,8 @@ slug: Learn/CSS/CSS_layout/Grid_skills
 
 Le but de cette tâche est de vous faire travailler avec « _CSS Grid Layout_ » (modèle de disposition en grille) et d'évaluer votre compréhension du comportement d'une grille et des éléments de grille. Vous allez compléter trois petites tâches en utilisant différents éléments des grilles CSS.
 
-> **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs ci-dessous ou, si vous le préférez, sur un site comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/).
+> [!NOTE]
+> Vous pouvez tester des solutions dans les éditeurs interactifs ci-dessous ou, si vous le préférez, sur un site comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/).
 >
 > N'hésitez pas à nous contacter si vous avez besoin d'aide — voir la section [Évaluation ou aide supplémentaire](#évaluation_ou_aide_supplémentaire) au bas de cette page.
 
@@ -21,7 +22,8 @@ Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé&nb
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (disposition en grille 1)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (disposition en grille 1)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html).
 
 ## Disposition en grille 2
 
@@ -37,7 +39,8 @@ Questions supplémentaires&nbsp;:
 
 - Pouvez-vous maintenant afficher le premier élément (`.item1`) en avant sans modifier l'ordre des éléments dans le code&nbsp;?
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (disposition en grille 2)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (disposition en grille 2)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html).
 
 ## Disposition en grille 3
 
@@ -49,7 +52,8 @@ Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé&nb
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (disposition en grille 3)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (disposition en grille 3)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html).
 
 ## Mise en page avec Flexbox et grilles 4
 
@@ -61,7 +65,8 @@ Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé&nb
 
 {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}
 
-> **Remarque :** Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (mise en page avec Flexbox et Grilles 4)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html).
+> [!CALLOUT]
+> Si vous voulez utiliser un autre éditeur de code, récupérez le code du [fichier de démarrage pour cette tâche (mise en page avec Flexbox et Grilles 4)](https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html).
 
 ## Évaluation ou aide supplémentaire
 
diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md
index 18ab8b91182524..01f6b0c2d0a830 100644
--- a/files/fr/learn/css/css_layout/grids/index.md
+++ b/files/fr/learn/css/css_layout/grids/index.md
@@ -166,7 +166,8 @@ body {
 
 {{ EmbedLiveSample('', '100%', 400) }}
 
-> **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.
+> [!NOTE]
+> L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.
 
 ### Espaces entre pistes
 
@@ -215,7 +216,8 @@ body {
 
 {{ EmbedLiveSample('', '100%', 400) }}
 
-> **Note :** Les propriétés `-gap` (`column-gap`, `row-gap` et `gap`) étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour «&nbsp;blinder&nbsp;» votre code&nbsp;:
+> [!NOTE]
+> Les propriétés `-gap` (`column-gap`, `row-gap` et `gap`) étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour «&nbsp;blinder&nbsp;» votre code&nbsp;:
 >
 > ```css
 > .container {
@@ -488,7 +490,8 @@ aside {
 
 {{ EmbedLiveSample('', '100%', 600) }}
 
-> **Note :** Vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de [trame implicite](/fr/docs/Glossary/Grid).
+> [!NOTE]
+> Vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de [trame implicite](/fr/docs/Glossary/Grid).
 
 ## Placer avec grid-template-areas
 
diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md
index 369bf37353e9c0..c2cfa0149c9665 100644
--- a/files/fr/learn/css/css_layout/index.md
+++ b/files/fr/learn/css/css_layout/index.md
@@ -7,7 +7,7 @@ slug: Learn/CSS/CSS_layout
 
 À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que «&nbsp;flexbox&nbsp;», les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.
 
-> **Remarque :**
+> [!CALLOUT]
 >
 > Vous cherchez à devenir développeuse ou développeur web front-end&nbsp;?
 >
@@ -23,7 +23,8 @@ Avant de commencer ce module, vous devriez déjà :
 2. Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans [Introduction à CSS](/fr/docs/Learn/CSS/First_steps).
 3. Savoir [mettre en forme les boîtes.](/fr/docs/Learn/CSS/Building_blocks)
 
-> **Note :** Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/)
+> [!NOTE]
+> Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/)
 
 ## Guides
 
diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md
index d763d3d5f60382..9a6accbbb5a244 100644
--- a/files/fr/learn/css/css_layout/introduction/index.md
+++ b/files/fr/learn/css/css_layout/introduction/index.md
@@ -67,7 +67,8 @@ Notez que le HTML est affiché dans l'ordre exact où il est dans le code source
 
 Les éléments disposés en empilement sont désignés comme étant des éléments _blocs_, par opposition aux éléments _en ligne_ qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.
 
-> **Note :** «&nbsp;Block Direction&nbsp;» (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La «&nbsp;Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.
+> [!NOTE]
+> «&nbsp;Block Direction&nbsp;» (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La «&nbsp;Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.
 
 Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal&nbsp;; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.
 
@@ -163,7 +164,8 @@ En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe de
 
 {{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}
 
-> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox&nbsp;: pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
+> [!NOTE]
+> Ce n'est qu'une très brève introduction aux possibilités de Flexbox&nbsp;: pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox).
 
 ## Disposition en trame
 
@@ -257,7 +259,8 @@ Une fois la trame créée, vous pouvez y placer explicitement les éléments au
 
 {{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}
 
-> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées&nbsp;; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids).
+> [!NOTE]
+> Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées&nbsp;; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids).
 
 La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.
 
@@ -323,7 +326,8 @@ p {
 
 {{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}
 
-> **Note :** Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés [float et clear](/fr/docs/Learn/CSS/CSS_layout/Floats). Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les [Méthodes de mise en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods).
+> [!NOTE]
+> Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés [float et clear](/fr/docs/Learn/CSS/CSS_layout/Floats). Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les [Méthodes de mise en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods).
 
 ## Techniques de positionnement
 
@@ -626,7 +630,8 @@ body {
 
 {{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}
 
-> **Note :** pour plus de précisions à propos du positionnement, voir l'article [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning).
+> [!NOTE]
+> Pour plus de précisions à propos du positionnement, voir l'article [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning).
 
 ## Les tableaux CSS
 
diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
index 55a296a82dc24b..b6162e2f434f33 100644
--- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
@@ -177,7 +177,8 @@ div:nth-of-type(2) {
 
 Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une **disposition fluide**, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.
 
-> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)).
+> [!NOTE]
+> Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)).
 
 ## Ancienne création d'un cadre de trames
 
@@ -266,7 +267,8 @@ L'étape suivante consiste à créer un règle pour la classe `.col` la faisant
 
 La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.
 
-> **Note :** Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.
+> [!NOTE]
+> Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.
 
 Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.
 
@@ -313,7 +315,8 @@ Ajoutez ce qui suit en bas de la CSS&nbsp;:
 
 Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.
 
-> **Note :** Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)).
+> [!NOTE]
+> Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)).
 
 Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci&nbsp;:
 
@@ -428,7 +431,8 @@ Mettez à jour le bloc bas des règles CSS avec ce qui suit&nbsp;:
 
 Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.
 
-> **Note :** Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre [version terminée sur GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (voir aussi celle [s'exécutant en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)).
+> [!NOTE]
+> Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre [version terminée sur GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (voir aussi celle [s'exécutant en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)).
 
 ### Faciliter les calculs avec la fonction calc()
 
@@ -480,9 +484,11 @@ Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navi
 }
 ```
 
-> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)).
+> [!NOTE]
+> Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)).
 
-> **Note :** Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.
+> [!NOTE]
+> Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.
 
 ### Systèmes de trames «&nbsp;sémantiques&nbsp;» vs. «&nbsp;non sémantiques&nbsp;»
 
@@ -496,7 +502,8 @@ Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, p
 }
 ```
 
-> **Note :** Si vous deviez utiliser un préprocesseur tel que [Sass](http://sass-lang.com/), vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.
+> [!NOTE]
+> Si vous deviez utiliser un préprocesseur tel que [Sass](http://sass-lang.com/), vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.
 
 ### Décalage du conteneur d'une trame
 
@@ -534,13 +541,15 @@ remplacez‑le par&nbsp;:
 <div class="col span5 offset-by-one">14</div>
 ```
 
-> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage&nbsp;!
+> [!NOTE]
+> Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage&nbsp;!
 
 Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci&nbsp;:
 
 ![](offset-grid-finished.png)
 
-> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two`&nbsp;?
+> [!NOTE]
+> Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two`&nbsp;?
 
 ### Limitations des trames de boîtes flottantes
 
@@ -691,7 +700,8 @@ Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre
 
 Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.
 
-> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
+> [!NOTE]
+> Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
 
 Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe «&nbsp;three columns&nbsp;» que l'on ajouterait.
 
diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md
index 1839b32f19de61..6dac186726764c 100644
--- a/files/fr/learn/css/css_layout/positioning/index.md
+++ b/files/fr/learn/css/css_layout/positioning/index.md
@@ -51,7 +51,8 @@ Puis ajoutez la règle suivante au bas de votre CSS&nbsp;:
 
 Si vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut&nbsp;!
 
-> **Note :** Vous pouvez voir cet exemple fonctionner sur la page [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source correspondant](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html)).
+> [!NOTE]
+> Vous pouvez voir cet exemple fonctionner sur la page [`1_static-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source correspondant](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/1_static-positioning.html)).
 
 ## Positionnement relatif
 
@@ -72,7 +73,8 @@ top: 30px;
 left: 30px;
 ```
 
-> **Note :** Les valeurs de ces propriétés peuvent prendre n'importe quelle [unité](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) logiquement attendue ici&nbsp;: pixels, mm, rem, %, etc.
+> [!NOTE]
+> Les valeurs de ces propriétés peuvent prendre n'importe quelle [unité](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) logiquement attendue ici&nbsp;: pixels, mm, rem, %, etc.
 
 Si vous enregistrez et actualisez maintenant, vous verrez ce résultat&nbsp;:
 
@@ -140,7 +142,8 @@ span {
 
 Cool, n'est-ce pas&nbsp;? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini `top` (haut) et `left` (gauche)&nbsp;? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposée. Par exemple, si nous spécifions `top: 30px;`, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.
 
-> **Note :** À ce stade de l'article, vous pouvez retrouver un exemple ici [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html)).
+> [!NOTE]
+> À ce stade de l'article, vous pouvez retrouver un exemple ici [`2_relative-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/2_relative-positioning.html)).
 
 ## Positionnement absolu
 
@@ -220,11 +223,14 @@ Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû
 
 Ensuite, notez que la position de l'élément a changé. [`top`](/fr/docs/Web/CSS/top), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`right`](/fr/docs/Web/CSS/right) se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de «&nbsp;l'élément conteneur&nbsp;» (il s'agit dans ce cas, l'élément conteneur est le bloc conteneur initial, voir la section ci-dessous pour plus d'informations).
 
-> **Note :** Vous pouvez utiliser [`top`](/fr/docs/Web/CSS/top), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`right`](/fr/docs/Web/CSS/right) pour redimensionner les éléments selon vos besoins. Définissez `top: 0; bottom: 0; left: 0; right: 0;` et `margin: 0;` sur les éléments à positionner et voyez ce qui se produit&nbsp;! Réinitialisez le tout ensuite…
+> [!NOTE]
+> Vous pouvez utiliser [`top`](/fr/docs/Web/CSS/top), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`right`](/fr/docs/Web/CSS/right) pour redimensionner les éléments selon vos besoins. Définissez `top: 0; bottom: 0; left: 0; right: 0;` et `margin: 0;` sur les éléments à positionner et voyez ce qui se produit&nbsp;! Réinitialisez le tout ensuite…
 
-> **Note :** Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.
+> [!NOTE]
+> Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.
 
-> **Note :** À ce stade de l'article, vous pouvez voir un exemple ici [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html)).
+> [!NOTE]
+> À ce stade de l'article, vous pouvez voir un exemple ici [`3_absolute-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/3_absolute-positioning.html)).
 
 ### Contextes de positionnement
 
@@ -305,7 +311,8 @@ span {
 
 À présent, l'élément a été positionné par rapport à l'élément [`<body>`](/fr/docs/Web/HTML/Element/body).
 
-> **Note :** À ce stade, vous pouvez voir cet exemple ici [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/4_positioning-context.html)).
+> [!NOTE]
+> À ce stade, vous pouvez voir cet exemple ici [`4_positioning-context.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/4_positioning-context.html)).
 
 ### Introduction au `z-index`
 
@@ -409,7 +416,8 @@ p:nth-of-type(1) {
 
 Notez que `z-index` n'accepte que des valeurs d'index sans unité&nbsp;; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.
 
-> **Note :** Sur ce sujet, vous pouvez voir l'exemple [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)).
+> [!NOTE]
+> Sur ce sujet, vous pouvez voir l'exemple [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)).
 
 ## Positionnement fixe
 
@@ -515,7 +523,8 @@ p:nth-of-type(1) {
 
 {{EmbedLiveSample('', '100%', 400)}}
 
-> **Note :** À ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/6_fixed-positioning.html)).
+> [!NOTE]
+> À ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/6_fixed-positioning.html)).
 
 ## Positionnement adhérent (<i lang="en">sticky</i>)
 
@@ -652,7 +661,8 @@ body {
 
 Les éléments ainsi positionnés «&nbsp;adhèrent&nbsp;» au plus proche ancêtre qui dispose d'un mécanisme de défilement, ce qui est déterminé d'après la propriété [position](/fr/docs/Web/CSS/position) de ses ancêtres.
 
-> **Note :** À ce stade de l'article, vous pouvez voir un exemple en direct ici [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html)).
+> [!NOTE]
+> À ce stade de l'article, vous pouvez voir un exemple en direct ici [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html)).
 
 ## Testez vos compétences&nbsp;!
 
diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md
index c1af0d43cb1e5d..4c5a4ad03cc674 100644
--- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md
@@ -32,11 +32,13 @@ Le premier exemple que nous allons examiner est une boîte d'information à ongl
 
 ![](tabbed-info-box.png)
 
-> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
+> [!NOTE]
+> Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
 
 On pourrait se demander&nbsp;: «&nbsp;pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet&nbsp;?&nbsp;». Ce code serait en effet plus simple, mais dans ce cas, chaque «&nbsp;page&nbsp;» séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites «&nbsp;à page unique&nbsp;» (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.
 
-> **Note :** Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.
+> [!NOTE]
+> Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.
 
 Pour commencer, effectuez une copie locale du fichier HTML de départ — [info-box-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html). Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :
 
@@ -135,7 +137,8 @@ On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut a
 }
 ```
 
-> **Note :** On utilise ici un sélecteur de descendants avec `.info-box` au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.
+> [!NOTE]
+> On utilise ici un sélecteur de descendants avec `.info-box` au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.
 
 Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) est placée à `none` afin de ne plus avoir les puces et [`width`](/fr/docs/Web/CSS/width) vaut `150px` afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) ont [`display`](/fr/docs/Web/CSS/display) avec la valeur `inline-block` afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.
 
@@ -257,7 +260,8 @@ Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'i
 
 ![](fixed-info-box.png)
 
-> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
+> [!NOTE]
+> Vous pouvez voir l'exemple fini en démonstration sur la page [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
 
 Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) depuis le dépôt GitHub.
 
@@ -303,7 +307,8 @@ Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu pr
 </section>
 ```
 
-> **Note :** N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.
+> [!NOTE]
+> N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.
 
 ### Modifications au CSS existant
 
@@ -346,7 +351,8 @@ Voilà ce à quoi ressemblera notre exemple terminé&nbsp;:
 
 ![](hidden-sliding-panel.png)
 
-> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
+> [!NOTE]
+> Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.
 
 Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier&nbsp;:
 
@@ -358,7 +364,8 @@ Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://gi
 
 Pour commencer, nous avons un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Les éléments `<label>` sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher `<input>` grâce aux attributs `for` et `id`.
 
-> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information&nbsp;: il représente le bouton qu'on utilisera pour afficher/masquer le panneau.
+> [!NOTE]
+> Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information&nbsp;: il représente le bouton qu'on utilisera pour afficher/masquer le panneau.
 
 Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments `<label>` est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse [bidouille de la case à cocher](https://css-tricks.com/the-checkbox-hack/) qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément [`<aside>`](/fr/docs/Web/HTML/Element/aside) qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).
 
diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md
index 121032769c7115..4080a74948a49c 100644
--- a/files/fr/learn/css/css_layout/responsive_design/index.md
+++ b/files/fr/learn/css/css_layout/responsive_design/index.md
@@ -129,7 +129,8 @@ Dans l'exemple qui suit, les éléments flexibles prendront le même espace dans
 }
 ```
 
-> **Note :** Nous avons également construit un exemple plus concret d'une disposition adaptative utilisant les boîtes flexibles. Dans celui-ci, nous utilisons un point d'arrêt pour passer sur plusieurs colonnes lorsque l'écran est suffisamment large et nous limitons la taille du contenu principal à l'aide de la propriété [`max-width`](/fr/docs/Web/CSS/max-width). Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), et [le code source correspondant sur GitHub](https://github.com/mdn/css-examples/blob/main/learn/rwd/flex-based-rwd.html).
+> [!NOTE]
+> Nous avons également construit un exemple plus concret d'une disposition adaptative utilisant les boîtes flexibles. Dans celui-ci, nous utilisons un point d'arrêt pour passer sur plusieurs colonnes lorsque l'écran est suffisamment large et nous limitons la taille du contenu principal à l'aide de la propriété [`max-width`](/fr/docs/Web/CSS/max-width). Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), et [le code source correspondant sur GitHub](https://github.com/mdn/css-examples/blob/main/learn/rwd/flex-based-rwd.html).
 
 ### Grilles CSS
 
@@ -144,7 +145,8 @@ Pour en savoir plus sur cette approche utilisant les grilles, voir [les grilles
 }
 ```
 
-> **Note :** La version de notre exemple avec les grilles CSS est encore plus simple, car on définit les colonnes sur le conteneur `.wrapper`. Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), et [le code source correspondant](https://github.com/mdn/css-examples/blob/main/learn/rwd/grid-based-rwd.html).
+> [!NOTE]
+> La version de notre exemple avec les grilles CSS est encore plus simple, car on définit les colonnes sur le conteneur `.wrapper`. Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), et [le code source correspondant](https://github.com/mdn/css-examples/blob/main/learn/rwd/grid-based-rwd.html).
 
 ## Images/média <i lang="en">responsive</i>
 
@@ -206,7 +208,8 @@ Sur ordinateur, on voit un titre plus grand&nbsp;:
 
 ![Une disposition sur deux colonnes avec un grand titre.](mdn-rwd-font-desktop.png)
 
-> **Note :** Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), et [le code source correspondant](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-rwd.html).
+> [!NOTE]
+> Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), et [le code source correspondant](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-rwd.html).
 
 Comme on peut le voir ici, les requêtes média ne se limitent pas au changement de la disposition, on peut les utiliser afin d'adapter tout élément qui concourt à l'attractivité de la page sur les différents écrans.
 
@@ -232,7 +235,8 @@ h1 {
 
 Avec cette approche, on peut définir à un seul endroit la taille de la police du titre plutôt que de la définir d'une part pour les mobiles et d'autre part dans d'autres requêtes média. Définie ainsi, la taille de la police augmente graduellement avec la taille de la zone d'affichage.
 
-> **Note :** Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), et [le code source correspondant](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html).
+> [!NOTE]
+> Voir [l'exemple en <i lang="en">live</i>](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), et [le code source correspondant](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html).
 
 ## La balise méta `viewport`
 
diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
index 1cf9e851318b04..94a2b3ceabfaac 100644
--- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md
@@ -100,7 +100,8 @@ Dans l'exemple ci-dessous, nous avons fait flotter trois `<div>` pour les affich
 
 {{EmbedLiveSample('Exemple', '', '150')}}
 
-> **Note :** La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.
+> [!NOTE]
+> La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.
 
 ### Méthodes de substitution
 
diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md
index e6c62893bcceb0..6a90e21e5e7880 100644
--- a/files/fr/learn/css/first_steps/getting_started/index.md
+++ b/files/fr/learn/css/first_steps/getting_started/index.md
@@ -69,7 +69,8 @@ Notre point de départ est un document HTML. Pour suivre la leçon en travaillan
 </html>
 ```
 
-> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.
+> [!NOTE]
+> Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.
 
 ## Ajouter CSS à notre document
 
@@ -214,7 +215,8 @@ L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajout
 
 {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-> **Note :** A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant.
+> [!NOTE]
+> A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant.
 
 ## Mise en forme basée sur l'état
 
@@ -244,7 +246,8 @@ Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents
 
 Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.
 
-> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y)&nbsp;: les règles pour que nos pages soient compréhensibles et utilisables par tous.
+> [!NOTE]
+> Dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y)&nbsp;: les règles pour que nos pages soient compréhensibles et utilisables par tous.
 >
 > Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.
 >
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.md b/files/fr/learn/css/first_steps/how_css_is_structured/index.md
index c62eaff1f6e19d..a7ae3ea7d7c34f 100644
--- a/files/fr/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.md
@@ -203,7 +203,8 @@ h1, h2, .intro
 
 Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !
 
-> **Note :** Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur [les sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors), dans un prochain cours.
+> [!NOTE]
+> Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur [les sélecteurs CSS](/fr/docs/Learn/CSS/Building_blocks/Selectors), dans un prochain cours.
 
 ### Spécificité
 
@@ -272,9 +273,11 @@ Définir les propriétés CSS sur des valeurs spécifiques est la fonction princ
 - **[`color`](/fr/docs/Web/CSS/color)**
 - **[`border`](/fr/docs/Web/CSS/border)**
 
-> **Attention :** Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme _invalide_ et complètement ignorée par le moteur CSS du navigateur.
+> [!WARNING]
+> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme _invalide_ et complètement ignorée par le moteur CSS du navigateur.
 
-> **Attention :** En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit _toujours_ être notée `color`. `couleur` ne fonctionnera pas.
+> [!WARNING]
+> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit _toujours_ être notée `color`. `couleur` ne fonctionnera pas.
 
 ### Fonctions
 
@@ -408,7 +411,8 @@ Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à
 
 **Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.**
 
-> **Attention :** Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.
+> [!WARNING]
+> Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.
 
 ## Commentaires
 
diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md
index bb75ff0d979751..fdb0b29cd75ae3 100644
--- a/files/fr/learn/css/first_steps/index.md
+++ b/files/fr/learn/css/first_steps/index.md
@@ -19,7 +19,8 @@ Avant de commencer ce module, vous devriez avoir :
 2. Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers)&nbsp;;
 3. Une familiarité avec HTML, comme discuté dans le module d'[introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML).
 
-> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/).
+> [!NOTE]
+> Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/).
 
 ## Guides
 
diff --git a/files/fr/learn/css/first_steps/styling_a_biography_page/index.md b/files/fr/learn/css/first_steps/styling_a_biography_page/index.md
index b0eecb90b77c9a..1148ce19145634 100644
--- a/files/fr/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/fr/learn/css/first_steps/styling_a_biography_page/index.md
@@ -30,7 +30,8 @@ Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons préc
 
 Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées.
 
-> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page.
+> [!NOTE]
+> Ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page.
 
 ## Travailler avec CSS
 
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md
index 2a561e9969051f..414b8c8bfac8cb 100644
--- a/files/fr/learn/css/first_steps/what_is_css/index.md
+++ b/files/fr/learn/css/first_steps/what_is_css/index.md
@@ -48,7 +48,8 @@ Les **documents** en question sont des fichiers texte structurés avec un langag
 
 **Présenter** un document à l'utilisateur signifie convertir ce document dans une forme utilisable par le public visé. Les [navigateurs](/fr/docs/Glossary/Browser), tels [Firefox](/fr/docs/Glossary/Mozilla_Firefox), [Chrome](/fr/docs/Glossary/Google_Chrome), [Safari](/fr/docs/Glossary/Apple_Safari) ou [Edge](/fr/docs/Glossary/Microsoft_Edge) sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.
 
-> **Note :** Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.
+> [!NOTE]
+> Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables.
 
 CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple, changer [la couleur](/fr/docs/Web/CSS/color_value) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple, [transformer un texte affiché sur une colonne en une composition](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/CSS_Animations). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.
 
@@ -84,7 +85,8 @@ p {
 
 On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.
 
-> **Note :** Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes «&nbsp;mdn _nom-de-propriété-ou-fonctionnalité-css_&nbsp;» dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez, par exemple, tester les requêtes «&nbsp;mdn color&nbsp;» et «&nbsp;mdn font-size&nbsp;»&nbsp;!
+> [!NOTE]
+> Sur MDN, dans [la référence CSS](/fr/docs/Web/CSS/Reference), vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes «&nbsp;mdn _nom-de-propriété-ou-fonctionnalité-css_&nbsp;» dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez, par exemple, tester les requêtes «&nbsp;mdn color&nbsp;» et «&nbsp;mdn font-size&nbsp;»&nbsp;!
 
 ## Modules CSS
 
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md
index f23d2fbaeae423..49aefdf52cf404 100644
--- a/files/fr/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md
@@ -121,7 +121,8 @@ Passons à la manipulation :
 
 {{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}
 
-> **Note :** Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter [les excellents motifs CSS de Lea Verou](https://lea.verou.me/css3patterns/). Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire [notre article dédié](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients).
+> [!NOTE]
+> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter [les excellents motifs CSS de Lea Verou](https://lea.verou.me/css3patterns/). Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire [notre article dédié](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients).
 
 ## Les pseudo-éléments
 
diff --git a/files/fr/learn/css/howto/generated_content/index.md b/files/fr/learn/css/howto/generated_content/index.md
index 695ba043b7244d..082d5456018fa2 100644
--- a/files/fr/learn/css/howto/generated_content/index.md
+++ b/files/fr/learn/css/howto/generated_content/index.md
@@ -9,7 +9,8 @@ Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du conten
 
 L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.
 
-> **Note :** Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.
+> [!NOTE]
+> Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.
 
 Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.
 
diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md
index 8d82e815ae8eb9..a2da563b26d18e 100644
--- a/files/fr/learn/css/styling_text/fundamentals/index.md
+++ b/files/fr/learn/css/styling_text/fundamentals/index.md
@@ -34,14 +34,16 @@ Dans cet article, nous allons commencer le voyage vers la maîtrise des styles d
 
 Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.
 
-> **Note :** si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre.
+> [!NOTE]
+> Si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre.
 
 Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :
 
 - **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.
 - **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu.
 
-> **Note :** Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) .
+> [!NOTE]
+> Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) .
 
 ## Fontes
 
@@ -62,7 +64,8 @@ Passons directement aux propriétés pour le style des polices. Dans cet exemple
 </p>
 ```
 
-> **Note :** (NdT : Extrait et traduction _approximative_ de la chanson _Tommy the Cat_ du groupe [Primus)](<https://fr.wikipedia.org/wiki/Primus_(groupe)>)
+> [!NOTE]
+> (NdT : Extrait et traduction _approximative_ de la chanson _Tommy the Cat_ du groupe [Primus)](<https://fr.wikipedia.org/wiki/Primus_(groupe)>)
 
 Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/css/styling-text/fundamentals/) sur Github (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html)).
 
@@ -128,9 +131,11 @@ La liste des polices web vraiment sûres changera à mesure que les systèmes d'
 | Trebuchet MS    | sans-serif     | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.                                                                                         |
 | Verdana         | sans-serif     |                                                                                                                                                                                                                                               |
 
-> **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.
+> [!NOTE]
+> Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.
 
-> **Note :** Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : **les polices web**. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.
+> [!NOTE]
+> Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : **les polices web**. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.
 
 #### Polices par défaut
 
@@ -160,7 +165,8 @@ Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si
 
 Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !
 
-> **Note :** Les noms de police comportant plus d'un mot — comme `Trebuchet MS` — doivent être entourés de guillemets, par exemple `"Trebuchet MS"`.
+> [!NOTE]
+> Les noms de police comportant plus d'un mot — comme `Trebuchet MS` — doivent être entourés de guillemets, par exemple `"Trebuchet MS"`.
 
 #### Un exemple de font-family
 
@@ -348,7 +354,8 @@ Les 4 propriétés sont les suivantes :
 3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les [unités de longueur et de taille](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size) des CSS.
 4. La couleur de l'ombre, qui peut prendre toute [unité de couleur CSS](/fr/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). Si elle n'est pas définie, c'est la couleur noire par défaut.
 
-> **Note :** Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple `-1px -1px`.
+> [!NOTE]
+> Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple `-1px -1px`.
 
 #### Ombres multiples
 
@@ -409,7 +416,8 @@ p {
 
 {{ EmbedLiveSample('', '100%', 250) }}
 
-> **Note :** Vous pouvez voir plus d'exemples intéressants de `text-shadow` dans l'article de Sitepoint [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/) (Clair de lune avec text-shadow).
+> [!NOTE]
+> Vous pouvez voir plus d'exemples intéressants de `text-shadow` dans l'article de Sitepoint [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/) (Clair de lune avec text-shadow).
 
 ## Mise en page du texte
 
diff --git a/files/fr/learn/css/styling_text/index.md b/files/fr/learn/css/styling_text/index.md
index c6790299dc6862..b109248b3b23e6 100644
--- a/files/fr/learn/css/styling_text/index.md
+++ b/files/fr/learn/css/styling_text/index.md
@@ -11,7 +11,8 @@ Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la
 
 Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans [Introduction à HTML](/fr/Apprendre/HTML/Introduction_à_HTML), et être à l'aise avec les fondamentaux de CSS étudiés dans [Introduction à CSS](/fr/Apprendre/CSS/Introduction_à_CSS).
 
-> **Note :** Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
 
 ## Guides
 
diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md
index cd5b6271a11f6e..7609ff007e2ac0 100644
--- a/files/fr/learn/css/styling_text/styling_links/index.md
+++ b/files/fr/learn/css/styling_text/styling_links/index.md
@@ -72,7 +72,8 @@ p {
 
 {{ EmbedLiveSample('', '100%', 120) }}
 
-> **Note :** Tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.
+> [!NOTE]
+> Tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.
 
 Vous remarquerez quelques petites choses en explorant les styles par défaut :
 
@@ -107,7 +108,8 @@ Les styles par défaut peuvent être désactivés/modifiés en utilisant les pro
 - {{cssxref ("cursor")}} pour le style du pointeur de la souris — vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ;
 - {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation.
 
-> **Note :** Vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !
+> [!NOTE]
+> Vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !
 
 ### Mise en forme de quelques liens
 
@@ -384,7 +386,8 @@ Un dernier mot : comment avons-nous sélectionné uniquement les liens externes
 
 Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !
 
-> **Note :** Ne vous inquiétez pas si vous n'êtes pas encore familier avec les [arrières-plans](/fr/docs/Learn/CSS/Building_blocks) et le [design adaptif _(responsive web design)_](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) ; ceux-ci sont expliqués par ailleurs.
+> [!NOTE]
+> Ne vous inquiétez pas si vous n'êtes pas encore familier avec les [arrières-plans](/fr/docs/Learn/CSS/Building_blocks) et le [design adaptif _(responsive web design)_](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) ; ceux-ci sont expliqués par ailleurs.
 
 ## Mise en forme de liens comme des boutons
 
@@ -468,7 +471,8 @@ Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus int
   - Maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'`<ul>` et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier `<a>` dans la liste, et en supprime la marge ; terminé !
   - Les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir.
 
-> **Note :** Vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur [Fighting the space between inline block elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/).
+> [!NOTE]
+> Vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur [Fighting the space between inline block elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/).
 
 ## Résumé
 
diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md
index 96e9fc456fb51d..db4300b1251131 100644
--- a/files/fr/learn/css/styling_text/styling_lists/index.md
+++ b/files/fr/learn/css/styling_text/styling_lists/index.md
@@ -324,7 +324,8 @@ L'attribut [`reversed`](/fr/docs/Web/HTML/Element/ol#attr-reversed) inverse la n
 
 {{ EmbedLiveSample('', '100%', 150) }}
 
-> **Note :** S'il existe plus d'éléments dans une liste inversée que la valeur de l'attribut `start`, la numérotation continuera à zéro, puis à des valeurs négatives.
+> [!NOTE]
+> S'il existe plus d'éléments dans une liste inversée que la valeur de l'attribut `start`, la numérotation continuera à zéro, puis à des valeurs négatives.
 
 ### Valeurs individualisées
 
@@ -351,7 +352,8 @@ L'attribut [`value`](/fr/docs/Web/HTML/Element/ol#attr-value) vous permet de num
 
 {{ EmbedLiveSample('', '100%', 150) }}
 
-> **Note :** Même si vous utilisez une propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`.
+> [!NOTE]
+> Même si vous utilisez une propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut `value`.
 
 ## Apprentissage actif&nbsp;: définir le style d'une liste imbriquée
 
diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md
index 6aa4d58dfd042b..1ea993b1801f2b 100644
--- a/files/fr/learn/css/styling_text/web_fonts/index.md
+++ b/files/fr/learn/css/styling_text/web_fonts/index.md
@@ -72,7 +72,8 @@ L'utilisation des polices n'est généralement pas gratuite. Vous devez payer po
 1. Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu.
 2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.
 
-> **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
+> [!NOTE]
+> La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !
 
 ## Apprentissage actif&nbsp;: un exemple de fonte web
 
@@ -92,7 +93,8 @@ Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fo
 
 Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.
 
-> **Note :** Dans la partie «&nbsp;Find fonts&nbsp;» dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
+> [!NOTE]
+> Dans la partie «&nbsp;Find fonts&nbsp;» dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.
 
 ### Créer le code requis
 
@@ -129,7 +131,8 @@ Vous devriez obtenir une page de démonstration avec les belles polices impléme
 
 ![](web-font-example.png)
 
-> **Note :** Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) et [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) (lancez l'[exemple terminé directement](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)).
+> [!NOTE]
+> Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) et [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) (lancez l'[exemple terminé directement](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)).
 
 ## Utiliser un service de polices en ligne
 
@@ -144,7 +147,8 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa
 5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS.
 6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML.
 
-> **Note :** Vous pourrez trouver une version complétée sur [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) et [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si vous avez besoin de vérifier votre travail par rapport au nôtre ([voir en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)).
+> [!NOTE]
+> Vous pourrez trouver une version complétée sur [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) et [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), si vous avez besoin de vérifier votre travail par rapport au nôtre ([voir en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)).
 
 ## @font-face plus en détail
 
@@ -171,7 +175,8 @@ Elle est désignée sous le vocable «&nbsp;bulletproof @font-face syntax&nbsp;
 - `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser.
 - {{cssxref("font-weight")}}/{{cssxref("font-style")}}&nbsp;: ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail.
 
-> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}}&nbsp;: c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
+> [!NOTE]
+> Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}}&nbsp;: c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.
 
 ## Résumé
 
diff --git a/files/fr/learn/forms/advanced_form_styling/index.md b/files/fr/learn/forms/advanced_form_styling/index.md
index 18b938fd7ce423..917ecc39c22ad4 100644
--- a/files/fr/learn/forms/advanced_form_styling/index.md
+++ b/files/fr/learn/forms/advanced_form_styling/index.md
@@ -89,7 +89,8 @@ input {
 }
 ```
 
-> **Note :** Mieux vaut utiliser les deux déclarations (celle avec le préfixe et celle sans) lorsqu'on utilise une propriété préfixée. En effet, la version préfixée signifie généralement que du travail de standardisation est en cours et qu'il pourrait y avoir plus tard un consensus pour abandonner la version préfixée. Dans l'exemple qui précède, on se prémunit ainsi contre une telle situation.
+> [!NOTE]
+> Mieux vaut utiliser les deux déclarations (celle avec le préfixe et celle sans) lorsqu'on utilise une propriété préfixée. En effet, la version préfixée signifie généralement que du travail de standardisation est en cours et qu'il pourrait y avoir plus tard un consensus pour abandonner la version préfixée. Dans l'exemple qui précède, on se prémunit ainsi contre une telle situation.
 
 L'aperçu qui suit montre&nbsp;: le rendu avec les styles système à gauche et le rendu avec `appearance: none` à droite ([vous pouvez également voir cet exemple sur cette page](https://mdn.github.io/learning-area/html/forms/styling-examples/appearance-tester.html) si vous voulez le tester sur d'autres systèmes).
 
@@ -118,7 +119,8 @@ De façon intéressante, définir la boardule ou l'arrière-plan du champ de rec
 
 {{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}
 
-> **Note :** Vous pourrez remarquer que, dans le champ de recherche, l'icône de croix pour la suppression disparaît quand le champ perd le focus sur Edge et Chrome mais qu'il reste sur Safari. Pour la retirer en CSS (_y compris lorsqu'il y a le focus_), vous pouvez utiliser `input[type="search"]::-webkit-search-cancel-button { display: none; }`.
+> [!NOTE]
+> Vous pourrez remarquer que, dans le champ de recherche, l'icône de croix pour la suppression disparaît quand le champ perd le focus sur Edge et Chrome mais qu'il reste sur Safari. Pour la retirer en CSS (_y compris lorsqu'il y a le focus_), vous pouvez utiliser `input[type="search"]::-webkit-search-cancel-button { display: none; }`.
 
 ### Mettre en forme les cases à cocher et les boutons radio
 
@@ -246,7 +248,8 @@ Voici quelques autres exemples pour vous donner d'autres idées&nbsp;
 
 Si vous consultez ces exemples dans un navigateur qui ne prend pas en charge [`appearance`](/fr/docs/Web/CSS/appearance), votre conception ne sera pas visible, mais les éléments ressembleront à des cases à cocher et seront utilisables.
 
-> **Note :** Bien qu'Internet Explorer ne prenne pas en charge `appearance`, `input[type=checkbox]::-ms-check` permet de cibler les cases à cocher dans IE. Cette technique fonctionne également pour les boutons radio malgré le nom `-ms-check`.
+> [!NOTE]
+> Bien qu'Internet Explorer ne prenne pas en charge `appearance`, `input[type=checkbox]::-ms-check` permet de cibler les cases à cocher dans IE. Cette technique fonctionne également pour les boutons radio malgré le nom `-ms-check`.
 
 ## Quid des éléments dans la catégorie des «&nbsp;truands&nbsp;»&nbsp;?
 
@@ -324,7 +327,8 @@ button {
 }
 ```
 
-> **Note :** Si vous souhaitez tester ces exemples sur différents navigateurs en même temps, vous pouvez [les retrouver ici](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html) (vous pouvez également [voir leur code source](https://github.com/mdn/learning-area/blob/main/html/forms/styling-examples/ugly-controls.html)).
+> [!NOTE]
+> Si vous souhaitez tester ces exemples sur différents navigateurs en même temps, vous pouvez [les retrouver ici](https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html) (vous pouvez également [voir leur code source](https://github.com/mdn/learning-area/blob/main/html/forms/styling-examples/ugly-controls.html)).
 >
 > Il faut également garder à l'esprit que nous avons ajouté du JavaScript à la page qui liste les fichiers sélectionnés par le sélecteur de fichier (directement après le contrôle). Il s'agit d'une version simplifiée de l'exemple trouvé sur la page de référence pour [`<input type="file">`](/fr/docs/Web/HTML/Element/Input/file#exemples).
 
@@ -425,7 +429,8 @@ Les champs pour les dates et heures ([`datetime-local`](/fr/docs/Web/HTML/Elemen
 
 Toutefois, les parties internes du contrôle (le calendrier qui s'affiche pour sélectionner la date, le sélecteur pour incrémenter/décrémenter les valeurs) ne sont pas du tout personnalisables et on ne peut pas s'en débarrasser avec `appearance: none;`. Si vous devez maîtriser la forme de 1 à Z, vous devrez utiliser une bibliothèque tierce ou construire votre propre contrôle.
 
-> **Note :** On notera que [`<input type="number">`](/fr/docs/Web/HTML/Element/Input/number) peut souffrir du même problème quant au mécanisme d'incrémentation/décrémentation. Toutefois, on peut contourner certains problèmes, lorsque les données collectées par le contrôle sont simples, en utilisant un champ de type `text` à la place.
+> [!NOTE]
+> On notera que [`<input type="number">`](/fr/docs/Web/HTML/Element/Input/number) peut souffrir du même problème quant au mécanisme d'incrémentation/décrémentation. Toutefois, on peut contourner certains problèmes, lorsque les données collectées par le contrôle sont simples, en utilisant un champ de type `text` à la place.
 
 ### Les champs d'intervalle
 
diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md
index eb9a04b22a5598..469a76be002f12 100644
--- a/files/fr/learn/forms/basic_native_form_controls/index.md
+++ b/files/fr/learn/forms/basic_native_form_controls/index.md
@@ -39,13 +39,15 @@ Vous avez déjà découvert certains des éléments utilisés pour les formulair
   - [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text).
 - Certains des attributs communs à l'ensemble des contrôles de formulaire.
 
-> **Note :** Les fonctionnalités discutées dans cet article sont prises en charge par l'ensemble des navigateurs. Ce n'est pas le cas pour tous les contrôles de formulaire. Nous verrons ces contrôles HTML5 plus récents dans les deux articles suivants. Si vous souhaitez consulter une référence plus avancée, vous devriez lire [la référence des éléments HTML relatifs aux formulaires](/fr/docs/Web/HTML/Element#forms), et notamment la référence exhaustive sur [les types d'éléments `<input>`](/fr/docs/Web/HTML/Element/Input).
+> [!NOTE]
+> Les fonctionnalités discutées dans cet article sont prises en charge par l'ensemble des navigateurs. Ce n'est pas le cas pour tous les contrôles de formulaire. Nous verrons ces contrôles HTML5 plus récents dans les deux articles suivants. Si vous souhaitez consulter une référence plus avancée, vous devriez lire [la référence des éléments HTML relatifs aux formulaires](/fr/docs/Web/HTML/Element#forms), et notamment la référence exhaustive sur [les types d'éléments `<input>`](/fr/docs/Web/HTML/Element/Input).
 
 ## Les champs de saisie pour du texte
 
 Les champs [`<input>`](/fr/docs/Web/HTML/Element/Input) pour saisir du texte sont les contrôles de formulaire les plus simples. Ils sont un outil pratique pour permettre à l'utilisatrice ou l'utilisateur de saisir n'importe quelle sorte de données. Nous avons déjà vu certains exemples simples.
 
-> **Note :** Les champs texte des formulaires permettent de saisir du texte simple. Cela signifie qu'on ne peut pas les utiliser pour saisir du texte complexe (en gras, italique, etc.). Si vous rencontrez un éditeur de texte complexe sur le Web, il s'agira d'un contrôle construit autrement avec du HTML, CSS et JavaScript.
+> [!NOTE]
+> Les champs texte des formulaires permettent de saisir du texte simple. Cela signifie qu'on ne peut pas les utiliser pour saisir du texte complexe (en gras, italique, etc.). Si vous rencontrez un éditeur de texte complexe sur le Web, il s'agira d'un contrôle construit autrement avec du HTML, CSS et JavaScript.
 
 Tous les contrôles textuels partagent certains comportements&nbsp;:
 
@@ -54,13 +56,15 @@ Tous les contrôles textuels partagent certains comportements&nbsp;:
 - Leur taille peut être contrainte&nbsp;: la taille physique de la boîte formant le champ peut être ajustée avec l'attribut [`size`](/fr/docs/Web/HTML/Attributes/size) et le nombre maximum de caractères qui peuvent être saisis dans le champ peut être défini avec l'attribut [`maxlength`](/fr/docs/Web/HTML/Attributes/maxlength).
 - La vérification orthographique peut être activée, si le navigateur la prend en charge, avec l'attribut [`spellcheck`](/fr/docs/Web/HTML/Global_attributes/spellcheck).
 
-> **Note :** L'élément HTML [`<input>`](/fr/docs/Web/HTML/Element/Input) est différent des autres éléments HTML, car il peut prendre de nombreuses formes différentes selon la valeur de son attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type). C'est ce même élément qu'on utilisera pour créer la plupart des types de champs de formulaire, que ce soit des textes sur une seule ligne, des dates et des heures, des contrôles sans texte comme des cases à cocher ou des boutons radio, des sélecteurs de couleurs, et des boutons.
+> [!NOTE]
+> L'élément HTML [`<input>`](/fr/docs/Web/HTML/Element/Input) est différent des autres éléments HTML, car il peut prendre de nombreuses formes différentes selon la valeur de son attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type). C'est ce même élément qu'on utilisera pour créer la plupart des types de champs de formulaire, que ce soit des textes sur une seule ligne, des dates et des heures, des contrôles sans texte comme des cases à cocher ou des boutons radio, des sélecteurs de couleurs, et des boutons.
 
 ### Un champ textuel sur une seule ligne
 
 Pour créer un champ permettant de saisir du texte sur une seule ligne, on utilisera un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) vaut `text`, ou pour lequel l'attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) est absent (`text` étant la valeur par défaut). La valeur `text` est également la valeur utilisée par le navigateur au cas où la valeur indiquée pour l'attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) serait inconnue du navigateur (par exemple, si on utilise `type="color"` et que le navigateur ne prend pas en charge les sélecteurs de couleur natifs).
 
-> **Note :** Vous pouvez trouver des exemples pour l'ensemble des types de champs avec du texte sur une seule ligne sur GitHub avec [`single-line-text-fields.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) ([voir le résultat correspondant](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
+> [!NOTE]
+> Vous pouvez trouver des exemples pour l'ensemble des types de champs avec du texte sur une seule ligne sur GitHub avec [`single-line-text-fields.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) ([voir le résultat correspondant](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
 
 Voici un exemple de champ texte simple sur une ligne&nbsp;:
 
@@ -78,7 +82,8 @@ _La capture d'écran qui suit illustre l'apparence des contrôles (par défaut,
 
 ![Capture d'écran avec la mise en forme par défaut, avec le focus et la désactivation pour un champ texte pour Firefox, Safari, Chrome et Edge.](disabled.png)
 
-> **Note :** HTML5 a amélioré les différents champs textuels en ajoutant des valeurs spéciales pour l'attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) qui permettent d'imposer des contraintes de validation particulières et d'avoir d'autres fonctionnalités, par exemple pour la saisie d'URL ou de nombres. Nous verrons ceux-ci dans le prochain article, [les types de champs de formulaire HTML5](/fr/docs/Learn/Forms/HTML5_input_types).
+> [!NOTE]
+> HTML5 a amélioré les différents champs textuels en ajoutant des valeurs spéciales pour l'attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) qui permettent d'imposer des contraintes de validation particulières et d'avoir d'autres fonctionnalités, par exemple pour la saisie d'URL ou de nombres. Nous verrons ceux-ci dans le prochain article, [les types de champs de formulaire HTML5](/fr/docs/Learn/Forms/HTML5_input_types).
 
 #### Un champ pour saisir un mot de passe
 
@@ -112,7 +117,8 @@ Ces éléments sélectionnables sont des contrôles dont on peut changer l'état
 
 On notera que ces contrôles ne se comportent pas exactement comme les autres contrôles de formulaire. En effet, pour la plupart des champs de formulaires, lorsque le formulaire est envoyé, tous les champs ayant un attribut [`name`](/fr/docs/Web/HTML/Element/Input#attr-name) sont envoyés, même si aucune valeur n'a été saisie. Pour les cases à cocher et les boutons radio, leurs valeurs sont uniquement envoyées lorsqu'ils sont cochés/sélectionnés. S'ils ne sont pas cochés/sélectionnés, rien n'est envoyé, même leur nom. S'ils sont cochés/sélectionnés sans valeur indiquée, leur nom est envoyé avec la valeur `on`.
 
-> **Note :** Vous pouvez retrouver les exemples de cette section sur GitHub sur le fichier [`checkable-items.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html) ([voir la démonstration correspondante](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
+> [!NOTE]
+> Vous pouvez retrouver les exemples de cette section sur GitHub sur le fichier [`checkable-items.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html) ([voir la démonstration correspondante](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
 
 Pour améliorer l'utilisabilité et l'accessibilité, il est conseillé de regrouper les différentes options de chaque liste au sein d'un élément [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset), avec un élément [`<legend>`](/fr/docs/Web/HTML/Element/Legend) fournissant une description de la liste. Chaque paire d'éléments [`<label>`](/fr/docs/Web/HTML/Element/Label)/[`<input>`](/fr/docs/Web/HTML/Element/Input) devrait former un élément de liste à part. Le libellé associé ([`<label>`](/fr/docs/Web/HTML/Element/Label)) est généralement placé immédiatement après le bouton radio ou la case à cocher, les instructions pour choisir parmi les groupes de cases à cocher ou de bouton radio sont généralement portées par le contenu de l'élément [`<legend>`](/fr/docs/Web/HTML/Element/Legend). Voir les exemples mentionnés ci-avant pour des illustrations.
 
@@ -155,7 +161,8 @@ L'image qui suit montre l'apparence des cases à cocher dans leur état par déf
 
 ![Aspect par défaut, avec le focus, et désactivé pour les cases à cocher de Firefox 71, Safari 13 sur macOS et Chrome 79 et Edge 18 sur Windows 10](checkboxes.png)
 
-> **Note :** Les cases à cocher et les boutons radio qui ont l'attribut [`checked`](/fr/docs/Web/HTML/Element/Input/checkbox#attr-checked) lors du chargement pourront être ciblés par la pseudo-classe [`:default`](/fr/docs/Web/CSS/:default), même s'ils ne sont plus cochés/sélectionnés après. Les éléments qui sont cochés/sélectionnés peuvent être ciblés par la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked).
+> [!NOTE]
+> Les cases à cocher et les boutons radio qui ont l'attribut [`checked`](/fr/docs/Web/HTML/Element/Input/checkbox#attr-checked) lors du chargement pourront être ciblés par la pseudo-classe [`:default`](/fr/docs/Web/CSS/:default), même s'ils ne sont plus cochés/sélectionnés après. Les éléments qui sont cochés/sélectionnés peuvent être ciblés par la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked).
 
 En raison de l'aspect marche/arrêt des cases à cocher, celles-ci sont parfois utilisées pour réaliser des interrupteurs en modifiant la mise en forme par défaut. Vous pouvez [en voir un exemple ici](https://mdn.github.io/learning-area/html/forms/toggle-switch-example/) (avec [le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/toggle-switch-example/index.html)).
 
@@ -206,9 +213,11 @@ Les boutons radio ne sont pas, à proprement parler, des boutons malgré leur no
 
 On a également l'élément [`<button>`](/fr/docs/Web/HTML/Element/Button). Celui-ci porte un attribut `type` qui peut valoir `submit`, `reset`, ou `button` pour copier le comportement des trois types d'élément `<input>` mentionnés avant. La différence principale entre ces deux éléments est la plus grande facilité de mise en forme des éléments `<button>`.
 
-> **Note :** Le contrôle de formulaire de type `image` s'affiche également comme un bouton, nous le verrons plus bas.
+> [!NOTE]
+> Le contrôle de formulaire de type `image` s'affiche également comme un bouton, nous le verrons plus bas.
 
-> **Note :** Vous pourrez trouver des exemples pour cette section sur GitHub avec le fichier [`button-examples.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html) ([voir le résultat obtenu avec](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)).
+> [!NOTE]
+> Vous pourrez trouver des exemples pour cette section sur GitHub avec le fichier [`button-examples.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html) ([voir le résultat obtenu avec](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)).
 
 Voici des exemples pour chaque type de bouton `<input>`, accompagnés chacun de leur équivalent avec l'élément `<button>`.
 
diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md
index 54e28f623df547..46888fb6ae8c04 100644
--- a/files/fr/learn/forms/form_validation/index.md
+++ b/files/fr/learn/forms/form_validation/index.md
@@ -190,9 +190,11 @@ Dans cet exemple, l'élément {{HTMLElement("input")}} accepte l'une des deux va
 
 Maintenant, essayez de changer la valeur à l'intérieur de l'attribut `pattern` suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !
 
-> **Note :** Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern) pour être validés. Spécifier le type `email`, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut [`multiple`](/fr/docs/Web/HTML/Element/input#multiple). Comme autre exemple, les champs de type `url` vont automatiquement nécessiter une URL correctement formée.
+> [!NOTE]
+> Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern) pour être validés. Spécifier le type `email`, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut [`multiple`](/fr/docs/Web/HTML/Element/input#multiple). Comme autre exemple, les champs de type `url` vont automatiquement nécessiter une URL correctement formée.
 
-> **Note :** L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern).
+> [!NOTE]
+> L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut [`pattern`](/fr/docs/Web/HTML/Element/input#pattern).
 
 ### Limitation de la taille des entrées
 
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
index bff9d0ff40f8bf..36bc10cf47d4a7 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
@@ -9,7 +9,8 @@ Dans de nombreux cas les [widgets de formulaires HTML disponibles](/fr/docs/Lear
 
 Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.
 
-> **Note :** Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.
+> [!NOTE]
+> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.
 
 ## Conception, structure et sémantique
 
@@ -29,7 +30,8 @@ Le widget est dans son état normal :
 - le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget
 - le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier
 
-> **Note :** Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la [combinaison Option+Tab](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
+> [!NOTE]
+> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la [combinaison Option+Tab](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
 
 Le widget est sans son état actif&nbsp;:
 
@@ -71,7 +73,8 @@ Dans notre exemple, les spécifications manquantes sont évidentes et nous les t
 - [UXDesign.com](http://uxdesign.com/)
 - [The UX Design section of SmashingMagazine](http://uxdesign.smashingmagazine.com/)
 
-> **Note :** De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+**<kbd>↓</kbd>** sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement `click`.
+> [!NOTE]
+> De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+**<kbd>↓</kbd>** sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement `click`.
 
 ### Definition de la structure HTML et de la sémantique
 
@@ -652,9 +655,11 @@ Donc, voici le résultat avec les trois états ([consultez le code source ici](/
 
 Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.
 
-> **Attention :** Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.
+> [!WARNING]
+> Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.
 
-> **Note :** Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « [W3C Web Component](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) » apporte des réponses à cette question particulière. Le [projet X-Tag](http://x-tags.org/) est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.
+> [!NOTE]
+> Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « [W3C Web Component](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) » apporte des réponses à cette question particulière. Le [projet X-Tag](http://x-tags.org/) est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.
 
 ### Pourquoi ne fonctionne-t-il pas ?
 
@@ -924,7 +929,8 @@ window.addEventListener("load", function () {
 
 {{EmbedLiveSample("Avec_JS", 120, 130)}}
 
-> **Note :** Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.
+> [!NOTE]
+> Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.
 
 ### Rendre le travail plus facile
 
@@ -1720,7 +1726,8 @@ Pour prendre en charge le rôle `listbos`, nous n'avons qu'à mettre à jour not
 </div>
 ```
 
-> **Note :** Inclure à la fois l'attribut `role` et l'attribut `class` n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les [selecteurs d'attribut CSS](/fr/docs/CSS/Attribute_selectors).
+> [!NOTE]
+> Inclure à la fois l'attribut `role` et l'attribut `class` n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les [selecteurs d'attribut CSS](/fr/docs/CSS/Attribute_selectors).
 
 ### L'attribut `aria-selected`
 
diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md
index 7be0f5a195343f..955d815c564c99 100644
--- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md
@@ -36,11 +36,13 @@ L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire e
 
 Nous l'avons déjà rencontré dans l'article précédent.
 
-> **Note :** Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.
+> [!NOTE]
+> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.
 
 Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.
 
-> **Note :** HTML5 introduit l'attribut `form` dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.
+> [!NOTE]
+> HTML5 introduit l'attribut `form` dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.
 
 ## Les éléments \<fieldset> et \<legend>
 
@@ -70,7 +72,8 @@ Voici un petit exemple :
 </form>
 ```
 
-> **Note :** Vous trouverez cet exemple dans [fieldset-legend.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/fieldset-legend.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)).
+> [!NOTE]
+> Vous trouverez cet exemple dans [fieldset-legend.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/fieldset-legend.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)).
 
 En lisant le formulaire ci-dessus, un lecteur d'écran dira «&nbsp;Taille du jus de fruit&nbsp;: petit&nbsp;» pour le premier widget, «&nbsp;Taille du jus de fruit&nbsp;: moyenne&nbsp;» pour le second, et «&nbsp;Taille du jus de fruit&nbsp;: grande&nbsp;» pour le troisième.
 
@@ -120,7 +123,8 @@ Par exemple&nbsp;:
 </form>
 ```
 
-> **Note :** Vous trouverez cet exemple dans [checkbox-label.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/checkbox-label.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)).
+> [!NOTE]
+> Vous trouverez cet exemple dans [checkbox-label.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/checkbox-label.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)).
 
 ### Étiquettes multiples
 
@@ -164,9 +168,11 @@ Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce do
 - Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est «&nbsp;nom astérisque nom éditer texte&nbsp;», et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.
 - Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est «&nbsp;nom astériquer éditer texte&nbsp;».
 
-> **Note :** Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.
+> [!NOTE]
+> Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.
 
-> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID&nbsp;!
+> [!NOTE]
+> Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID&nbsp;!
 
 ## Structures HTML courantes dans les formulaires
 
diff --git a/files/fr/learn/forms/html5_input_types/index.md b/files/fr/learn/forms/html5_input_types/index.md
index 1ccf4d380205a1..e8d8c1b42c2fdb 100644
--- a/files/fr/learn/forms/html5_input_types/index.md
+++ b/files/fr/learn/forms/html5_input_types/index.md
@@ -24,7 +24,8 @@ Dans [l'article précédent](/fr/docs/Learn/Forms/Basic_native_form_controls), n
   </tbody>
 </table>
 
-> **Note :** La plupart des fonctionnalités évoquées dans cet article sont largement prises en charge parmi les différents navigateurs. Les exceptions à ceci seront notées dans l'article. Si vous souhaitez plus de détails sur la comptabilité des navigateurs, n'hésitez pas à consulter [la référence HTML sur les éléments de formulaire](/fr/docs/Web/HTML/Element#formulaires), et notamment la référence exhaustive sur [les types d'éléments `<input>`](/fr/docs/Web/HTML/Element/Input).
+> [!NOTE]
+> La plupart des fonctionnalités évoquées dans cet article sont largement prises en charge parmi les différents navigateurs. Les exceptions à ceci seront notées dans l'article. Si vous souhaitez plus de détails sur la comptabilité des navigateurs, n'hésitez pas à consulter [la référence HTML sur les éléments de formulaire](/fr/docs/Web/HTML/Element#formulaires), et notamment la référence exhaustive sur [les types d'éléments `<input>`](/fr/docs/Web/HTML/Element/Input).
 
 L'apparence native des contrôles de formulaire HTML peut être différente de celle voulue pour un design donné. Il arrive donc que les développeuses et développeurs construisent leurs propres contrôles de formulaire sur mesure. Nous aborderons ce sujet dans un tutoriel avancé&nbsp;: [Comment construire des contrôles de formulaire sur mesure](/fr/docs/Learn/Forms/How_to_build_custom_form_controls).
 
@@ -50,7 +51,8 @@ Sur certains appareils, notamment les appareils tactiles avec les claviers logic
 
 ![Clavier de Firefox pour Android pour les champs de type email avec une arobase affichée par défaut.](fx-android-email-type-keyboard.jpg)
 
-> **Note :** Vous pouvez trouver différents exemples de champs de formulaire textuels [sur cette page d'exemple](https://mdn.github.io/learning-area/html/forms/basic-input-examples/) ([le code source correspondant est aussi disponible](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html)).
+> [!NOTE]
+> Vous pouvez trouver différents exemples de champs de formulaire textuels [sur cette page d'exemple](https://mdn.github.io/learning-area/html/forms/basic-input-examples/) ([le code source correspondant est aussi disponible](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html)).
 
 Voici une autre bonne raison de privilégier ces types de champ plus récents qui permettent une meilleure ergonomie sur les différents appareils.
 
@@ -62,7 +64,8 @@ En revanche, un tel mécanisme _ne devrait pas être considéré_ comme une mesu
 
 On notera aussi que `a@b` est une adresse électronique valide pour les contraintes fournies par défaut. En effet, par défaut, un champ `email` permet de saisir des adresses intranet. Pour implémenter un comportement de validation différent, on pourra utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Attributes/pattern) et personnaliser les messages d'erreur affichés. Nous verrons ces fonctionnalités dans l'article [Validation d'un formulaire côté client](/fr/docs/Learn/Forms/Form_validation).
 
-> **Note :** Si la valeur saisie n'est pas une adresse électronique, la pseudo-classe [`:invalid`](/fr/docs/Web/CSS/:invalid) s'appliquera, et la propriété du DOM [`validityState.typeMismatch`](/fr/docs/Web/API/validityState/typeMismatch) renverra `true`.
+> [!NOTE]
+> Si la valeur saisie n'est pas une adresse électronique, la pseudo-classe [`:invalid`](/fr/docs/Web/CSS/:invalid) s'appliquera, et la propriété du DOM [`validityState.typeMismatch`](/fr/docs/Web/API/validityState/typeMismatch) renverra `true`.
 
 ## Champ de recherche
 
@@ -112,7 +115,8 @@ Voici un exemple (tiré de Firefox pour Android)&nbsp;:
 
 ![Le clavier de saisie d'une URL pour Firefox pour Android, avec une touche pour la barre oblique.](fx-android-url-type-keyboard.jpg)
 
-> **Note :** Une URL bien formée ne veut pas nécessairement dire que l'emplacement indiqué par cette adresse existe&nbsp;!
+> [!NOTE]
+> Une URL bien formée ne veut pas nécessairement dire que l'emplacement indiqué par cette adresse existe&nbsp;!
 
 ## Champ numérique
 
@@ -186,7 +190,8 @@ price.addEventListener("input", function () {
 
 Ici, on a deux variables qui référencent le contrôle `range` et l'élément `output`. On remplit immédiatement le contenu ([`textContent`](/fr/docs/Web/API/Node/textContent)) de l'élément `<output>` avec la valeur courante (`value`) du contrôle. Enfin, on ajoute un gestionnaire d'évènement qui permet de gérer les mises à jour lorsque le curseur est déplacé&nbsp;: dans ce cas, on met à jour la valeur de `textContent` de l'élément `<output>` avec la nouvelle valeur.
 
-> **Note :** Un tutoriel couvrant ce sujet est disponible (en anglais) sur CSS Tricks&nbsp;: [L'élément `<output>`](https://css-tricks.com/the-output-element/).
+> [!NOTE]
+> Un tutoriel couvrant ce sujet est disponible (en anglais) sur CSS Tricks&nbsp;: [L'élément `<output>`](https://css-tricks.com/the-output-element/).
 
 ## Sélecteurs de date et d'heure
 
diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
index 53d1de7ede2c8b..8ee38c28ca1211 100644
--- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
+++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
@@ -197,7 +197,8 @@ Modernizr.load({
 
 L'équipe de Modernizr fait une maintenance opportune de grande liste de «&nbsp;[polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin.
 
-> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/).
+> [!NOTE]
+> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/).
 
 ### Faites attention aux performances
 
diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md
index 29ca3b4f818390..8059b1086d8d10 100644
--- a/files/fr/learn/forms/index.md
+++ b/files/fr/learn/forms/index.md
@@ -9,7 +9,7 @@ l10n:
 
 Ce module contient un ensemble d'article pour acquérir les notions fondamentales relatives aux formulaires web. Les formulaires web sont un outil puissant pour l'interaction avec les utilisatrices et utilisateurs. On les utilise généralement pour collecter des données saisies ou pour permettre le contrôle de l'interface. Toutefois, pour des raisons historiques et techniques, il n'est pas évident de les utiliser avec tout leur potentiel. Dans les articles indiqués ci-après, nous aborderons les concepts essentiels des formulaires web&nbsp;: leur structure HTML, la mise en forme des contrôles des formulaires, la validation des données, et l'envoi de données au serveur.
 
-> **Remarque :**
+> [!CALLOUT]
 >
 > #### Vous souhaitez devenir développeuse ou développeur <i lang="en">front-end</i>&nbsp;?
 >
@@ -25,7 +25,8 @@ Pour maîtriser les formulaires, connaître le HTML ne sera pas suffisant. Il fa
 
 Le paragraphe précédent permet de comprendre pourquoi nous avons créé un module à part entière pour les formulaires (plutôt que de distiller le contenu sur les formulaires dans les sections sur HTML, CSS, et JavaScript). En effet, les éléments relatifs aux formulaires sont plus complexes que les autres éléments HTML et nécessite de travailler de concert avec des techniques basées sur CSS et ou JavaScript pour en tirer le meilleur parti.
 
-> **Note :** Si vous travaillez sur un appareil (que ce soit un ordinateur, une tablette ou autre) où vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code fournis dans ces articles dans des outils en ligne comme [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
+> [!NOTE]
+> Si vous travaillez sur un appareil (que ce soit un ordinateur, une tablette ou autre) où vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code fournis dans ces articles dans des outils en ligne comme [JSBin](https://jsbin.com/) ou [Glitch](https://glitch.com/).
 
 ## Guides introductifs
 
diff --git a/files/fr/learn/forms/other_form_controls/index.md b/files/fr/learn/forms/other_form_controls/index.md
index 3d6a1378fc8c2f..3fd35a4b099d63 100644
--- a/files/fr/learn/forms/other_form_controls/index.md
+++ b/files/fr/learn/forms/other_form_controls/index.md
@@ -48,7 +48,8 @@ Les captures suivantes montrent l'aspect par défaut, avec le focus, ou désacti
 
 ![Aspect par défaut, avec le focus et désactivé pour les éléments 'textarea' sur Firefox 71 et Safari 13 sur macOS, et sur Edge 18, Yandex 14, Firefox et Chrome sur Windows 10.](textarea_basic.png)
 
-> **Note :** Un autre exemple, peut-être plus intéressant, est [celui construit dans le premier article de cette série](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) ([voir également le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)).
+> [!NOTE]
+> Un autre exemple, peut-être plus intéressant, est [celui construit dans le premier article de cette série](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html) ([voir également le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html)).
 
 ### Contrôler l'affichage d'un champ multi-ligne
 
@@ -88,7 +89,8 @@ Vous pouvez manipuler l'exemple interactif situé en haut de la page de référe
 
 Les contrôles de listes déroulantes sont un outil pratique pour permettre de sélectionner une valeur parmi différentes options, sans occuper trop d'espace sur l'interface utilisateur. HTML dispose de deux formes de listes déroulantes&nbsp;: **la boîte de sélection avec `<select>`**, et **la boîte d'autocomplétion avec `<datalist>`**. Dans les deux cas, l'interaction est la même, une fois que le contrôle est activé, le navigateur affiche une liste de valeurs parmi lesquelles la personne peut choisir.
 
-> **Note :** Vous pouvez trouver des exemples des différents types de contrôles correspondants sur GitHub sur [`drop-down-content.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html) ([voir le résultat de la démonstration](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html)).
+> [!NOTE]
+> Vous pouvez trouver des exemples des différents types de contrôles correspondants sur GitHub sur [`drop-down-content.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/drop-down-content.html) ([voir le résultat de la démonstration](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html)).
 
 ### Boîte de sélection
 
@@ -168,9 +170,11 @@ Par défaut, une boîte de sélection permet de choisir une seule valeur. En ajo
 
 {{EmbedLiveSample("", 120, 120)}}
 
-> **Note :** Dans le cas d'une sélection multiple, on peut voir que la boîte de sélection n'affiche plus les valeurs comme une liste déroulante. À la place, l'ensemble des valeurs est affiché dans la liste et c'est l'attribut optionnel [`size`](/fr/docs/Web/HTML/Attributes/size) qui détermine la hauteur du contrôle.
+> [!NOTE]
+> Dans le cas d'une sélection multiple, on peut voir que la boîte de sélection n'affiche plus les valeurs comme une liste déroulante. À la place, l'ensemble des valeurs est affiché dans la liste et c'est l'attribut optionnel [`size`](/fr/docs/Web/HTML/Attributes/size) qui détermine la hauteur du contrôle.
 
-> **Note :** Tous les navigateurs qui prennent en charge l'élément [`<select>`](/fr/docs/Web/HTML/Element/select) prennent également en charge l'attribut [`multiple`](/fr/docs/Web/HTML/Element/select#attr-multiple).
+> [!NOTE]
+> Tous les navigateurs qui prennent en charge l'élément [`<select>`](/fr/docs/Web/HTML/Element/select) prennent également en charge l'attribut [`multiple`](/fr/docs/Web/HTML/Element/select#attr-multiple).
 
 ### Boîte d'autocomplétion
 
@@ -248,7 +252,8 @@ Pour ces cas, les différents navigateurs se comportent de façon hétérogène
 
 Il existe d'autres fonctionnalités relatives aux formulaires qui ne sont pas aussi évidentes que celles déjà abordées, mais qui s'avèrent utiles dans certaines situations. Voyons donc ces fonctionnalités rapidement.
 
-> **Note :** Les exemples de cette section [peuvent être retrouvés sur GitHub avec le fichier `other-examples.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/other-examples.html) ([voir le résultat correspondant](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)).
+> [!NOTE]
+> Les exemples de cette section [peuvent être retrouvés sur GitHub avec le fichier `other-examples.html`](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/other-examples.html) ([voir le résultat correspondant](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)).
 
 ### Jauges et barres de progression
 
diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
index 6d4a5385b8bdaf..717ef0063f5681 100644
--- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
@@ -44,7 +44,8 @@ Le web se fonde sur une architecture client/serveur élémentaire&nbsp;; en rés
 
 Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.
 
-> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur&nbsp;: premiers pas](/fr/docs/Learn/Server-side/First_steps).
+> [!NOTE]
+> Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur&nbsp;: premiers pas](/fr/docs/Learn/Server-side/First_steps).
 
 ## Côté client : définition de la méthode d'envoi des données
 
@@ -78,7 +79,8 @@ De nombreuses pages anciennes utilisent la notation suivante pour indiquer que l
 <form action="#"></form>
 ```
 
-> **Note :** Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut [`action`](/fr/docs/Web/HTML/Element/Form#attr-action), tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.
+> [!NOTE]
+> Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut [`action`](/fr/docs/Web/HTML/Element/Form#attr-action), tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.
 
 ### L'attribut method
 
@@ -124,7 +126,8 @@ GET /?say=Hi&to=Mom HTTP/1.1
 Host: foo.com
 ```
 
-> **Note :** Vous trouverez cet exemple sur GitHub — voyez [get-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/get-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
+> [!NOTE]
+> Vous trouverez cet exemple sur GitHub — voyez [get-method.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/get-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
 
 #### La méthode POST
 
@@ -161,7 +164,8 @@ say=Hi&to=Mom
 
 L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.
 
-> **Note :** Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
+> [!NOTE]
+> Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
 
 ### Voir les requêtes HTTP
 
@@ -204,7 +208,8 @@ Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci
 
 ![L'exécution du code PHP déclenche l'affichage de Hi Mom](php-result.png)
 
-> **Note :** Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux).
+> [!NOTE]
+> Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux).
 >
 > Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu _MAMP_ > _Préférences_ > _PHP_, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).
 
@@ -233,7 +238,8 @@ Les deux prototypes référencés dans le code ci‑dessus sont les suivants&nbs
 - [`form.html`](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/templates/form.html)&nbsp;: Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros «&nbsp;à rediriger sur `/hello` quand le formulaire est soumis&nbsp;».)
 - [greeting.html](https://github.com/mdn/learning-area/blob/main/html/forms/sending-form-data/templates/greeting.html)&nbsp;: Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur.
 
-> **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec «&nbsp;`pip3 install flask`&nbsp;». À ce moment‑là vous pourrez exécuter l'exemple avec «&nbsp;`python3 python-example.py`&nbsp;», puis en allant sur «&nbsp;`localhost:5000`&nbsp;» dans votre navigateur.
+> [!NOTE]
+> À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec «&nbsp;`pip3 install flask`&nbsp;». À ce moment‑là vous pourrez exécuter l'exemple avec «&nbsp;`python3 python-example.py`&nbsp;», puis en allant sur «&nbsp;`localhost:5000`&nbsp;» dans votre navigateur.
 
 ### Autres langages et canevas de structures
 
@@ -248,7 +254,8 @@ Il y a de nombreuses autres techniques côté serveur utilisables pour gérer de
 
 Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours _facile_. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.
 
-> **Note :** Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.
+> [!NOTE]
+> Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.
 
 ## Cas particulier : envoyer des fichiers
 
@@ -278,7 +285,8 @@ Par exemple :
 </form>
 ```
 
-> **Note :** Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.
+> [!NOTE]
+> Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.
 
 ## Problèmes courants de sécurité
 
diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md
index 58b800fbe0cea6..e54303b4f88ea6 100644
--- a/files/fr/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md
@@ -25,7 +25,8 @@ L'envoi de données arbitraires de façon asynchrone est généralement désign
 
 L'objet [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) (souvent abrégé en XHR) fourni par le DOM permet de construire des requêtes HTTP, de les envoyer et d'en utiliser le résultat. À l'origine, [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) fut conçu pour échanger des données au format XML, mais il permet désormais aussi d'échanger des données [JSON](/fr/docs/Glossary/JSON). Toutefois, ni XML ni JSON ne sont des formats appropriés pour l'encodage des données de formulaire dans une requête HTTP. Les données de formulaire, décrite avec le type (`application/x-www-form-urlencoded`), prennent la forme d'une liste de paires clé/valeur encodées en URL. Pour la transmission de données binaires, la requête HTTP utilise le type `multipart/form-data`.
 
-> **Note :** Désormais, c'est [l'API <i lang="en">Fetch</i>](/fr/docs/Web/API/Fetch_API) qui est utilisée à la place de XHR, en raison de ses avantages. La plupart du code présenté dans cet article pourrait être réécrit pour utiliser <i lang="en">Fetch</i> à la place de XHR.
+> [!NOTE]
+> Désormais, c'est [l'API <i lang="en">Fetch</i>](/fr/docs/Web/API/Fetch_API) qui est utilisée à la place de XHR, en raison de ses avantages. La plupart du code présenté dans cet article pourrait être réécrit pour utiliser <i lang="en">Fetch</i> à la place de XHR.
 
 Si vous contrôlez la partie cliente (celle exécutée dans le navigateur) et la partie serveur, vous pouvez échanger du JSON et du XML et les traiter comme bon vous semble. Cependant, si vous utilisez un service tiers, vous devez envoyer les données dans un format bien défini.
 
@@ -109,7 +110,8 @@ btn.addEventListener("click", () => {
 
 {{EmbedLiveSample("", "100%", 50)}}
 
-> **Note :** Cette utilisation de [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) est sujette aux [règles de même origine (<i lang="en">same-origin policy</i>)](/fr/docs/Glossary/Same-origin_policy). Si vous souhaitez effectuer des requêtes entre différentes origines, vous devrez paramétrer [le contrôle d'accès CORS](/fr/docs/Web/HTTP/CORS).
+> [!NOTE]
+> Cette utilisation de [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) est sujette aux [règles de même origine (<i lang="en">same-origin policy</i>)](/fr/docs/Glossary/Same-origin_policy). Si vous souhaitez effectuer des requêtes entre différentes origines, vous devrez paramétrer [le contrôle d'accès CORS](/fr/docs/Web/HTTP/CORS).
 
 ### Utiliser `XMLHttpRequest` et `FormData`
 
diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md
index b99978ebdeb178..a03f3693977b40 100644
--- a/files/fr/learn/forms/styling_web_forms/index.md
+++ b/files/fr/learn/forms/styling_web_forms/index.md
@@ -389,7 +389,8 @@ button:focus {
 
 Et voilà ! (en français dans le texte)
 
-> **Note :** si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la [fonctionner en direct](https://mdn.github.io/learning-area/html/forms/postcard-example/) (et revoyez son [code source](https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example)).
+> [!NOTE]
+> Si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la [fonctionner en direct](https://mdn.github.io/learning-area/html/forms/postcard-example/) (et revoyez son [code source](https://github.com/mdn/learning-area/tree/main/html/forms/postcard-example)).
 
 ## Conclusion
 
diff --git a/files/fr/learn/forms/test_your_skills_colon__basic_controls/index.md b/files/fr/learn/forms/test_your_skills_colon__basic_controls/index.md
index d848618da6b9c2..176da0b328ff7c 100644
--- a/files/fr/learn/forms/test_your_skills_colon__basic_controls/index.md
+++ b/files/fr/learn/forms/test_your_skills_colon__basic_controls/index.md
@@ -7,7 +7,8 @@ slug: Learn/Forms/Test_your_skills:_Basic_controls
 
 Le but de cette évaluation est de vérifier que vous avez compris [l'article sur les contrôles de formulaire natifs de base](/fr/docs/Learn/Forms/Basic_native_form_controls).
 
-> **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices.
+> [!NOTE]
+> Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices.
 >
 > Si vous bloquez, demandez-nous de l'aide&nbsp;: voir la section [Évaluation et aide](#évaluation_et_aide) en bas de cette page.
 
diff --git a/files/fr/learn/forms/ui_pseudo-classes/index.md b/files/fr/learn/forms/ui_pseudo-classes/index.md
index 15963d797a454d..6be0fed41cf5a4 100644
--- a/files/fr/learn/forms/ui_pseudo-classes/index.md
+++ b/files/fr/learn/forms/ui_pseudo-classes/index.md
@@ -44,7 +44,8 @@ Nous avons abordé ces pseudo-classes dans les articles précédents. Plus réce
 
 Il en existe de nombreuses autres, mais celles indiquées dans cette liste sont les plus utiles à première vue. Certaines des autres pseudo-classes permettent de résoudre des problèmes bien spécifiques ou ne sont pas encore prises en charge de façon homogène par les navigateurs. Celles de la liste précédente sont correctement prises en charge, mais il reste nécessaire de bien tester ses formulaires pour s'assurer qu'ils fonctionnent pour le public cible.
 
-> **Note :** Certaines des pseudo-classes vues ici portent sur la mise en forme des contrôles de formulaire selon leur état de validation (est-ce que la donnée saisie dans le champ est valide ou non&nbsp;?). Nous apprendrons comment paramétrer et contrôler les contraintes de validation dans notre prochain article sur [la validation des formulaires côté client](/fr/docs/Learn/Forms/Form_validation). En attendant, nous aborderons ce sujet de façon simple afin de ne pas créer de confusion.
+> [!NOTE]
+> Certaines des pseudo-classes vues ici portent sur la mise en forme des contrôles de formulaire selon leur état de validation (est-ce que la donnée saisie dans le champ est valide ou non&nbsp;?). Nous apprendrons comment paramétrer et contrôler les contraintes de validation dans notre prochain article sur [la validation des formulaires côté client](/fr/docs/Learn/Forms/Form_validation). En attendant, nous aborderons ce sujet de façon simple afin de ne pas créer de confusion.
 
 ## Mettre en forme les champs selon qu'ils sont obligatoires ou non
 
@@ -97,9 +98,11 @@ Le formulaire qui précède n'est pas particulièrement mauvais, mais il n'est p
 
 Dans la prochaine section, nous verrons un meilleur exemple pour indiquer les champs obligatoires, qui utilise `:required` mais aussi du contenu généré.
 
-> **Note :** Il est probable que vous n'ayez pas souvent à utiliser la pseudo-classe `:optional`. Par défaut, les contrôles de formulaire sont optionnels et vous pouvez alors utiliser votre mise en forme par défaut pour les contrôles optionnels et rajouter les styles supplémentaires pour les contrôles obligatoires.
+> [!NOTE]
+> Il est probable que vous n'ayez pas souvent à utiliser la pseudo-classe `:optional`. Par défaut, les contrôles de formulaire sont optionnels et vous pouvez alors utiliser votre mise en forme par défaut pour les contrôles optionnels et rajouter les styles supplémentaires pour les contrôles obligatoires.
 
-> **Note :** Si un bouton radio fait partie d'un groupe de boutons radio qui portent le même nom et qu'il a l'attribut `required`, tous les boutons radio seront considérés comme invalides jusqu'à ce que l'un d'eux soit sélectionné. Toutefois, seul celui qui porte l'attribut `required` sera ciblé par la pseudo-classe [`:required`](/fr/docs/Web/CSS/:required).
+> [!NOTE]
+> Si un bouton radio fait partie d'un groupe de boutons radio qui portent le même nom et qu'il a l'attribut `required`, tous les boutons radio seront considérés comme invalides jusqu'à ce que l'un d'eux soit sélectionné. Toutefois, seul celui qui porte l'attribut `required` sera ciblé par la pseudo-classe [`:required`](/fr/docs/Web/CSS/:required).
 
 ## Utiliser du contenu généré avec des pseudo-classes
 
@@ -131,7 +134,8 @@ input[type="radio"]:checked::before {
 
 C'est utile ici, car les lecteurs d'écran indiquent déjà lorsqu'un bouton radio ou qu'une case à cocher est cochée/décochée et on ne veut pas qu'ils vocalisent un autre élément du DOM qui indique cet état de sélection, car cela pourrait être source de confusion. Avoir un indicateur purement visuel permet de résoudre ce problème.
 
-> **Note :** Cet exemple illustre également comment combiner une pseudo-classe et un pseudo-élément si nécessaire.
+> [!NOTE]
+> Cet exemple illustre également comment combiner une pseudo-classe et un pseudo-élément si nécessaire.
 
 Revenons à notre exemple obligatoire/optionnel précédent. Cette fois, nous ne modifierons pas l'apparence du champ, nous utiliserons du contenu généré afin d'ajouter un libellé ([voir le résultat ici](https://mdn.github.io/learning-area/html/forms/pseudo-classes/required-optional-generated.html), et [le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/required-optional-generated.html)).
 
@@ -246,7 +250,8 @@ input:valid + span::before {
 
 Comme avant, on définit la position de l'élément `<span>` avec `position: relative` afin que le contenu généré puisse être placé relativement au contrôle auquel il s'applique. On positionne ensuite de façon absolue les différents contenus générés selon que les données sont valides ou invalides (avec une coche verte dans le premier cas et une croix rouge dans le second). Pour mettre en avant les données invalides et inviter à une action, on ajoute également une bordure rouge épaisse au contrôle correspondant.
 
-> **Note :** On utilise ici `::before` pour ajouter ces indicateurs, car on utilisait déjà `::after` pour les libellés «&nbsp;obligatoire&nbsp;».
+> [!NOTE]
+> On utilise ici `::before` pour ajouter ces indicateurs, car on utilisait déjà `::after` pour les libellés «&nbsp;obligatoire&nbsp;».
 
 Vous pouvez voir ici le résultat&nbsp;:
 
@@ -258,7 +263,8 @@ On voit ici comment les champs texte sont invalides lorsqu'ils sont vides et val
 
 Comme mentionné brièvement avant, il existe deux autres pseudo-classes&nbsp;: [`:in-range`](/fr/docs/Web/CSS/:in-range) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range). Celles-ci s'appliquent aux champs numériques dont les intervalles de validité sont délimités par les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min) et [`max`](/fr/docs/Web/HTML/Element/Input#attr-max) lorsque leurs données sont comprises ou en dehors de cet intervalle.
 
-> **Note :** Les types de champs numériques sont&nbsp;: `date`, `month`, `week`, `time`, `datetime-local`, `number`, et `range`.
+> [!NOTE]
+> Les types de champs numériques sont&nbsp;: `date`, `month`, `week`, `time`, `datetime-local`, `number`, et `range`.
 
 On notera que les champs pour lesquels les données sont dans l'intervalle seront aussi ciblés par la pseudo-classe `:valid` et que les champs pour lesquels les données sont en dehors de l'intervalle seront également ciblés par la pseudo-classe `:invalid`. Pourquoi avoir les deux&nbsp;? Cela porte principalement sur la sémantique&nbsp;: savoir qu'une valeur est en dehors d'un intervalle est plus spécifique qu'une invalidité générique et on pourra alors fournir un message plus utile pour les valeurs en dehors d'un intervalle plutôt que de simplement indiquer que la valeur est invalide. Il est aussi possible de fournir les deux messages.
 
@@ -312,7 +318,8 @@ Il est possible qu'un champ numérique soit obligatoire _et_ qu'il soit en dehor
 
 Cela fonctionne plutôt bien&nbsp;: lorsque la page charge pour initialement, c'est «&nbsp;Obligatoire&nbsp;» qui est montré avec une croix et une bordure rouge. Lorsqu'on saisit un âge valide (ici dans l'intervalle `12-120`), le champ devient valide. En revanche, si on change l'âge pour saisir une valeur en dehors de l'intervalle, le message «&nbsp;En dehors de l'intervalle autorisé&nbsp;» apparaît en lieu et place de «&nbsp;Obligatoire&nbsp;».
 
-> **Note :** Pour saisir une valeur invalide/en dehors de l'intervalle, il faudra placer le focus sur le contrôle et la saisir au clavier. En effet, les boutons d'incrément/décrément ne permettront pas de saisir une valeur en dehors de l'intervalle valide.
+> [!NOTE]
+> Pour saisir une valeur invalide/en dehors de l'intervalle, il faudra placer le focus sur le contrôle et la saisir au clavier. En effet, les boutons d'incrément/décrément ne permettront pas de saisir une valeur en dehors de l'intervalle valide.
 
 ## Mettre en forme les champs actifs ou désactivés, en lecture seule ou non
 
@@ -571,7 +578,8 @@ Voici le résultat qu'on obtient&nbsp;:
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-default.html", '100%', 200)}}
 
-> **Note :** Vous pouvez également consulter [cet exemple `radios-checked-default.html` sur une page séparée](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html) (et [voir le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-default.html).)
+> [!NOTE]
+> Vous pouvez également consulter [cet exemple `radios-checked-default.html` sur une page séparée](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html) (et [voir le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-default.html).)
 
 Pour un exemple avec `:indeterminate`, on n'utilise pas de sélection par défaut (s'il y en avait une, l'état indéterminé n'aurait pas lieu). On met en forme les boutons radio indéterminés avec le fragment de CSS qui suit&nbsp;:
 
@@ -598,9 +606,11 @@ Voici le résultat correspondant&nbsp;:
 
 {{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html", '100%', 200)}}
 
-> **Note :** L'exemple est également disponible sur GitHub [sur une page séparée `radios-checked-indeterminate.html`](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html) ([voir le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-indeterminate.html)).
+> [!NOTE]
+> L'exemple est également disponible sur GitHub [sur une page séparée `radios-checked-indeterminate.html`](https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html) ([voir le code source correspondant](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/radios-checked-indeterminate.html)).
 
-> **Note :** Vous pouvez trouver [d'autres exemples avec l'état `indeterminate`](/fr/docs/Web/HTML/Element/Input/checkbox#gérer_un_état_indéterminé) sur la page de référence pour [`<input type="checkbox">`](/fr/docs/Web/HTML/Element/Input/checkbox).
+> [!NOTE]
+> Vous pouvez trouver [d'autres exemples avec l'état `indeterminate`](/fr/docs/Web/HTML/Element/Input/checkbox#gérer_un_état_indéterminé) sur la page de référence pour [`<input type="checkbox">`](/fr/docs/Web/HTML/Element/Input/checkbox).
 
 ## D'autres pseudo-classes
 
diff --git a/files/fr/learn/forms/user_input_methods/index.md b/files/fr/learn/forms/user_input_methods/index.md
index c157f2451914b0..06dbfe606d5e32 100644
--- a/files/fr/learn/forms/user_input_methods/index.md
+++ b/files/fr/learn/forms/user_input_methods/index.md
@@ -37,7 +37,8 @@ window.addEventListener("keyup", handleKeyUp, true);
 
 où `handleKeyDown` et `handleKeyUp` sont des fonctions implémentant les contrôles sur les événements `keydown` et `keyup`.
 
-> **Note :** Jetez un coup d'oeil à la [Référence des événements](/fr/docs/Web/Events) et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.
+> [!NOTE]
+> Jetez un coup d'oeil à la [Référence des événements](/fr/docs/Web/Events) et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.
 
 #### Souris
 
@@ -61,13 +62,15 @@ element.addEventListener("touchmove", handleMove, false);
 
 où `element` est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles.
 
-> **Note :** Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des [événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events).
+> [!NOTE]
+> Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des [événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events).
 
 #### Événements de pointeur
 
 Quand vous avez affaire à des appareils qui incorporent de multiples formes d'entrée, comme la souris, le toucher du doigt et la saisie au stylet, il peut être difficile de développer une solution qui marche pour tous ces mécanismes de contrôle différents. Les [événements de pointeur](/fr/docs/Web/API/Pointer_events) aident les développeurs à gérer plus facilement les événements sur les appareils en normalisant le traitement de chacun d'entre eux. Un pointeur peut être n'importe quel contact sur l'écran, fait par le curseur d'une souris, d'un stylo, le toucher (y compris multi-touch) ou autre périphérique d'entrée de pointage. Les événements génériques pour gérer la saisie du pointeur ressemblent beaucoup à ceux pour la souris: `pointerdown`, `pointermove`, `pointerup`, `pointerover`, `pointerout`, etc.
 
-> **Note :** Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le [polyfill pointer.js](https://github.com/mozilla/pointer.js) est disponible sur le compte GitHub de Mozilla.
+> [!NOTE]
+> Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le [polyfill pointer.js](https://github.com/mozilla/pointer.js) est disponible sur le compte GitHub de Mozilla.
 
 ### Implémentez les contrôles
 
@@ -81,7 +84,8 @@ Voici le code pour demander que le pointeur soit bloqué à l'intérieur d'`elem
 element.requestPointerLock();
 ```
 
-> **Note :** Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.
+> [!NOTE]
+> Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.
 
 #### Orientation de l'écran
 
@@ -89,7 +93,8 @@ Si l'orientation de l'écran est importante pour votre application, vous pouvez
 
 Les données d'orientation peuvent être récupérées à travers l'attribut {{domxref("screen.orientation")}} ou à travers la media query [`orientation`](/fr/docs/Web/CSS/@media/orientation). Quand `screen.orientation` change, l'événement {{domxref("screen.orientationchange")}} est declenché sur l'objet screen. Verrouiller l'orientation de l'écran en possible en invoquant la méthode {{domxref("screen.lockOrientation")}}, tandis que la méthode {{domxref("screen.unlockOrientation")}} supprime le verrouillage de l'écran précédemment définit.
 
-> **Note :** Pour plus d'informations sur l'API Screen Orientation API consultez [Gérer l'orientation de l'écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation).
+> [!NOTE]
+> Pour plus d'informations sur l'API Screen Orientation API consultez [Gérer l'orientation de l'écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation).
 
 #### Plein écran
 
@@ -108,7 +113,8 @@ if (elem.requestFullscreen) {
 }
 ```
 
-> **Note :** Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation [utiliser le plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode).
+> [!NOTE]
+> Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation [utiliser le plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode).
 
 #### Drag & Drop
 
@@ -129,7 +135,8 @@ Ici, on
 - Définit l'attribut [`draggable`](/fr/docs/Web/HTML/Attributs_universels#attr-dir) à vrai pour que l'élément puisse être déplacé.
 - Ajoute un gestionnaire d'événement [`dragstart`](/fr/docs/Web/Events/dragstart) qui définit les données de déplacement à l'intérieur.
 
-> **Note :** Vous pouvez trouver plus d'informations dans la documentation MDN [Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop).
+> [!NOTE]
+> Vous pouvez trouver plus d'informations dans la documentation MDN [Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop).
 
 #### contentEditable
 
@@ -139,7 +146,8 @@ Dans un Open Web App, tout élément DOM peut être rendu directement éditable
 <div contenteditable="true">Ce texte peut être édité par l'utilisateur.</div>
 ```
 
-> **Note :** Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide [Contenu Éditable](/fr/docs/Web/HTML/Contenu_editable).
+> [!NOTE]
+> Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide [Contenu Éditable](/fr/docs/Web/HTML/Contenu_editable).
 
 ## Exemples
 
diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md
index 0c8a922475692e..5e29be9dea191f 100644
--- a/files/fr/learn/forms/your_first_form/index.md
+++ b/files/fr/learn/forms/your_first_form/index.md
@@ -69,7 +69,8 @@ Cet élément définit un formulaire. C'est un élément conteneur au même titr
 - L'attribut `action` définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
 - L'attribut `method` définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
 
-> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [«&nbsp;Envoi des données de formulaire](/fr/docs/Learn/Forms/Envoyer_et_extraire_les_données_des_formulaires)&nbsp;».
+> [!NOTE]
+> Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [«&nbsp;Envoi des données de formulaire](/fr/docs/Learn/Forms/Envoyer_et_extraire_les_données_des_formulaires)&nbsp;».
 
 Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.
 
@@ -135,13 +136,15 @@ Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attri
 - Un clic sur un bouton `reset` réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
 - Un clic sur un bouton `button` ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.
 
-> **Note :** Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple `<input type="submit">`. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
+> [!NOTE]
+> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple `<input type="submit">`. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.
 
 ## Mise en page élémentaire du formulaire
 
 Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.
 
-> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
+> [!NOTE]
+> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
 
 Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
 
@@ -231,7 +234,8 @@ button {
 
 Désormais notre formulaire a une bien meilleure allure.
 
-> **Note :** Il est sur GitHub dans [first-form-styled.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)).
+> [!NOTE]
+> Il est sur GitHub dans [first-form-styled.html](https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html)).
 
 ## Envoyer les données au serveur Web
 
diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.md b/files/fr/learn/getting_started_with_the_web/css_basics/index.md
index 22b7453a12b9bb..e62543d4f12c26 100644
--- a/files/fr/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.md
@@ -114,7 +114,8 @@ Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et
    }
    ```
 
-   > **Note :** Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire** **de CSS.** Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.
+   > [!NOTE]
+   > Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire** **de CSS.** Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.
 
 4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (_body_) du document soit plus lisible :
 
@@ -225,7 +226,8 @@ img {
 
 Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser `margin: 0 auto`, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément `body` est un **élément de bloc**, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments **_inline_** (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise `display: block;` pour que l'image se comporte comme un élément de bloc.
 
-> **Note :** C'est tout à fait normal si vous ne comprenez pas complètement `display: block;` et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour `display` sont expliquées sur [la page de référence de la propriété `display`](/fr/docs/Web/CSS/display).
+> [!NOTE]
+> C'est tout à fait normal si vous ne comprenez pas complètement `display: block;` et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour `display` sont expliquées sur [la page de référence de la propriété `display`](/fr/docs/Web/CSS/display).
 
 ## Conclusion
 
diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
index e8f4cfba930ead..f3a2d1a4827610 100644
--- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -33,7 +33,8 @@ Cela dit, regardons la structure que le site de test devrait avoir. Les élémen
 3. **un dossier `styles`**&nbsp;: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`.
 4. **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`.
 
-> **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut&nbsp;: **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web !
+> [!NOTE]
+> Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut&nbsp;: **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web !
 
 ## Les chemins de fichiers
 
@@ -70,7 +71,8 @@ Quelques règles générales à propos des chemins de fichier :
 
 Pour le moment, c'est tout ce qu'il y a à savoir.
 
-> **Note :** Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques (« / ») dans votre code..
+> [!NOTE]
+> Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques (« / ») dans votre code..
 
 ## Autre chose ?
 
diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.md b/files/fr/learn/getting_started_with_the_web/html_basics/index.md
index d1a016482b08bf..4cfbdd20d30379 100644
--- a/files/fr/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.md
@@ -50,7 +50,8 @@ Les attributs qui ont une valeur observent ces règles&nbsp;:
 2. Le nom de l'attribut est suivi par un signe égal (`=`).
 3. La valeur de l'attribut est délimitée par des doubles (`"`) ou simples (`'`) quotes.
 
-> **Note :** Les valeurs d'attribut qui ne contiennent pas de blancs ASCII (ou l'un des caractères parmi `"` `'` `` ` `` `=` `<` `>`) peuvent ne pas être encadrées de quotes. Malgré tout, il est recommandé d'utiliser des quotes pour toutes les valeurs d'attribut afin que le code soit cohérent et compréhensible.
+> [!NOTE]
+> Les valeurs d'attribut qui ne contiennent pas de blancs ASCII (ou l'un des caractères parmi `"` `'` `` ` `` `=` `<` `>`) peuvent ne pas être encadrées de quotes. Malgré tout, il est recommandé d'utiliser des quotes pour toutes les valeurs d'attribut afin que le code soit cohérent et compréhensible.
 
 ### Imbrication d'éléments
 
@@ -134,7 +135,8 @@ Les mots-clés utilisés pour le texte alternatif forment un texte descriptif. L
 
 Essayez maintenant d'utiliser un meilleur texte alternatif pour votre image.
 
-> **Note :** Pour en savoir plus sur l'accessibilité, n'hésitez pas à consulter [notre module d'apprentissage sur l'accessibilité](/fr/docs/Learn/Accessibility).
+> [!NOTE]
+> Pour en savoir plus sur l'accessibilité, n'hésitez pas à consulter [notre module d'apprentissage sur l'accessibilité](/fr/docs/Learn/Accessibility).
 
 ## Baliser du texte
 
@@ -152,11 +154,13 @@ Les éléments de titre permettent d'indiquer les parties du contenu qui sont de
 <h4>Mon sous-sous-titre</h4>
 ```
 
-> **Note :** En HTML, tout ce qui est écrit entre `<!--` et `-->` est un **commentaire HTML**. Le navigateur ignore les commentaires lorsqu'il affiche le document. Autrement dit, ce qui est écrit en commentaire est uniquement visible dans le code et pas sur la page. Les commentaires permettent d'ajouter des notes utiles à propos du code ou de la logique.
+> [!NOTE]
+> En HTML, tout ce qui est écrit entre `<!--` et `-->` est un **commentaire HTML**. Le navigateur ignore les commentaires lorsqu'il affiche le document. Autrement dit, ce qui est écrit en commentaire est uniquement visible dans le code et pas sur la page. Les commentaires permettent d'ajouter des notes utiles à propos du code ou de la logique.
 
 Essayez maintenant d'ajouter un titre pertinent à votre page HTML avant l'élément [`<img>`](/fr/docs/Web/HTML/Element/img).
 
-> **Note :** Vous pourrez voir que le titre de niveau 1 possède une mise en forme implicite, mais il ne faut pas utiliser ces éléments pour uniquement afficher du texte en gras ou plus grand. En effet, les éléments ont un sens, utilisé pour [l'accessibilité](/fr/docs/Learn/Accessibility/HTML#contenus_textuels) et [le référencement](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#pourquoi_faut-il_structurer_un_document). Essayez de créer une structure de titres pertinente pour vos pages, sans sauter de niveaux intermédiaires.
+> [!NOTE]
+> Vous pourrez voir que le titre de niveau 1 possède une mise en forme implicite, mais il ne faut pas utiliser ces éléments pour uniquement afficher du texte en gras ou plus grand. En effet, les éléments ont un sens, utilisé pour [l'accessibilité](/fr/docs/Learn/Accessibility/HTML#contenus_textuels) et [le référencement](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#pourquoi_faut-il_structurer_un_document). Essayez de créer une structure de titres pertinente pour vos pages, sans sauter de niveaux intermédiaires.
 
 ### Paragraphes
 
diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
index 9f0540da865edd..96957b2935aef0 100644
--- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -30,7 +30,8 @@ Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela
 
 Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world&nbsp;!&nbsp;» ([la norme en matière d'exemples de programmation de base](https://fr.wikipedia.org/wiki/Hello_world)).
 
-> **Attention :** Si vous rejoignez cette série d'articles en cours de route, [téléchargez cet exemple de code](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) et utilisez‑le comme point de départ.
+> [!WARNING]
+> Si vous rejoignez cette série d'articles en cours de route, [téléchargez cet exemple de code](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) et utilisez‑le comme point de départ.
 
 1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé «&nbsp;scripts&nbsp;» (sans guillemets). Ensuite, dans le nouveau dossier `scripts` que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
 2. Ensuite, dans votre fichier `index.html`, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante `</body>` :
@@ -49,7 +50,8 @@ Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML
 
 5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez `index.html` dans votre navigateur. Vous devriez obtenir quelque chose comme :![](hello-world.png)
 
-> **Note :** La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.
+> [!NOTE]
+> La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.
 
 ### Que s'est-il passé ?
 
@@ -57,13 +59,15 @@ Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScri
 
 Ensuite, nous fixons à «&nbsp;Bonjour, monde !&nbsp;» la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable `myHeading` (elle représente le contenu du titre).
 
-> **Note :** Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.
+> [!NOTE]
+> Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.
 
 ## Les bases du JavaScript en accéléré
 
 Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !
 
-> **Attention :** Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire [Découvrir les outils de développement présents dans le navigateur](/fr/Apprendre/Découvrir_outils_développement_navigateurs).
+> [!WARNING]
+> Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire [Découvrir les outils de développement présents dans le navigateur](/fr/Apprendre/Découvrir_outils_développement_navigateurs).
 
 ### Variables
 
@@ -73,11 +77,14 @@ Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on p
 let myVariable;
 ```
 
-> **Note :** Un point-virgule en fin de ligne indique là où se termine l'instruction&nbsp;; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails.
+> [!NOTE]
+> Un point-virgule en fin de ligne indique là où se termine l'instruction&nbsp;; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails.
 
-> **Note :** Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) sur les règles de nommage des variables). Si vous avez un doute, vous pouvez [vérifier le nom de votre variable](https://mothereff.in/js-variables) pour voir s'il est valide.
+> [!NOTE]
+> Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) sur les règles de nommage des variables). Si vous avez un doute, vous pouvez [vérifier le nom de votre variable](https://mothereff.in/js-variables) pour voir s'il est valide.
 
-> **Note :** JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse &nbsp;!
+> [!NOTE]
+> JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse &nbsp;!
 
 Une fois une variable déclarée, vous pouvez lui donner une valeur :
 
@@ -277,7 +284,8 @@ Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produi
 
 Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir [Expressions et opérateurs](/fr/docs/Web/JavaScript/Reference/Opérateurs) pour la liste complète.
 
-> **Note :** Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez `"35" + "25"` dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez `35 + 25`, vous obtiendrez le bon résultat.
+> [!NOTE]
+> Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez `"35" + "25"` dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez `35 + 25`, vous obtiendrez le bon résultat.
 
 ### Structures conditionnelles
 
@@ -329,7 +337,8 @@ multiply(20, 20);
 multiply(0.5, 3);
 ```
 
-> **Note :** L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)).
+> [!NOTE]
+> L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)).
 
 ### Événements